Waarom zijn objects zo belangrijk?

In JavaScript is bijna alles een object. Als je objects begrijpt, begrijp je een groot deel van de taal.

Wat is een object?

In het echte leven kun je een auto zien als een object.

Een auto heeft eigenschappen (properties):

  • kleur
  • gewicht
  • model
  • merk

En functionaliteiten (methods):

  • starten
  • rijden
  • remmen
  • stoppen
Elke auto heeft dezelfde soort properties en methods, maar met andere waardes. 
Auto 1: Fiat 500, rood, 850kg     → start(), drive(), brake(), stop()
Auto 2: BMW X7, zwart, 1350kg     → start(), drive(), brake(), stop()
Auto 3: Volvo S60, grijs, 1200kg  → start(), drive(), brake(), stop()
Een object heeft dus:
  • properties (eigenschappen) – info over het object
  • methods (functies) – wat het object kan doen

Object maken

Een leeg object maak je met accolades:

const car = {};

Auto voorbeeld uitgewerkt:

const car = {
  // Properties
  name: 'Fiat',
  model: '500',
  weight: '850kg',
  color: 'white',
  
  // Methods
  start() {
    return 'I start the car';
  },
  drive() {
    return "I'm driving";
  },
  brake() {
    return 'I brake';
  },
  stop() {
    return 'I stop';
  }
};

Zonder en met object

Zonder object:

let car_name = "Fiat";
let model = "500";
let weight = "850kg";
let color = "white";

function drive() {
  return "I'm driving";
}

Met object (alles bij elkaar):

const car = {
  name: "Fiat",
  model: "500",
  weight: "850kg",
  color: "white",
  drive() {
    return "I'm driving";
  }
};
Voordelen:
  • alles wat bij elkaar hoort staat bij elkaar
  • overzichtelijker en logischer
  • makkelijk hergebruiken

Properties ophalen

Meest gebruikte manier: dot notatie.

console.log(car.name);   // "Fiat"
console.log(car.model);  // "500"
console.log(car.weight); // "850kg"
console.log(car.color);  // "white"

Bracket notation

Alternatief met vierkante haken:

console.log(car['name']);  // "Fiat"
console.log(car['model']); // "500"

const prop = 'name';
console.log(car[prop]);    // "Fiat"
  • dot notatie: car.name – standaard, kort en leesbaar
  • bracket notatie: car['name'] – handig bij variabele property naam

Methods uitvoeren

Een method is een functie binnen een object. Om die uit te voeren heb je haakjes nodig.

console.log(car.drive()); // "I'm driving"
console.log(car.start()); // "I start the car"
Let op het verschil: 
console.log(car.drive);   // toont de functie zelf
console.log(car.drive()); // voert de functie uit

Object data tonen in de pagina

HTML:

<div class="output"></div>

JavaScript:

const output = document.querySelector('.output');

output.innerHTML = `
  <h1>Naam van de auto is: ${car.name}</h1>
  <p>Model: ${car.model}</p>
  <p>Kleur: ${car.color}</p>
  <p>${car.drive()}</p>
`;
innerHTML laat je HTML en variabelen combineren met template literals (backticks).

Arrays in objects

Een property kan ook een array zijn.

const car = {
  name: 'Fiat',
  model: '500',
  weight: '850kg',
  color: 'white',
  repairs: ['koppeling', 'banden', 'distributieriem'],
  start() {
    return 'I start the car';
  },
  drive() {
    return "I'm driving";
  }
};

Elementen uit de array

console.log(car.repairs[0]); // "koppeling"
console.log(car.repairs[1]); // "banden"
console.log(car.repairs[2]); // "distributieriem"

const laatste = car.repairs[car.repairs.length - 1];
console.log(laatste);        // "distributieriem"

Loopen en methods

for (const repair of car.repairs) {
  console.log(repair);
}

// item toevoegen
car.repairs.push('uitlaat');

// checken
console.log(car.repairs.includes('banden')); // true

console.log(car.repairs.length); // aantal reparaties

Properties wijzigen

Waarde aanpassen

car.name = 'Seat';
console.log(car.name); // "Seat"

Nieuwe property toevoegen

car.year = 2020;
console.log(car.year); // 2020

Property verwijderen

delete car.color;
console.log(car.color); // undefined
Voorbeeld met gebruiker: 
const gebruiker = {
  naam: 'Jan',
  email: 'jan@email.com',
  rol: 'gebruiker'
};

gebruiker.rol = 'admin';
gebruiker.lastLogin = new Date();
delete gebruiker.email;

console.log(gebruiker);

this keyword

Binnen een method verwijst this naar het object zelf.

Eenvoudig voorbeeld

const car = {
  name: 'Fiat',
  rename() {
    this.name = 'Lambo';
    return this.name;
  }
};

console.log(car.rename()); // "Lambo"
console.log(car.name);     // "Lambo"

Met parameter

const car = {
  name: 'Fiat',
  rename(newName) {
    this.name = newName;
    return this.name;
  }
};

car.rename('Ferrari');
console.log(car.name); // "Ferrari"

Voorbeeld met state

const car = {
  name: 'Fiat',
  speed: 0,
  
  accelerate(amount) {
    this.speed += amount;
    return `${this.name} rijdt nu ${this.speed} km/h`;
  },
  
  brake(amount) {
    this.speed -= amount;
    if (this.speed < 0) this.speed = 0;
    return `${this.name} rijdt nu ${this.speed} km/h`;
  }
};
Zonder this wijzig je geen property van het object, maar maak je een losse variabele.

Bestaande JavaScript objects

Je gebruikt al vaker objects zonder dat je het doorhebt.

console

console.log('Hello');
  • console = object
  • log() = method

document

document.querySelector('.myClass');
  • document = object
  • querySelector() = method

Math

Math.random();
  • Math = object
  • random() = method die een random getal maakt

Andere voorbeelden

const text = "Hello";
text.toUpperCase(); // string object met method

const numbers = [1, 2, 3];
numbers.push(4);    // array object met method

const now = new Date();
now.getFullYear();  // date object met method

Veelgemaakte fouten

1. Haakjes vergeten bij methods

// fout
car.drive;

// goed
car.drive();

2. this vergeten

// fout
const car = {
  name: 'Fiat',
  rename(newName) {
    name = newName;
  }
};

// goed
const car2 = {
  name: 'Fiat',
  rename(newName) {
    this.name = newName;
  }
};

3. Komma's vergeten

// fout
const car = {
  name: 'Fiat'
  model: '500'
};

// goed
const carGood = {
  name: 'Fiat',
  model: '500'
};
Objects vormen de basis van veel JavaScript code. Hoe beter je dit snapt, hoe makkelijker de rest wordt.