Hoofdstuk 12: Objects

Wat is een Object?

Een object in JavaScript is een manier om meerdere waarden met elkaar te verbinden. Waar een array werkt met indexen (0, 1, 2), werkt een object met keys (sleutels) en values (waarden). Dit noemen we key-value pairs.

const persoon = {
    naam: "Jean Luc",
    functie: "Captain"
};

In dit voorbeeld is persoon een object met twee keys: naam en functie. De key naam heeft de value "Jean Luc" en de key functie heeft de value "Captain".

Een object gebruik je wanneer je verschillende soorten informatie over één ding wilt opslaan. Bijvoorbeeld: een persoon heeft een naam, leeftijd, en adres.

Waarden Ophalen uit een Object

Om een waarde uit een object op te halen, gebruik je de naam van het object gevolgd door een punt en de key:

const persoon = {
    naam: "Jean Luc",
    functie: "Captain"
};

console.log(persoon.naam);      // "Jean Luc"
console.log(persoon.functie);   // "Captain"

Oefening 1

Maak een object auto met twee keys: merk met waarde "Toyota" en kleur met waarde "rood".

Jouw code:

// Schrijf hier je code

Oefening 2

Maak een object boek met keys: titel met waarde "JavaScript Basics", auteur met waarde "Jane Doe", en paginas met waarde 250.

Jouw code:

// Schrijf hier je code

Oefening 3

Het object student is al gemaakt. Log de waarde van de key naam naar de console.

Jouw code:

const student = {
    naam: "Alice",
    leeftijd: 20
};
// Schrijf hier je code

Oefening 4

Het object product is al gemaakt. Log de waarde van de key prijs naar de console.

Jouw code:

const product = {
    naam: "Laptop",
    prijs: 799
};
// Schrijf hier je code

Oefening 5

Het object gebruiker is al gemaakt. Log de tekst "Welkom " gevolgd door de naam van de gebruiker naar de console.

Jouw code:

const gebruiker = {
    naam: "Bob",
    rol: "admin"
};
// Schrijf hier je code

Keys Toevoegen en Verwijderen

Je kunt nieuwe keys toevoegen aan een object door ze een waarde te geven:

const persoon = {
    naam: "Jean Luc",
    functie: "Captain"
};

persoon.leeftijd = 55;
// persoon heeft nu drie keys: naam, functie, en leeftijd

Je kunt keys verwijderen met het delete keyword:

delete persoon.functie;
// persoon heeft nu alleen naam en leeftijd

Oefening 1

Het object huis heeft keys straat en nummer. Voeg een nieuwe key stad toe met waarde "Amsterdam".

Jouw code:

const huis = {
    straat: "Hoofdstraat",
    nummer: 42
};
// Schrijf hier je code

Oefening 2

Het object telefoon heeft keys merk, model, en prijs. Verwijder de key prijs met delete.

Jouw code:

const telefoon = {
    merk: "Samsung",
    model: "Galaxy",
    prijs: 599
};
// Schrijf hier je code

Oefening 3

Het object speler heeft keys naam en score. Voeg de key level toe met waarde 1 en de key levens met waarde 3.

Jouw code:

const speler = {
    naam: "Player1",
    score: 0
};
// Schrijf hier je code

Oefening 4

Het object rekening heeft keys saldo, rekeningnummer, en eigenaar. Verhoog het saldo met 100.

Jouw code:

const rekening = {
    saldo: 500,
    rekeningnummer: "NL123",
    eigenaar: "Jan"
};
// Schrijf hier je code

Functies in een Object

Een value in een object kan ook een functie zijn. Dit is erg handig voor acties die bij een object horen.

const persoon = {
    naam: "Jean Luc",
    leeftijd: 55,
    begroet: function() {
        console.log("Hallo!");
    }
};

persoon.begroet();  // Roept de functie aan: "Hallo!"

Let op: Functies in een object roep je aan met ronde haken (). Eigenschappen zonder haakjes zijn gewone waarden.

Oefening 1

Het object hond heeft een functie blaf. Roep deze functie aan.

Jouw code:

const hond = {
    naam: "Rex",
    blaf: function() {
        console.log("Woef!");
    }
};
// Schrijf hier je code

Oefening 2

Maak een object rekenmachine met een functie optellen die 5 + 3 naar de console logt. Roep de functie aan.

Jouw code:

// Schrijf hier je code

Oefening 3

Het object lamp heeft een key aanstaat met waarde false en een functie schakel die de waarde van aanstaat omkeert. Roep de functie twee keer aan.

Jouw code:

const lamp = {
    aanstaat: false,
    schakel: function() {
        lamp.aanstaat = !lamp.aanstaat;
    }
};
// Schrijf hier je code

Het 'this' Keyword

Binnen een functie in een object kun je this gebruiken om te verwijzen naar het object zelf. Dit is handig wanneer je waarden uit het object wilt gebruiken of aanpassen.

const speler = {
    naam: "Alice",
    score: 0,
    voegPuntToe: function() {
        this.score = this.score + 1;
    }
};

speler.voegPuntToe();
speler.voegPuntToe();
console.log(speler.score);  // 2

In dit voorbeeld verwijst this.score naar speler.score.

Gebruik 'this' in plaats van de objectnaam zelf. Dit maakt je code flexibeler en herbruikbaarder.

Oefening 1

