Week 7 - Quiz en Tamagotchi | JavaScript Cheatsheet

Arrays met objecten#

Wat zijn objecten in arrays?
Tot nu toe hadden we arrays met losse waardes (strings, numbers). Maar je kunt ook complexere data opslaan met objecten.

Simpele array (wat we al kennen):

let kleuren = ["rood", "blauw", "groen"];

Array met objecten (nieuwe manier):

let vragen = [

                      {

                        vraag: "Wat is de hoofdstad van Nederland?",

                        antwoord: "Amsterdam"

                      },

                      {

                        vraag: "Hoeveel poten heeft een spin?",

                        antwoord: "8"

                      }

                    ];

Voordeel: Je kunt meerdere eigenschappen per item opslaan (vraag + antwoord, naam + leeftijd, etc.)

Uitlezen van objecten in array:

// Eerste vraag pakken

                    console.log(vragen[0]); //
                        Hele object

                    console.log(vragen[0].vraag); // "Wat is de hoofdstad van
                        Nederland?"

                    console.log(vragen[0].antwoord); // "Amsterdam"


                    // Tweede vraag pakken

                    console.log(vragen[1].vraag); // "Hoeveel poten heeft een spin?"

For...of loop (door array heen lopen)#

Wat is een for...of loop?
Met for...of kun je door een array heen lopen, item voor item. Dit is de makkelijkste manier om door een array te gaan.

Basis for...of loop:

let kleuren = ["rood", "blauw", "groen"];


                    for (let kleur of
                    kleuren) {

                      console.log(kleur);

                    }

Wat betekent dit?

for → begin een loop
let kleur → maak een variabele voor elk item
of kleuren → loop door de array "kleuren"
console.log(kleur) → print elk item

Output:

// In de console zie je:

                    rood

                    blauw

                    groen

Voordeel for...of: Super simpel! Je krijgt automatisch elk item zonder dat je met indexen hoeft te werken.

For...of met objecten#

Je kunt for...of gebruiken om door een array met objecten heen te lopen.

Voorbeeld met vragen:

let vragen = [

                      { vraag: "2 + 2?", antwoord: "4"
                    },

                      { vraag: "5 x 3?", antwoord: "15" },

                      { vraag: "10 - 7?", antwoord: "3"
                    }

                    ];


                    for (let item of
                    vragen) {

                      console.log("Vraag: " +
                    item.vraag);

                      console.log("Antwoord: " +
                    item.antwoord);

                    }

Output:

// In de console zie je:

                    Vraag: 2 + 2?

                    Antwoord: 4

                    Vraag: 5 x 3?

                    Antwoord: 15

                    Vraag: 10 - 7?

                    Antwoord: 3

Let op: Bij for...of krijg je niet automatisch een index (vraagteller). Als je die nodig hebt, moet je zelf een variabele maken.

Met teller (als je die nodig hebt):

let teller = 1;


                    for (let item of
                    vragen) {

                      console.log("Vraag " + teller
                    +
                    ": " + item.vraag);

                      teller++;

                    }

Samenvatting#

Belangrijkste concepten deze week:

Arrays kunnen objecten bevatten met meerdere eigenschappen
For...of loop gebruiken om door arrays heen te lopen

Veelgemaakte fouten#

for let item in array → moet for let item of array zijn (gebruik of, niet in)
Object eigenschappen verkeerd schrijven → item.vraag niet item[vraag]
Proberen om [i] te gebruiken in for...of → gebruik gewoon de variabele naam (bijv. item)

Debug tip:

Bij problemen met for...of:

Zet console.log(item) in de loop om te zien wat je items zijn
Check of je of gebruikt en niet in
Check of je objecteigenschappen correct schrijft met een .
Test eerst met een kleine array (2-3 items)