Destructuring & Spread

Introductie

Destructuring en de spread-operator zijn moderne JavaScript features die code korter en duidelijker maken.

Wat leer je hier?

Destructuring: waarden uit arrays en objects halen
Spread operator (...): arrays en objects kopiëren of samenvoegen

Deze features komen vaak terug in moderne JavaScript en in React.

Array Destructuring

Array destructuring is een manier om waarden uit een array te halen in één regel.

Oude manier

const kleuren = ['rood', 'groen', 'blauw'];

const kleur1 = kleuren[0];
const kleur2 = kleuren[1];
const kleur3 = kleuren[2];

console.log(kleur1);
console.log(kleur2);
console.log(kleur3);

Nieuwe manier (destructuring)

const kleuren = ['rood', 'groen', 'blauw'];

const [kleur1, kleur2, kleur3] = kleuren;

console.log(kleur1);
console.log(kleur2);
console.log(kleur3);

In plaats van meerdere regels met indexen gebruik je één regel met haakjes.

Niet alle waarden uitpakken

const kleuren = ['rood', 'groen', 'blauw'];

const [eerste, tweede] = kleuren;

console.log(eerste);
console.log(tweede);

Items overslaan

const kleuren = ['rood', 'groen', 'blauw'];

const [eerste, , derde] = kleuren;

console.log(eerste);
console.log(derde);

Praktisch voorbeeld

const coordinates = [52.3702, 4.8952];

const [latitude, longitude] = coordinates;

console.log(`Lat: ${latitude}, Lon: ${longitude}`);

Handig bij functies of API's die een array teruggeven.

Object Destructuring

Object destructuring gebruik je om properties uit een object te halen.

Oude manier

const persoon = {
  naam: 'Jan',
  leeftijd: 25,
  stad: 'Amsterdam'
};

const naam = persoon.naam;
const leeftijd = persoon.leeftijd;
const stad = persoon.stad;

console.log(naam);
console.log(leeftijd);
console.log(stad);

Nieuwe manier (destructuring)

const persoon = {
  naam: 'Jan',
  leeftijd: 25,
  stad: 'Amsterdam'
};

const { naam, leeftijd, stad } = persoon;

console.log(naam);
console.log(leeftijd);
console.log(stad);

Bij objects gebruik je accolades {} in plaats van vierkante haken.

Alleen bepaalde properties

const persoon = {
  naam: 'Jan',
  leeftijd: 25,
  stad: 'Amsterdam'
};

const { naam, leeftijd } = persoon;

console.log(naam);
console.log(leeftijd);

Andere variabelenaam geven

const persoon = {
  naam: 'Jan',
  leeftijd: 25
};

const { naam: voornaam, leeftijd: age } = persoon;

console.log(voornaam);
console.log(age);

Destructuring van een functie-resultaat

const getUser = () => {
  return {
    naam: 'Jan',
    email: 'jan@email.com',
    rol: 'admin'
  };
};

const { naam, email, rol } = getUser();

console.log(naam);
console.log(email);
console.log(rol);

Dit zie je veel bij API responses en bij props in React.

Array met meerdere objecten

Een array kan ook objecten bevatten. Dat zie je vaak bij API responses of lijsten met data. Je combineert dan array- en object-destructuring.

Objecten uit de array halen

const gebruikers = [
  { naam: 'Jan', leeftijd: 25 },
  { naam: 'Sophie', leeftijd: 30 },
  { naam: 'Mo', leeftijd: 22 }
];

// Eerst het object uit de array halen, dan de properties eruit halen
const [eersteGebruiker, tweedeGebruiker] = gebruikers;

console.log(eersteGebruiker.naam);
console.log(tweedeGebruiker.naam);

Direct properties uit objecten in een array halen

const gebruikers = [
  { naam: 'Jan', leeftijd: 25 },
  { naam: 'Sophie', leeftijd: 30 },
  { naam: 'Mo', leeftijd: 22 }
];

// Array-destructuring + object-destructuring in één regel
const [{ naam: naam1 }, { naam: naam2 }] = gebruikers;

console.log(naam1);
console.log(naam2);

Uitleg:

De vierkante haken [] pakken het eerste en tweede object uit de array
De accolades {} pakken vervolgens de property naam uit elk object
Met naam: naam1 geef je de waarde een nieuwe variabelenaam, anders krijg je een conflict omdat naam dubbel bestaat

Combineren met .map() over een array van objecten

const producten = [
  { naam: 'Laptop', prijs: 800 },
  { naam: 'Muis', prijs: 25 },
  { naam: 'Toetsenbord', prijs: 60 }
];

// In de map-callback destructure je elk object direct
const namen = producten.map(({ naam }) => naam);

console.log(namen);

Dit patroon kom je heel vaak tegen in React, bijvoorbeeld bij het renderen van een lijst met items uit een API.

Objecten in een array bijwerken met .map() en spread

Soms wil je niet één property eruit halen, maar juist een nieuwe array maken waarin elk object wordt bijgewerkt. Dan combineer je .map() met de spread-operator.

