Objecten in Javascript

Wat is een Object

Een object in JavaScript lijkt op een Array maar kan net iets meer informatie opslaan. Daar waar een array bestaat uit waarden die je kan oproepen met een index-getal, werkt een object met meerdere waarden en is de sleutel geen getal maar een woord.

const myObject = {
    name : 'Jean Luc',
    occupation : 'Captain',
};

Bovenstaand zie je een object. Het object heeft twee keys (sleutels) en elke key heeft een value (waarde). We noemen dit een key-value pair.
In bovenstaande code zijn name en occupation de keys en de values zijn Jean Luc en Captain

Om informatie op te halen gebruik je de naam van de variabele myObject en met een punt plak je de key aan de variabele vast: myObject.name. Dit zal de waarde Jean Luc geven. Zie onderstaand voorbeeld:

alert(myObject.name); //Jean Luc
alert(myObject.occupation); //Captain

Toevoegen van een sleutel met waarde

Je kan makkelijk iets toevoegen aan een object. Onderstaande code voegt de sleutel color toe aan het object met de waarde red.

myObject.colour = 'red';

//{  name : 'Jean Luc', occupation : 'Captain', colour: 'red', }; //Dit is nu het object

Weghalen van een sleutel

Je kan de gemaakte sleutel ook weer weghalen met het delete functie.

delete myObject.colour;

//{  name : 'Jean Luc', occupation : 'Captain'}; //Dit is nu het object

Functies in een object

De value van een key in een object kan ook een functie zijn, bijvoorbeeld om een alert te tonen met informatie uit het object, of om punten toe te kennen aan het object.

const myObject = {
    name : 'Jean Luc',
    occupation : 'Captain',
    showAge : function() { alert(55); },
};

myObject.showAge();

LET OP: Een function in een object heeft aan het einde ronde-haken ().

Object en het 'this' kenmerk

Soms heb je iets van het object nodig in een functie in het object. Bijvoorbeeld bij een speler die punten heeft en je wilt de punten van de speler tonen of er iets mee berekenen. Je kan de variabele van het object niet in het object zelf gebruiken. Hiervoor bestaat het concept van this. Zie het woordje this alsof je de variabele naam van het object gebruikt maar dan this in plaats van de variabele naam.

const myObject = {
    name : 'Jean Luc',
    occupation : 'Captain',
    age: 55,
    userPoints : 0,
    showAge : function() { alert(this.age); },
    givePoint : function() { this.userPoints = this.userPoints + 1; },
};

myObject.showAge(); //Toon de naam van de user, maar gebruikt nu this.

myObject.givePoint(); //Punten stijgt met 1 (dus wordt 1 in plaats van 0);

myObject.givePoint(); //Punten stijgt met 1 (dus wordt 2 in plaats van 1);
myObject.givePoint(); //Punten stijgt met 1 (dus wordt 3 in plaats van 2);
myObject.givePoint(); //Punten stijgt met 1 (dus wordt 4 in plaats van 3);

alert(myObject.userPoints);
//Is 4 - let op dit is een sleutel, geen functie. Geen ();