Control structures

Selection

In JavaScript, you can use the following (classical) selection structures

if

if (condition1) {
  //  block of code to be executed if condition1 is true
}

You can omit the curly braces if the code to be executed contains only one line of code

Example 1:

const a = 5;

// long version
if (a === 5) {
  console.log(a);
}

// shorthand version
if (a === 5) console.log(a);

The nullish coalescing operator (opens new window) ?? is often used to check whether a variable is undefined or null let a = leftExpr ?? rightExpr

If leftExpr is null or undefined, a is equal to rightExpr Otherwise a is equal to leftExpr

let a = null;

// long version
if (a === null || a === undefined) {
  a = 10;
}
console.log(`a = ${a}`);

// nullish coalescing operator
a = a ?? 10;
console.log(`a = ${a}`);

// or even shorter with the 'logical nullish assignment'
a ??= 10;
console.log(`a = ${a}`);

if - else

if (condition1) {
  //  block of code to be executed if condition1 is true
} else {
  //  block of code to be executed if condition1 is false
}

The ternary operator (opens new window) can be used if both (if and else) blocks of code to be executed contain only one line of code

condition ? 'valueTrue' : 'valueFalse' provides a shorthand for an if else statement

If the condition evaluates to true, the result of the operator is valueTrue Otherwise (condition evaluates to false), the result of the operator is valueFalse

Example 1:

const a = 10;
const b = 7;

// long version
if (a > 5) {
  console.log(`${a} > ${b}`);
} else {
  console.log(`${a} <= ${b}`);
}

// shorthand version with ternary operator
a > 5 ? console.log(`${a} > ${b}`) : console.log(`${a} <= ${b}`);

• Example 2:

const a = 4;
let isEven = null;

// long version
if (a % 2 === 0) {
  isEven = "even";
} else {
  isEven = "odd";
}
console.log(`${a} an ${isEven} number`);

// shorthand version with ternary operator
isEven = a % 2 === 0 ? "even" : "odd";
console.log(`${a} an ${isEven} number`);

• Example 3:

const a = 4;
let isEven = null;

// long version
if (a % 2 === 0) {
  isEven = true;
} else {
  isEven = false;
}
console.log(`${a} is even? ${isEven}`);

// shorthand version
isEven = a % 2 === 0 ? true : false;
console.log(`${a} is even? ${isEven}`);

// if the return value is 'true' or 'false' you can shorten this even more
isEven = a % 2 === 0;
console.log(`${a} is even? ${isEven}`);

if - else if - else

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if condition1 is false and condition2 is true
} else if (condition3) {
  //  block of code to be executed if condition1 and condition2 are false and condition3 is true
} else {
  //  block of code to be executed if none of the previous conditions are true
}

switch

A switch is a different way to write a long if-else if-else statement.

By writing code this way, you create a more structured and readable if-else if-else.

You "switch" on a variable and define the different "cases" what the value could be. In the end you always provide a "default" case to catch anything that isn't covered in the cases.

switch (expression) {
  case x:
    // block of code to be executed if case x is true
    break;
  case y:
    // block of code to be executed if case y is true
    break;
  default:
  // block of code to be executed if none of the previous cases are true
}

WARNING

Don't forget the break at the end of each case!

Iteration

Also the following (classical) iteration structures are available in JavaScript

for

const end = 10;
for (let i = 0; i <= end; i++) {
  // block of code to be executed
}

while

let i = 0;
const end = 10;
while (i <= end) {
  // block of code to be executed
  i++;
}

do while

let i = 0;
const end = 10;
do {
  // block of code to be executed
  i++;
} while (i <= end);

REMARK

Ado wile loop always iterates at least one time, even if the condition is false!

Iterating arrays

There are several ways to loop over an array, but the most interesting is the forEach (opens new window) iteration The callback function can have three parameters:

• element: the current element being processed in the array
• index (optional): the index of the current element
• array (optional): the full array on which forEach is performed

const array = ['element1', 'element2', 'element3', ...];
array.forEach(function(element, index, array) {
    // block of code to be executed on the current element
})