const taken = [
  { titel: 'Boodschappen doen', prioriteit: 'hoog', voltooid: false },
  { titel: 'Huiswerk maken', prioriteit: 'middel', voltooid: false },
  { titel: 'Plant water geven', prioriteit: 'laag', voltooid: false }
];

// Maak een nieuwe array waarin alle taken voltooid zijn
const afgerond = taken.map(taak => ({ ...taak, voltooid: true }));

console.log(taken);    // origineel blijft ongewijzigd
console.log(afgerond); // nieuwe array met voltooid: true

Uitleg:

.map() loopt door elke taak heen en maakt een nieuwe array
...taak kopieert alle bestaande properties van het object
voltooid: true overschrijft daarna de oude waarde
De accolades om ({ ... }) heen zijn nodig omdat een arrow-functie anders denkt dat { het begin van een functie-body is

Dit patroon — array van objecten met .map() en spread bijwerken — kom je veel tegen in opdrachten en in React state-updates.

Spread operator bij arrays

De spread-operator ... spreidt een array uit in losse waarden.

Arrays kopiëren

const origineel = [1, 2, 3];

// Geen echte kopie, maar een verwijzing:
const kopie1 = origineel;

// Echte kopie met spread:
const kopie2 = [...origineel];

kopie2.push(4);

console.log(origineel); // [1, 2, 3]
console.log(kopie2);    // [1, 2, 3, 4]

Zonder spread verwijs je naar dezelfde array. Met spread maak je een nieuwe array.

Arrays samenvoegen

const fruits = ['appel', 'banaan'];
const vegetables = ['wortel', 'broccoli'];

const combined = [...fruits, ...vegetables];

console.log(combined);

Items toevoegen

const getallen = [2, 3, 4];

const metBegin = [1, ...getallen];
const metEinde = [...getallen, 5];
const metBeide = [1, ...getallen, 5];

console.log(metBegin);
console.log(metEinde);
console.log(metBeide);

Praktisch voorbeeld

const winkelwagen = ['laptop', 'muis'];

const nieuweWinkelwagen = [...winkelwagen, 'toetsenbord'];

console.log(winkelwagen);
console.log(nieuweWinkelwagen);

In React wordt deze manier gebruikt om state-arrays te updaten zonder het origineel te wijzigen.

Spread operator bij objects

De spread-operator werkt ook bij objects.

Objects kopiëren

const origineel = {
  naam: 'Jan',
  leeftijd: 25
};

const kopie = { ...origineel };

kopie.leeftijd = 30;

console.log(origineel);
console.log(kopie);

Objects samenvoegen

const basis = {
  naam: 'Jan',
  leeftijd: 25
};

const extra = {
  stad: 'Amsterdam',
  land: 'Nederland'
};

const compleet = { ...basis, ...extra };

console.log(compleet);

Properties overschrijven

const gebruiker = {
  naam: 'Jan',
  rol: 'gebruiker',
  actief: false
};

const admin = {
  ...gebruiker,
  rol: 'admin',
  actief: true
};

console.log(admin);

Uitleg:

...gebruiker kopieert alle bestaande properties
Daarna overschrijven rol en actief de oude waarden

Nieuwe properties toevoegen

const persoon = {
  naam: 'Jan',
  leeftijd: 25
};

const metEmail = {
  ...persoon,
  email: 'jan@email.com'
};

console.log(persoon);
console.log(metEmail);

Formulierdata bijwerken

const formData = {
  voornaam: 'Jan',
  achternaam: 'Jansen',
  email: 'jan@email.com'
};

const updatedData = {
  ...formData,
  email: 'jan.jansen@email.com'
};

console.log(updatedData);

Object spread wordt veel gebruikt bij state-updates en props in React.

Waarom destructuring en spread gebruiken

Kortere code

Minder regels en beter leesbaar.

Kopieën maken

Je maakt nieuwe arrays en objects in plaats van het origineel te wijzigen.

React standaard

Wordt gebruikt in hooks, props en state-updates.

Moderne syntax

Sluit aan bij hoe in bedrijven en frameworks gewerkt wordt.

Onveranderlijke data

Past goed bij patterns waarbij je data niet direct wijzigt.

Minder fouten

Je voorkomt onbedoelde bijwerkingen op het origineel.

Samenvatting

Feature	Syntax	Beschrijving
Array destructuring	`const [a, b] = array;`	Waarden uit een array halen
Object destructuring	`const { x, y } = object;`	Properties uit een object halen
Spread bij arrays	`[...array]`	Arrays kopiëren of samenvoegen
Spread bij objects	`{ ...object }`	Objects kopiëren of samenvoegen

// API response destructuring
const { data, error } = await fetchUser();

// React hook (komt later)
const [count, setCount] = useState(0);

// Props in React (komt later)
const { naam, leeftijd } = props;

// Array kopiëren en item toevoegen
const nieuweItems = [...items, nieuwItem];

// Object updaten
const updated = { ...user, email: nieuweEmail };