# 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
}
 
        Copied!

1
2
3

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}`);
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 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
}
 
        Copied!

1
2
3
4
5

# 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
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10

# switch

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
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10

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
}
 
        Copied!

1
2
3
4

# while

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

1
2
3
4
5
6

# do while

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

1
2
3
4
5
6

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 (and the only one we use in this course) 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
})
 
        Copied!

1
2
3
4

# Examples

# Selection with 'if - else if'

Open es6/controls/else_if.html and es6/controls/else_if.js
Leave the input field empty or enter a number between 0 and 20 and check if you pass/fail the JavaScript course

<div class="border-gray">
    <label for="score">Score:</label>
    <input type="number" min="0" max="20" id="score" name="score" />
</div>
<div id="result"></div>
 
        Copied!

1
2
3
4
5

Line 4: listen to the blur event on the input field
(Note that a blur event corresponds with a click outside the input field, in contrast to a focus event where you click inside the input field)
Line 6: set score to null if the input field is empty
Line 11 to 23: the score value determines which message is displayed in which colour
Line 25: update the message
Line 26: remove the previous class on #result
Line 27: add the new class on #result
Line 31: trigger the blur event on page load

const scoreInput = document.getElementById('score');
const result = document.getElementById('result');

scoreInput.addEventListener('blur', function (e) {
    // ternary operator
    const score = scoreInput.value === '' ? null : scoreInput.value;
    let scoreMsg = null;
    let scoreClass = 'border-gray';

    // if - else if
    if (score === null) {
        scoreMsg = '-- NO SCORE AVAILABLE --';
    } else if (score >= 10) {
        scoreMsg = `<b>${score}/20</b>: you passed the JavaScript course. Congratulations!`;
        scoreClass = 'border-green';
    } else if (score >= 8) {
        scoreMsg = `<b>${score}/20</b>: you failed the JavaScript course, but you may tolerate it!`;
        scoreClass = 'border-blue';
    } else {
        scoreMsg = `<b>${score}/20</b>: unfortunately, you failed the JavaScript course. Better luck next time!`;
        scoreClass = 'border-red';
    }

    // show result
    result.innerHTML = `<p>${scoreMsg}</p>`;
    result.className = '';
    result.classList.add(scoreClass);
});

// dispatch (trigger) blur event
scoreInput.dispatchEvent(new Event('blur'));
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Selection with 'switch'

Open es6/controls/switch.html and es6/controls/switch.js
In this example, we replaced the numeric field with a range slider
- This removes the need for an additional test to see if the field is empty

<div class="border-gray">
    <label for="score">Score:</label>
    <input type="range" id="score" name="score" min="0" max="20" value="14"
        oninput="output.value =  score.value"
    />
    <output id="output">14</output>/20
</div>
<div id="result"></div>
 
        Copied!

1
2
3
4
5
6
7
8

Line 4: listen to the change event on the range slider
Line 10 - 30: the score value determines which message is displayed in which colour
Line 39: trigger the change event on page load

const scoreInput = document.getElementById('score');
const result = document.getElementById('result');

scoreInput.addEventListener('change', function (e) {
    const score = scoreInput.value;
    let scoreMsg = null;
    let scoreClass = 'border-gray';

    // switch
    switch (score) {
        case '0':
        case '1':
        case '2':
        case '3':
        case '4':
        case '5':
        case '6':
        case '7':
            scoreMsg = `<b>${score}/20</b>: unfortunately, you failed the JavaScript course. Better luck next time!`;
            scoreClass = 'border-red';
            break;
        case '8':
        case '9':
            scoreMsg = `<b>${score}/20</b>: you failed the JavaScript course, but you may tolerate it!`;
            scoreClass = 'border-blue';
            break;
        default:
            scoreMsg = `<b>${score}/20</b>: you passed the JavaScript course. Congratulations!`;
            scoreClass = 'border-green';
    }

    // show result
    result.innerHTML = `<p>${scoreMsg}</p>`;
    result.className = '';
    result.classList.add(scoreClass);
});

// dispatch (trigger) change event
scoreInput.dispatchEvent(new Event('change'));
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Line 4: listen to the change event on the range slider
Line 10 - 22: set the message and color when the comparison score is true
Line 31: trigger the change event on page load

const scoreInput = document.getElementById('score');
const result = document.getElementById('result');

scoreInput.addEventListener('change', function (e) {
    const score = scoreInput.value;
    let scoreMsg = null;
    let scoreClass = 'border-gray';

    // switch
    switch (true) {
        case score < 8:
            scoreMsg = `<b>${score}/20</b>: unfortunately, you failed the JavaScript course. Better luck next time!`;
            scoreClass = 'border-red';
            break;
        case score < 10:
            scoreMsg = `<b>${score}/20</b>: you failed the JavaScript course, but you may tolerate it!`;
            scoreClass = 'border-blue';
            break;
        default:
            scoreMsg = `<b>${score}/20</b>: you passed the JavaScript course. Congratulations!`;
            scoreClass = 'border-green';
    }

    // show result
    result.innerHTML = `<p>${scoreMsg}</p>`;
    result.className = '';
    result.classList.add(scoreClass);
});

// dispatch (trigger) change event
scoreInput.dispatchEvent(new Event('change'));
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Compare iteration methods

Open es6/controls/drawBlocks.html and es6/controls/drawBlocks.js

<html lang="en">
    <head>
        ...
        <style>
            section span {
                display: inline-block;
                width: 3rem;
                line-height: 3rem;
                text-align: center;
                border: 1px solid orangered;
                background-color: rgba(255, 69, 0, 0.1);
                margin: 0 0.5rem 0.5rem 0;
            }
        </style>
    </head>
    <body>
        ...
        <div class="border-gray">
            <label for="block">Draw blocks:</label>
            <input type="range" id="block" name="block" min="0" max="20" value="6" oninput="output.value =  block.value"/>
            <output id="output">6</output>
        </div>
        <div class="row">
            <section class="col-sm-4">
                <h4>for</h4>
                <div></div>
            </section>
            <section class="col-sm-4">
                <h4>while</h4>
                <div></div>
            </section>
            <section class="col-sm-4">
                <h4>do while</h4>
                <div></div>
            </section>
        </div>
        ...
    </body>
</html>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

const blockInput = document.getElementById('block');

blockInput.addEventListener('change', function (e) {
    const blocks = blockInput.value;

    // for
    let draw = '';
    for (let i = 0; i < blocks; i++) {
        draw += `<span>${i + 1}</span>`;
    }
    document.querySelector('main section:first-of-type div').innerHTML = draw;

    // while
    draw = '';
    let i = 0;
    while (i < blocks) {
        draw += `<span>${i + 1}</span>`;
        i++;
    }
    document.querySelector('main section:nth-of-type(2) div').innerHTML = draw;

    // do while
    draw = '';
    i = 0;
    do {
        draw += `<span>${i + 1}</span>`;
        i++;
    } while (i < blocks);
    document.querySelector('main section:last-of-type div').innerHTML = draw;
});

// dispatch (trigger) change event
blockInput.dispatchEvent(new Event('change'));
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# Iterating arrays

Open es6/controls/colorBlocks.html and es6/controls/colorBlocks.js

<html lang="en">
    <head>
        ...
        <style>
            section div {
                line-height: 3rem;
                text-align: center;
                background-color: rgba(115, 115, 115, 0.1);
                margin: 1rem;
            }
        </style>
    </head>
    <body>
        ...
        <section id="blocks"></section>
        ...
    </body>
</html>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const colors = ['darkred', 'green', 'blue', 'rgb(128,38,193)', '#0584b8'];
let block = '';

colors.forEach(function (color, i) {
    block += `<div style="border: solid 2px ${color}">
                <p style="color: ${color}">
                  I'm block <b>${i}</b> with a <b>${color}</b> border
                </p>
             </div>`;
});

document.getElementById('blocks').innerHTML = block;
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12

# Exercises

Open exercises/index.html and make the exercises under the tab ES6 > Controls