Week 4: JavaScript truthy and falsy values, equality operators, boolean logic and logical operators

• JavaScript
• MBO
• Studiejaar 2

Terugblik

Concatenation.

Template literals met backticks.

Decisions.

Code challenge.

Extra huiswerkopdrachten onderaan de presentatie

Doel van deze les

• Aan het einde van de les heb jij variables gebruikt die een waarde hebben van 0 of 1. Jij gebruikt deze ‘truthy’ en ‘falsy’ values om beslissing te maken.
• Aan het einde van de les heb jij equality- en logic operators in een beslissing gebruikt om waarden te veranderen.

Truthy & Falsy values

Maak de volgende variabelen aan:

console.log(Boolean(0));

console.log(Boolean(undefined));

console.log(Boolean('Taif'));

console.log(Boolean({}));

console.log(Boolean(''));

Klik mij!

Console.log is lang typen. Probeer eens log te typen 😉

Truthy & Falsy values

const money = 0;

if (money) {

    console.log(`Don't spend it all ;-)`);

} else {

    console.log(`You should get a job!`);

}

Truthy & Falsy values

let height;

if (height) {

    console.log(`YAY! Height is defined`);

} else {

    console.log(`Height is UNDEFINED`);

}

Equality operators

const age = 18;

if (age === 18) console.log(`You just became an adult`);

Strict equality operator. Deze operator voert geen type coericion uit en werkt alleen als beide exact dezelfde zijn.

`18` == 18;
Wat is hier het resultaat van?

1. True
2. False
3. Weet ik niet
4. Mag ik u trakteren op een pizza vanmiddag?

Equality operators

const age = `18`;

if (age == 18) console.log(`You just became an adult (loose)`);

Vermijd zoveel mogelijk de loose equality operators omdat het veel moeilijk te vinden bugs introduceert!

Loose equality operator. Deze operator voert type coericion uit en werkt alleen als beide dezelfde zijn.

Prompt

const favourite = prompt(`What's your favourite number?`); 

console.log(favourite);

console.log(typeof favourite);

if (favourite == 23) {
console.log(`Cool! 23 is an amazing number!`);
}
Wat gebeurt hier in de vergelijking?

1. Dit is een loose operator
2. Dit is een strict operator
3. favourite is een string en 23 niet
4. Dit gaat niet uitgevoerd kunnen worden

Type converter

Wij moeten een Number type conversion uitvoeren op favourite!

const favourite = Number(prompt(`What's your favourite number?`));

In het rood staat wat ik heb toegevoegd.

Else if

if (favourite === 23) { 

    console.log(`Cool! 23 is an amazing number!`);

} else if (favourite === 7) {

    console.log(`7 is also a cool number`);

} else {

    console.log(`Number is not 23 or 7`);

}

Different operator

if (favourite !== 23) { 

    console.log(`Why not 23?`);

}

Als favourite !== 23 de (strict) different operator is, wat is dan:
favourite != 23

1. De loose operator
2. if condition
3. De not statement
4. Iets wat op de vorige slide stond

Boolean operators

A: Sarah has a drivers license

B: Sarah has good vision

Kan Sarah zowel een rijbewijs hebben EN goed zicht?

Ja

Nee

Truthtable (waarheidstabel)

Kan Sarah zowel een rijbewijs hebben OF goed zicht?

Ja

Nee

Truthtable A OR B

Boolean operators

age = 16;

A: Age is greater or equal to 20;

B: Age is less than 30;

A OR !B >> Check de precedence!

Logical operators

const hasDriversLicense = true; // A

const hasGoodVision = true; // B

console.log(hasDriversLicense && hasGoodVision);

const hasDriversLicense = true; // A
const hasGoodVision = false; // B

console.log(hasDriversLicense && hasGoodVision);

1. True
2. False
3. Truth
4. ☝🏼

Logical operators

const hasDriversLicense = true; // A

const hasGoodVision = false; // B

console.log(hasDriversLicense || hasGoodVision);

Logical operators

const hasDriversLicense = true; // A

const hasGoodVision = false; // B

console.log(!hasDriversLicense);

Logical operators

const hasDriversLicense = true; // A

const hasGoodVision = false; // B

const shouldDrive = hasDriversLicense && hasGoodVision;

if(shouldDrive) {

console.log(`Sarah is able to drive!`);

} else {

console.log(`Someone else should drive...`);

}

Logical operators

const isTired = true; // C

const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

const shouldDrive = hasDriversLicense || hasGoodVision || isTired;

Logical operators

const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

if(hasDriversLicense && hasGoodVision && !isTired) {

console.log(`Sarah is able to drive!`);

} else {

console.log(`Someone else should drive...`);

}

Wat komt hier uit? (Verander C naar false)

Code challenge

Extra oefening 1

Extra oefening 2