» Quick Introduction to JavaScript » 1. Basics » 1.5 Control Flow

Control Flow

The control flow is the order in which the computer executes statements in a script.

If Else

The if...else statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement in the optional else clause will be executed.

let a = 10;
if (a > 0) {
    result = 'positive';
} else {
    result = 'not positive';
}
console.log(result); // positive

For Loops

Javascript offers 3 different types of "for" loops as of ES6.

Standard for loop looks like this:

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

for...in

The for...in statement iterates over all enumerable string properties of an object, including inherited enumerable properties.

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
// a: 1
// b: 2
// c: 3

for...of

The for...of statement executes a loop that operates on a sequence of values sourced from an iterable object. Iterable objects include instances of built-ins such as Array, String, Map, Set and etc.

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}
// a
// b
// c

Since array is bascially a special object, surely you can use for...in on the array. However, you will get a list of integer keys, or indexes.

const array1 = ['a', 'b', 'c'];

for (const element in array1) {
  console.log(element);
}
// 0
// 1
// 2

While Loops

The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.

let n = 0;

while (n < 3) {
  n++;
}

console.log(n); // 3

do...while

The do...while statement creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.

let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result); // 12345

Switch

The switch statements are conditionals that may have many branches (like many if / else if).

const fruit = 'mango';
switch (fruit) {
  case 'blueberry':
    console.log('Blueberries are $0.59 a pound.');
    break;
  case 'apple':
  case 'mango':
    console.log('Mangoes and apples are $2.79 a pound.');
    break;
  default:
    console.log(`Sorry, we are out of ${fruit}.`);
}
// Mangoes and apples are $2.79 a pound.

Ternary Operator

The ternary operator (?:) is frequently used as an alternative to an if...else statement.

let isMember = true;
let fee = isMember ? '$7.00' : '$12.00';
console.log(fee); // $7.00

This operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.

Code Challenge

Write a function that takes an array of numbers as a parameter and calculates the sum of all the elements using the for...of loop.

Loading...
> code result goes here
Prev
Next