Week 10: Arrays

• JavaScript
• MBO
• Studiejaar 2

Terugblik

Wat waren de onderwerpen van vorige week?

Wat heb jij geleerd?

Schrijf het op in de volgende dia.

Onderwerpen vorige week?

Terugblik

• Strict mode.
• Functions.
• Declarative functions.
• Function expressions (anonymous functions).
• Arrow functions.
• Code challenge.

Wie heeft de code challenge gemaakt?

Ja, in de les

Ja, thuis

Ja thuis, met behulp van de presentatie(s)

Ja, met behulp van het internet

Nee, niet meer naar gekeken

Nee, maar thuis wel geprobeerd

Kwam jij, tijdens het maken van de code challenge, kennis tekort?

1. Ja, de les/uitleg was onduidelijk
2. Ja, er was geen moment om vragen te stellen
3. Nee, maar ik wist niet waar ik moest beginnen
4. Nee, het was voldoende om het te maken

Code challenge bespreken

Docent zal het nu samen met jullie maken.

Kijk naar de beamer/bord.

Doel van deze les

Advanced fundamentals van JS.

• Arrays.
• Objects.
  
• Object methods.

Alles wordt afgesloten met code challenges.

Arrays

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.

Arrays

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.

Arrays (alternative declaration)

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.

Arrays (alternative declaration)

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.

Specifiek element in array opvragen

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.

Opvragen hoe lang een array is

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.

Hoe kan ik de laatste item in de array opvragen?

Opvragen hoe lang een array is

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.

Mutate the array

Replace the second element.

friends[2] = 'Jay';

console.log(friends);

Conclusie waarom veranderd de waarde van een const!??

Only primitive values are unmutable, array's are not primitive.

Mutate the array

friends = ['Bob', 'Alice'];

This is illegal because of the const.

Types in arrays

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.

Oefening met arrays

//gebruik jouw calcAge functie die jij eerder hebt gemaakt.

const calcAge = function(birthYear) {

    return 2037 - birthYear;

}

//maak een nieuw array genaamd years.

const years = [1989, 1990, 1967, 2002, 2018];

Print de eerste twee elementen en de laatste in deze array.

Oefening bespreken

const age4 = calcAge(years[0]);

const age5 = calcAge(years[1]);

const age6 = calcAge(years[years.length - 1]);

console.log(age4, age5, age6);

Every element needs to be an expression

const ages = [calcAge(years[0]), calcAge(years[1]), calcAge(years[years.length - 1])]

console.log(ages);

Array methods

Methods are like operations.

Array methods = array operations.

Example array methods

friends.push('Jay'); //Add as the last element

friends.unshift('Ross'); //Add Ross as the first element

friends.pop(); //Remove the last element

const popped = friends.pop(); //last element

console.log(friends);

console.log(popped);

Example array methods

friends.shift(); //Remove the first element

console.log(friends.indexOf('Monica')); //Retrieve position

console.log(friends.indexOf('Bob')); //-1 if it isn't there

friends.push(23);

console.log(friends.includes('23')); //includes uses strict equality

Example array methods

if (friends.includes('Rachel')) {

    console.log(`You have a friend in me!`);

}

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.