JavaScript

Javascript is a high-level, object-oriented, multi-paradigm programming language. JavaScript is primarily known as the language of most modern web browsers, and its early quirks gave it a bit of a bad reputation. However, the language has continued to evolve and improve. JavaScript is a powerful, flexible, and fast programming language now being used for increasingly complex web development and beyond!

The role Javascript plays in web development is as follows:

HTML
is the actual content of the page.
CSS
is the presentation of the web page.
Javascript
is the actual programming language.

In recent years Javascript has been seen popping up outside of the web browser world with tools like nodejs allowing Javascript applications to interact with just a web server to make it more of a backend programming language. Or implementations like angular bringing Javascript to the mobile or desktop world. Also tools like react bringing Javascript to native desktop apps. These addvances in the Javascript world make learning Javascript a vital tool to almost any development field.

This guide is going to reference "modern" JavaScript. Modern JavaScript is noted as any version of JavaScript after ES6: JavaScript Versions.

This first page will cover the absolute basic Fundamentals of JavaScript. If you feel like you can skip this part feel free to jump to another section of the guide:

TODO Link to other topics

JavaScript Fundamentals

This is section is going to cover the basic fundamentals of JavaScript. If you are fairly versed in other programming languages you can probably skip this section and go to one of the more advanced topics listed above.

Data Types

In JavaScript, there are seven fundamental data types:

  • Number: Number in JavaScript is similar to an int or a float data type in most other programming languages.
  • String: In JavaScript strings can be surrounded by single quotes: ' … ' or double quotes " … ". Though we prefer single quotes.
  • Boolean: In JavaScript booleans are just standard booleans described in the data types guide.
  • Undefined: This data type is denoted by the keyword undefined (without quotes). It also represents the absence of a value though it has a different use than null.
  • Null: This data type represents the intentional absence of a value, and is represented by the keyword null (without quotes).
  • Symbol: A newer feature to the language, symbols are unique identifiers, useful in more complex coding. No need to worry about these for now.
  • BigInt: BigInt in JavaScript is similar to a double data type in most other programming languages.

These datatypes are considered primitive data types. They are the most basic data types in the language. Objects are more complex, and we'll cover them later on.

Its also important to note that JavaScript has dynamic typing. This means we do not have to manually define the type of data we will store in each variable. Instead data types are determined automatically.

Tips

  • You can use the keyword typeof to see what data type a value or variable is.
  • Since JavaScript variables are dynamic you can change a variables data type but assigning it a value of a new data type and it will be updated on the fly.

Comments

JavaScript uses // for its Comment notation and /* */ for its Block Comment notation.

Declaring variables

Declaring variables in JavaScript can be done with the let, const, and var keywords. The let and const variables were added in ES6+ (modern JavaScript). Again I want to point out that JavaScript uses dynamic variable declaration so we don't actually have to define what data type our variable is. This also means we can reassign a different value to the variable and it will change the variables data type for us.

  • let allows you to mutate (change) the variable:

    let age = 30;
    age = 31;
    
  • const makes a variable immutable (unchangable):

    const year = 2021;
    // This would throw an error
    year = 2022;
    

    It is worth noting that when using const the variable has to be assigned a value or JavaScript will throw an error about const missing a declaration.

  • var is more of a legacy feature of JavaScript and works pretty much the same as let:

    var job = 'programmer';
    job = 'teacher';
    

    Usage of var should be mostly avoided as it is a legacy feature and has mostly been replaced by let.

Operators

In JavaScript operators are treated just like they are in most other languages and JavaScript also suppports the ++ and -- operators.

Operators allow us to change or work with values to put it simply. Let's look at an example of some simple arithmetic operators:

const now = 2037;
const ageJonas = now - 1991;
const ageSarah = now - 2018;
console.log(ageJonas, ageSarah);
// Prints: 46 19

console.log(ageJonas * 2, ageJonas / 10, 2 ** 3);
// Prints: 92 4.6 8
// 2 ** 3 means 2 to the power of 3

const firstName = 'Jonas';
const lastName = 'Cuomo';
console.log(firstName + ' ' + lastName);
// Prints: Jonas Cuomo

