Week 6: JavaScript switch statement, expressions, conditional operator

• JavaScript
• MBO
• Studiejaar 2

Terugblik

Oefeningen.

Code challenge besproken.

Doel van deze les

Switch statement.

Statements vs expressions.

Conditional (ternary) operator.

Switch statements

De switch case is bedoeld voor equality.

Je kan multiple lines of code gebruiken na de ':' .

Makkelijk en overzichtelijk.

Wat gebeurt er als je een break vergeet in een case van de switch statement?

1. Dan voert hij de code uit tot de volgende break
2. Dan krijg je een compiler error
3. Dan stopt het programma niet meer
4. Dan slaat hij de code over

Schrijf het voorgaande switch case in een if else statement

Use a switch statement to log the following string for the given 'language': chinese or mandarin: 'MOST number of native speakers!'
spanish: '2nd place in number of native speakers'
english: '3rd place'
hindi: 'Number 4'
arabic: '5th most spoken language'
for all other simply log 'Great language too :D'

Switch statements

Switch statements worden minder minder vaak gebruikt.

Het hangt af welke stijl jij als programmeur fijner vindt.

Er is in feite geen 'goede' manier.

Statements & expressions

Expressions zijn de stukken code die een waarde produceert.

Voorbeeld:

3 + 4

Dit is een expression.

1989
Is dit een expression?

1. Ja, dit is een expression
2. Ja, dit is een statement
3. Nee, dit is een waarde
4. Nee dat is uw geboortedatum

true && false && !false
Is dit een expression?

1. Boolean waarde tellen niet mee als expression
2. Nee, dit is een boolean operator
3. Nee, dit is een logical operator
4. Ja, dit is een expression

Statements & expressions

Statements zijn acties in het programma. Deze produceren geen waarde maar kunnen wel expressions bevatten.

Statements & expressions

Statements zijn acties in het programma. Deze produceren geen waarde maar kunnen wel expressions bevatten.

Statements & expressions

Statements zijn acties in het programma. Deze produceren geen waarde maar kunnen wel expressions bevatten.

Conditional (ternary) operator

De conditional operator wordt ook wel een ternary operator genoemd omdat hij bestaan uit drie onderdelen:

- condition

- de 'if' gedeelte

- de 'else' gedeelte

Conditional (ternary) operator

Laten wij dit ontleden:

const age = 23;

age >= 18 ? console.log(`I like to drink wine 🍷`) :

    console.log(`I like to drink water 💧`);

Conditional (ternary) operator

Echter wordt hij vaker gebruikt in de volgende vorm:

const drink = age >= 18 ? `wine 🍷` : `water 💧`;

console.log(drink);

Dit wordt nu gezien als een expression omdat het een waarde produceert!

const drink = age >= 18 ? `wine 🍷` : `water 💧`;
console.log(drink);

Vertaal dit eens naar een if else statement.

let drink2

if (age >= 18) {

    drink2 = `wine 🍷`;

} else {

    drink2 = `water 💧`;

}

console.log(drink2);

Conditional (ternary) operator

Wat valt je op aan de code wanneer wij dit vertalen naar een if statement?

Wij moeten drink buiten de if statement declareren. Dit maakt het dat het geen expression kan zijn.

Ons doel was om een expression te gebruiken in een template literal.

Conditional (ternary) operator

Nu kunnen wij dit in een template literal gebruiken:

console.log(`I like to drink ${age >= 18 ? `wine 🍷` : `water 💧`}`);

De ternary operator is niet bedoeld om een if statement te vervangen, het is bedoeld voor snelle en korte beslissingen.

If statement is bedoeld voor meerdere code blocks.

//Ternary is not meant to replace the if statement. Only for quick decisions.

//If statement meant for multiple blocks of code.

Opdracht 1

Opdracht 2

Code challenge

Als je hints wilt, ga dan naar de volgende slide

Code challenge

Opdrachten vorige les

Bekijk de volgende slides om de opdracht(en) opnieuw te bekijken en het antwoord(en).

//Ternary is not meant to replace the if statement. Only for quick decisions.

//If statement meant for multiple blocks of code.

Opdracht Equality Operators: == vs. ===

Antwoord Equality Operators: == vs. ===

Opdracht Logical Operators

Antwoord Logical Operators