Het object teller heeft een key aantal met waarde 0 en een functie verhoog die this.aantal met 1 verhoogt. Roep de functie 3 keer aan en log daarna teller.aantal.

Jouw code:

const teller = {
    aantal: 0,
    verhoog: function() {
        this.aantal = this.aantal + 1;
    }
};
// Schrijf hier je code

Oefening 2

Maak een object bankrekening met key saldo met waarde 100 en een functie stortGeld die 50 bij this.saldo optelt. Roep de functie aan en log het saldo.

Jouw code:

// Schrijf hier je code

Oefening 3

Het object student heeft keys naam en punten. De functie toonInfo moet een alert tonen met de naam en punten. Gebruik this om de waarden op te halen.

Jouw code:

// Schrijf hier je code

Oefening 4

Het object auto heeft keys snelheid (waarde 0) en functie versnel die de snelheid met 10 verhoogt, en functie rem die de snelheid met 5 verlaagt. Roep versnel 3 keer aan en rem 1 keer. Log de snelheid.

Jouw code:

const auto = {
    snelheid: 0,
    versnel: function() {
        this.snelheid = this.snelheid + 10;
    },
    rem: function() {
        this.snelheid = this.snelheid - 5;
    }
};
// Schrijf hier je code

Door een Object Lopen met for...in

Je kunt door alle keys in een object lopen met een for...in loop. Dit is handig wanneer je alle key-value pairs wilt doorlopen.

const persoon = {
    naam: "Jean Luc",
    functie: "Captain",
    leeftijd: 55
};

for (let key in persoon) {
    console.log(key);              // Toont: "naam", "functie", "leeftijd"
    console.log(persoon[key]);     // Toont de bijbehorende waarden
}

In een for...in loop gebruik je de [key] syntax (vierkante haken) om de waarde op te halen, niet de punt-notatie. Dit komt omdat de key een variabele is.

Oefening 1

Het object product heeft keys naam, prijs, en voorraad. Maak een for...in loop die alle keys naar de console logt.

Jouw code:

const product = {
    naam: "Laptop",
    prijs: 799,
    voorraad: 15
};
// Schrijf hier je code

Oefening 2

Het object scores heeft keys Alice, Bob, en Charlie met getallen als waarden. Maak een for...in loop die alle waarden naar de console logt.

Jouw code:

const scores = {
    Alice: 85,
    Bob: 92,
    Charlie: 78
};
// Schrijf hier je code

Oefening 3

Het object inventaris heeft keys voor verschillende items met hun aantal. Maak een for...in loop die elke key en waarde toont als: "appel: 10".

Jouw code:

const inventaris = {
    appel: 10,
    banaan: 5,
    peer: 8
};
// Schrijf hier je code

Oefening 4

Het object temperaturen heeft keys voor steden met hun temperatuur. Bereken het gemiddelde van alle temperaturen en log dit. Maak een variabele totaal en aantal.

Jouw code:

const temperaturen = {
    Amsterdam: 18,
    Rotterdam: 20,
    Utrecht: 19
};
// Schrijf hier je code

Objects Maken met een Functie

Wanneer je meerdere objecten met dezelfde structuur nodig hebt, is het handig om een functie te maken die een object aanmaakt en retourneert. We noemen dit vaak een makeObject functie.

function makeSpeler(naam, leeftijd, punten) {
    return {
        naam: naam,
        leeftijd: leeftijd,
        punten: punten
    };
}

let speler1 = makeSpeler("Pascal", 30, 0);
let speler2 = makeSpeler("Mark", 36, 0);

console.log(speler1.naam);  // "Pascal"
console.log(speler2.naam);  // "Mark"

Deze aanpak maakt het makkelijk om veel objecten te maken zonder steeds dezelfde code te herhalen.

Oefening 1

Maak een functie makeAuto die parameters merk en kleur heeft en een object met die keys retourneert. Maak twee auto's: auto1 met merk "Toyota" en kleur "rood", en auto2 met merk "BMW" en kleur "blauw". Log auto1.merk.

Jouw code:

// Schrijf hier je code

Oefening 2

Maak een functie makeBoek die parameters titel, auteur, en jaar heeft. Maak een boek met titel "1984", auteur "George Orwell", jaar 1949. Log boek.titel.

Jouw code:

// Schrijf hier je code

Oefening 3

Maak een functie makeProduct die parameters naam, prijs, en voorraad heeft. Maak drie producten en sla ze op in een array producten. Log de naam van het tweede product.

Jouw code:

// Schrijf hier je code

Oefening 4

Maak een functie makeSpeler die naam en score heeft. Maak een array met drie spelers. Loop door de array en log de naam van elke speler.

Jouw code:

// Schrijf hier je code

Oefening 5

Maak een functie makeRectangle die breedte en hoogte parameters heeft. Het object moet ook een functie berekenOppervlakte bevatten die de oppervlakte retourneert (breedte * hoogte). Maak een rectangle en log de oppervlakte.

Jouw code:

// Schrijf hier je code

Samenvatting

In dit hoofdstuk heb je geleerd:

Objects maken met key-value pairs
Waarden ophalen met de punt-notatie (object.key)
Keys toevoegen en verwijderen met delete
Functies in objects gebruiken
Het this keyword gebruiken om naar het object zelf te verwijzen
Door een object lopen met een for...in loop
Objects maken met een makeObject functie

Objects zijn erg krachtig wanneer je gestructureerde data wilt opslaan en manipuleren!