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' of '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

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 (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
})

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>

• 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'));

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>

• 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'));

• 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'));

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>

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'));

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>

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;

Exercises

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