Basic Syntax of JavaScript

Yes, sometimes, expressions can also be statements.

Statements can contain expressions. It can be the combination of multiple expressions, but expressions cannot contain statements. For example:

1console.log("John" + " " + "Doe");

In this case, console.log() is an expression, and "John" + " " + "Doe" is also an expression. Together, they form a statement.

More complex statements that can't be expressed in a single line, such as an if statement or a while loop, will be written in a more structured format:

1if (a === 0) {
2  a + 1;
3} else {
4  a + 2;
5}

These statements don't have to end with a semicolon. Instead, the square brackets ({}) are used to group other smaller statements inside.

What is a declaration

A declaration is an instruction in the program that declares something new, such as a variable or a function.

1let x = 10;
2
3let myFunc = function (num) {
4  console.log(num * num);
5};

In summary, expressions produce values, statements perform actions and don't have to produce a value, and declarations introduce new things into the program.

What is a variable

A variable is a way for the program to save a value so that it can be accessed and reused later. A variable declaration consists of a keyword, an identifier (variable name), an assignment operator, and a value.

1let x = 10;

In this example, let is the keyword that declares the variable, x is the identifier, also know as the variable name. = does not indicate equality here. It is the assignment operator that assigns the value 10 to the variable x.

The variable x can then be used later in the program:

1let x = 10;
2
3x + 10; // -> 20
4x * x; // -> 100

Variables can be declared in 3 different ways in JavaScript:

1let x = 10;

1const x = 10;

1var x = 10;

let declares a temporary variable bind, meaning the value can be changed later in the program.

1let x = 10;
2
3x + 10; // -> 20
4
5x = 5;
6
7x + 10; // -> 15

const declares a permanent variable binding. You will get an error message if you try to change its value after declaration.

1const x = 10;
2
3x + 10; // -> 20
4
5x = 5; // -> Error

1/Users/. . ./index.js:5
2x = 5; // -> Error
3  ^
4
5TypeError: Assignment to constant variable.
6    at Object.<anonymous> (/Users/. . ./index.js:5:3)
7    at Module._compile (node:internal/modules/cjs/loader:1378:14)
8    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
9    at Module.load (node:internal/modules/cjs/loader:1212:32)
10    at Module._load (node:internal/modules/cjs/loader:1028:12)
11    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
12    at node:internal/main/run_main_module:28:49
13
14Node.js v21.6.0

var is the legacy method of declaring a variable. It is rarely used these days, but you might still encounter it in some old software. It works differently in terms of scope compared to let and const. We will explain the details later.

What is a keyword

The keywords in JavaScript are a set of words with special meanings and purposes, such as the let, const, and var that are used to declare a new variable.

The keywords are case sensitive, meaning JavaScript will not treat LET or Let as a keyword.

What is an identifier

An identifier is a name for the declared variables or functions.

An identifier must start with either a letter, a dollar sign ($), or an underscore (_). Subsequent digits can also be numbers.

1let $name = "John";
2let _name = "John";
3let name = "John";
4let name123 = "John";

But remember that an identifier cannot start with a number.

Identifiers are also case sensitive, meaning JavaScript will treat name, Name, and NAME as different variables.

What is a comment

You probably already know what comments look like from our previous examples, but there is still something we must discuss.

1// Execute if <condition> returns true

This is a single-line comment. It is the part of your code that is intended for humans to read and will be ignored by the JavaScript compiler.

In practice, it is common for people to forget the purpose of the code they previously wrote, or the code was too cryptic to easily understand, such as how we've been testing the parity of a number (n % 2 === 0). You might not immediately recognize the purpose of this expression, so it is best to always write comments whenever you can.

There are two types of comments in JavaScript. Our previous example is a single-line comment defined by //. You can also define a section of texts as comments using /* and */.

1/*
2Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
5*/

All the enclosed texts will be ignored by JavaScript.