Conditional Statements and Loops

Flow of code execution can be controlled with control structures. The mainly used control structures are conditional statements and loops, which we look into next.

Conditional statements

Comparing two values in JavaScript is done with an if-statement with three equals-signs. The statement a === b compares the values of a and b. If a and b are the same, the result of the comparison is true, and if a and b are not the same, the result of the comparison is false.

Conditional statements are typically used in combination with comparisons, where some code is executed depending on the output of the comparison. The following example shows a simple if - else -structure, where the printed message depends on the outcome of the comparison.

let a = "5";
let b = "6";

if (a === b) {
  console.log("The same");
} else {
  console.log("Not the same");
}

a = "6";

if (a === b) {
  console.log("The same");
} else {
  console.log("Not the same");
}

deno run app.js
Not the same
The same

Comparison and logical operators

JavaScript has the same comparison operators and logical operators that are present in many other programming languages.

Loops

Here, we will look into the classic for and while structures. Later, when working with collections such as arrays, we will look into how to loop over -- or iterate -- the elements in a data.

For

The for-loop is used to iterate over a pre-defined range of values. The for-loop is written as follows.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

deno run app.js
0
1
2
3
4

The for-loop consists of three parts; (1) instantiation of a loop variable -- let i = 0;, (2) a condition -- i < 5;, and (3) the advancement -- i++. The statement i++ means incrementing the value of the variable i by one and can be broken down to i = i + 1. The code in the block of the for statement -- above console.log(i); is executed over and over again until the condition no longer evaluates to true.

While

The while-loop is used to execute the same code over and over again until a specific criterion is met. The following example demonstrates what a while loop that performs the same task as the above loop would look like. In the example, we use a while - true - break structure, where the break statement is used to exit the loop.

let i = 0;
while (true) {
  if (i >= 5) {
    break;
  }

  console.log(i);
  i++;
}

deno run app.js
0
1
2
3
4

The true within the while loop shown above can be replaced with an evaluation that returns a boolean value. The program below behaves similarly to the above program, although there is no break statement and the evaluation on whether to continue the loop or not is done in the evaluation part of the while statement.

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

deno run app.js
0
1
2
3
4

The above example showed the use of the break statement. When a break statement is executed, the program exits the current loop and continues from the first statement after the loop.

The traditional looping constructs shown above, while useful in general, are rather rarely used in web applications. It is more common to use looping constructs that iterate over collections, or possibly, functional programming approaches to do the same task.