JavaScript Course 3: Control Flow
References
- Code with Mosh: The Ultimate JavaScript Mastery Series – Part 1
- W3School: JavaScript if else and else if Statement
- W3School: JavaScript Switch Statement
- W3School: JavaScript Loops
- W3School: JavaScript Iterables
Conditional statements
In JavaScript we have two types of conditional statements:
If..elseSwitch..case
The syntax convention is to put the open curly brace '{' at the same line as the condition.
If..else
if condition with single and multiple statements.
if (condition) statement;
if (condition)
statement;
if (condition) {
statement_1;
statement_2;
}
else if condition with single and multiple statements.
if (condition_1) statement_1;
else if (condition_2) statement_2;
if (condition_1) {
statement_1;
}
else if (condition_2)
statement_2;
if (condition_1) {
statement_1;
} else if (condition_2) {
statement_2;
statement_3;
}
else if none of the conditions is evaluated to true.
if (condition_1) {
statement_1;
}
else if (condition_2) {
statement_2;
}
else {
statement_3;
}
Full example:
// If hour is between 6am and 12pm: Good morning
// If hour is between 12pm and 6pm: Good afternoon
// Otherwise: Goog evening
let hour = 10;
if (hour >= 6 && hour < 12) {
console.log('Good morning');
}
else if (hour >= 12 && hour < 18) {
console.log('Good afternoon');
}
else {
console.log('Good evening');
}
Switch..case
With Switch..case we can compare a value of a variable against a bunch of values. Basic structure:
let variable = 'value';
switch (variable) {
case 'value_1':
console.log('actions for value_1');
break;
case 'value_2':
console.log('actions for value_2');
break;
default:
console.log('default actions');
}
Implementation of If..else for the same task, which looks better, tidy and simple.
if (varuable == 'value_1') console.log('actions for value_1');
else if (varuable == 'value_2') console.log('actions for value_2');
else console.log('default actions');
Loops
The different loops in JavaScript serves for repeating an action number of times. These are:
Forloop – repeats an action number of times.Whileloop – repeats an action number of times.Do..whileloop – repeats an action number of times.For..inloop – iterates over the Properties of an Object or over the Elements or Items in an Array.For..ofloop – iterates over the Elements or Items in an Array.
For loop
The for loops repeat an action number of times, it consists of three statements.
for (initial_expression; condition; increment_expression)
console.log('action to repeat');
- Within the
initial_expressionwe declare and initialize a variable, usually the variable is namediwhich is shortcut from index and it is common convention offorloops:let i = 0– this is what we called the loop variable. - Within the
conditionwe compare the value of the loop variable [i] with something else. The loop will run as longer itsconditionevaluates to true. For example, if you run the loop 5 times the condition should be:i < 5. - Within the
increment_expressionwe define the rule of the loop variable [i] incrementation, for example:i++.
Complete example:
for (let i = 0; i < 5; i++) {
console.log('Hello world!');
console.log('Repeat: ' + (i + 1));
}
Display only odd numbers between 1 to 5 (and in reverse order):
for (let i = 1; i <= 5; i++) if (i % 2 !== 0) console.log(i);
for (let i = 5; i >= 1; i--) if (i % 2 !== 0) console.log(i);
While loop
While loops also repeat an action number of times. One key difference between for loops and while loops is that within the for loops the loop variable is part of the loop itself. In while loops you have to declare this variable externally.
let i = 0; // initial_expressio
while (i <= 5) { // condition
console.log(i);
i++; // increment_expression
}
Do..while loop
Do..while loops also repeat an action number of times. They are very similar to while loops but they slightly different. Do..while loops always will be executed at least once, because the the condition is evaluated at the end of the iteration.
let i = 0; // initial_expressio
do {
console.log(i);
i++; // increment_expression
} while (i <= 5); // condition
Infinite loops
We must avoid such situation that leads to browser crash, etc. Such negative effect could be achieved with all kind of loops in JavaScript that repeat an action number of times.
let i = 0;
while (i <= 5) {
console.log(i);
// i++; // in this case 'i' will still '0' forever
}
do {
// do something...
} while (true);
For..in loop
For..in loops iterate over the Properties of an Object.
const demoObject = {
property_1: "value_1",
property_2: "value_2",
};
for (let key in demoObject)
console.log(key, demoObject[key]);
property_1 value_1
property_2 value_2
For..in could be used to iterate over the Elements or Items in an Array, but for..of loops are better for this purpose.
const demoArray = ['value_1', 'value_2', 'value_3'];
for (let index in demoArray)
console.log(index, demoArray[index]);
0 value_1
1 value_2
2 value_3
For..of loop
For..of loops are ideal way in order to iterate over Array Elements or Items. These loops work with the values of the Array elements and we do not to deal with the array index. It is available in ES6 and later.
const demoArray = ['value_1', 'value_2', 'value_3'];
for (let element of demoArray)
console.log(element);
value_1
value_2
value_3
Break and Continue
The key words break and continue can change the behavior of all kind of loops in JavaScript. Here is an example with while loop:
let i = 0;
while (i <= 10) {
if (i === 2) {i++; continue};
console.log(i);
if (i === 5) break;
i++;
}
0
1
3
4
5
