Waarvoor worden de spread- en rest-operatoren in JavaScript gebruikt?

De spread (...) operator wordt gebruikt om iterabele objecten (zoals arrays of strings) uit te breiden op plaatsen waar nul of meer argumenten (bij het aanroepen van functies) of elementen (bij het maken van arrays) worden verwacht. Het wordt ook gebruikt om eigenschappen van objecten samen te voegen tot een nieuw object.

// Gebruik van spread bij het aanroepen van een functie
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// Gebruik van spread om arrays samen te voegen
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]

// Gebruik van spread om objecten samen te voegen
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

De rest (...) operator wordt gebruikt in de syntax van functiedeclaraties om alle resterende argumenten te verzamelen in een array. Dit stelt de functie in staat om een onbepaalde hoeveelheid argumenten te ontvangen. Het wordt ook gebruikt bij destructurering van arrays of objecten om de resterende elementen of eigenschappen te verzamelen.

// Gebruik van rest in functiedeclaraties
function sum(...args) {
  // args is nu een array [1, 2, 3]
  return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6

// Gebruik van rest bij destructurering van arrays
const [first, second, ...restOfArray] = [1, 2, 3, 4, 5];
// first = 1, second = 2, restOfArray = [3, 4, 5]

// Gebruik van rest bij destructurering van objecten
const { a, b, ...restOfObject } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, restOfObject = { c: 3, d: 4 }

Het belangrijkste verschil:

• spread "breidt uit" door elementen of eigenschappen te "expanderen".
• rest "verzamelt" elementen of eigenschappen in een array/object.