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.