Now let's look at some assignment operators:

let x = 10 + 5; // 15
x += 10; // 25
x *= 4; // 100
x ++; // 101
x --; // 100

Let's also show some comparison operators:

console.log(ageJonas > ageSarah);
// Prints: true

console.log(ageSarah >= 18);
// Prints: true

Tips

  • Here is a guide on operator precedence which describes the order in which operators get executed when combined together in one statement: Operator Precedence.

Functions

In JavaScript functions work pretty standard to most other programming languages. Please refer to the functions guide if you are unfamiliar with the concept of functions. JavaScript does not require us to define a return type for our functions as JavaScript is a dynamic type language. In JavaScript we also don't have to define a data type for any arguments we assign to our functions. It is important to note that we define functions with the function keyword in JavaScript. Let's look at some examples of functions in JavaScript:

function fullName (first, last) {
  console.log(first, last);
  return first + last;
}

console.log(fullName('Jonas', 'Cuomo'));
// Prints: Jonas Cuomo

You will notice that we can also nest functions which will use the output of the inner function as an input argument for the outter function. In this case I am referring to how we nested our call to the fullName function in console.log. console.log is a built in operator in JavaScript, which although isn't technically a function it can be thought of as one. Refer to my operators guide for a more indepth look at what operators are and they differ from functions.

Expression Functions

The example covered above is what is known as a "declaration" function in JavaScript. This is probably the most standard way of defining a function in JavaScript, however it is not the only way. We can also define an "expression" function. An expression function is very similar in concept and even follows all the same rules mentioned above, however we assign the function definition to a variable and then call the function by the variable name. This sounds confusing so let's look at an example:

const fullName = function (first, last) {
  console.log(first, last);
  return first + last;
}

console.log(fullName('Jonas', 'Cuomo'));
// Prints: Jonas Cuomo

Although this may look weird it is important to learn as sometimes we will be required to create expression functions. The reason this work in JavaScript is because in JavaScript functions are just a value so we can assign them to a variable like we would any other value. This will become important later as we dive deeper into functions.

One important difference to note between declaration functions and expression functions is that we can actually call declaration functions before they have been defined whereas with expression functions we have to have defined the function in our code before we can call it.

Arrow Functions

JavaScript also has a form of functions called "arrow" functions. Arrow functions behave just like expression functions, but are much easier and quicker to write. We wirte arrow functions with: => and with arrow functions a return statement is assumed. Let's take a look at how we would write our above examples as an arrow function:

const fullName = (first, last) => first + last;

console.log(fullName('Jonas', 'Cuomo'));

TODO Data Structures

In JavaScript we have many data structures available to us to use in our programs. The simplest of these are arrays.

TODO Arrays

Arrays in JavaScript follow a fairly standard syntax to most dynamic programming languages. Let's look at an example:

// Literal syntax:
const friends = ['John', 'Jacob', 'Jingle'];
console.log(friends);
// Prints: ['John', 'Jacob', 'Jingle']

console.log(friends[1]);
// Prints: Jacob
console.log(friends[friends.length - 1]);
// Prints: Jingle

friends[2] = 'Jay';
console.log(friends);
// Prints: ['John', 'Jacob', 'Jay']

// TODO: Even though array was declared with const entries can be updated.
// More on this later

// Using new keyword:
const friends = new Array('John', 'Jacob', 'Jingle');
console.log(friends);
// Prints: ['John', 'Jacob', 'Jingle']

What's next

Well now we have covered the absolute basics of JavaScript and many basic topics of programming as a whole. Let's now finally dive into some of the meat of the JavaScript programming language. Here are some of the topics I have covered, if JavaScript is completely new to you I would suggest going through them in the order listed:

Other tips

Here are just some other random tips about JavaScript:

Strict mode

Strict mode is a feature in JavaScript that will cause more errors and fail our program when we do things wrong whereas without it JavaScript will silently fail and continue running our program. Using strict mode will force us to write more secure JavaScript applications. To use strict mode add 'use strict'; to the beginning of your program.

This page was last updated: 2023-04-12 Wed 20:28. Source