Week 9: Strict mode & functions

• JavaScript
• MBO
• Studiejaar 2

Terugblik

4 code challenges.

Aan jezelf bewijzen dat je het kan.

Doel van deze les

Advanced fundamentals van JS.

• Strict mode.
• Functions.
  

Alles wordt afgesloten met code challenges.

Strict mode

Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Strict mode

Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Wat is er mis met de code?

Strict mode

Activeer strict mode door bovenaan jouw file het volgende te schrijven:

'use strict';

Run de code nu nog eens. Wat komt er nu in de console van je browser te staan?

Strict mode

Strict mode beschermd jou ook tegen het declareren van variabele namen die ook een keyword zijn in JS. Bijvoorbeeld:

const interface = `Audio`;

const private = 543;

Run deze code. Wat zegt de compiler nu?

Functions

Fundamentele building blocks van programmeren.

Laten wij een samen een voorbeeld maken.

Functions

function logger() {

    console.log(`My name is Taif`);

}

logger();

*Je kan deze functie zo vaak oproepen als je wilt*

Hoe noem je het aanroepen van een functie in het Engels?

1. Calling a function
2. Invoking a function
3. Running a function
4. Alle antwoorden zijn correct

Functions

Functions zijn net kleine machines. Die kunnen input nemen, er iets mee doen en iets 'uitspugen'.

Laten we een voorbeeld nemen van een foodprocessor.

Functions

Fundamentele building blocks van programmeren.

Functions

Opdracht:

Maak een functie genaamd fruitProcessor. Deze neemt twee variabelen, namelijk, 'apples' en 'oranges'. In deze functie moet apples en oranges geprint worden. Maak daaronder ook de variabele 'juice'. Deze variabele moet `Juice with ${apples} apples and ${oranges} oranges.`; bevatten. Return deze value.

Functions

Laten we dit samen doen.

function fruitProcessor(apples, oranges) {

    console.log(apples, oranges);

    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;

    return juice;

}

 const appleJuice = fruitProcessor(5, 0);

 console.log(appleJuice);

 console.log(fruitProcessor(5, 0));

 const appleOrangeJuice = fruitProcessor(2, 4);

 console.log(appleOrangeJuice);

 const num = Number('23');

Functions

Function gebruiken wij om stukken code te hergebruiken.

In programmeren is er een bekende gezegde; Don't Repeat Yourself (DRY principle).

function fruitProcessor(apples, oranges) {

    console.log(apples, oranges);

    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;

    return juice;

}

 const appleJuice = fruitProcessor(5, 0);

 console.log(appleJuice);

 console.log(fruitProcessor(5, 0));

 const appleOrangeJuice = fruitProcessor(2, 4);

 console.log(appleOrangeJuice);

 const num = Number('23');

Functions declarations vs expressions

function calcAge1(birthYear) {

     const age = 2037 - birthYear;

     return age;

 }

>>>

function calcAge1(birthYear) {

     return 2037 - birthYear;

 }

Functions declarations vs expressions

Let op! Wanneer je het woord parameters en arguments gebruikt.

Wat is het woord dat nu in het oranje is gearceerd.

1. Dit is een argument
2. Dit is een parameter
3. 👌🏼
4. Dit is een string literal.

Functions declarations

Een function declaration:

// Function declaration

 function calcAge1(birthYear) {

     return 2037 - birthYear;

 }

 const age1 = calcAge1(1989);

Functions expression

Een function declaration:

// Function declaration

 function calcAge1(birthYear) {

     return 2037 - birthYear;

 }

 const age1 = calcAge1(1989);

Functions declarations vs expressions

Een function is ook een value want wij kunnen hem in een variabele stoppen.

Welke van de twee moet je gebruiken? Dat ligt aan jouw eigen programmeer-stijl.

Arrow functions

Opdracht:

Zoek op hoe je een arrow function moet gebruiken in JS.

De functie moet hetzelfde bevatten als calcAge2. Sla deze functie op in een variabele genaamd calcAge3.

Opdracht:
Zoek op hoe je een arrow function moet gebruiken in JS.

De functie moet hetzelfde bevatten als calcAge2. Sla deze functie op in een variabele genaamd calcAge3.

let drink2

if (age >= 18) {

    drink2 = `wine 🍷`;

} else {

    drink2 = `water 💧`;

}

console.log(drink2);

Arrow functions

Laten wij dit samen doen:

Is dit een expression?

1. Ja, want de inhoud van calcAge3 produceert een waarde.
2. Nee, want dit produceert geen waarde.
3. Dit kan geen expression zijn want het is geen functie.
4. Jesse moet ook les geven in JS #teamspirit.

Arrow functions

Geen return nodig.

Goed voor 1 line functions.

Arrow functions

Arrow functions

Arrow functions

Kan ik niet gewoon overal arrow functions gebruiken omdat het zo makkelijk is te gebruiken?

Nee

Dat komt omdat arrow functions geen 'this' keyword ondersteunen. Dit leg ik later uit.

Functions in functions

Kan ik niet gewoon overal arrow functions gebruiken omdat het zo makkelijk is te gebruiken?

Nee

Dat komt omdat arrow functions geen 'this' keyword ondersteunen. Dit leg ik later uit.

Functions in functions

Kan ik niet gewoon overal arrow functions gebruiken omdat het zo makkelijk is te gebruiken?

Nee

Dat komt omdat arrow functions geen 'this' keyword ondersteunen. Dit leg ik later uit.