Spreading

De spread operator ... is een syntactische functie in JavaScript die wordt gebruikt om elementen van een iterable (zoals een array of een string) uit te spreiden of te verspreiden naar een andere iterable.

We kunnen de spread-operator gebruiken:

• in array literals waar 0 tot meer elementen veracht worden.
• in functies waar 0 tot meer argumenten verwacht worden.
• in object expressies of literals waar 0 tot meer key-value pairs verwacht worden.

Strings

Voor strings werkt de spread operator als een snelle manier om de individuele tekens uit te spreiden.

const str = "hello";
const chars = [...str];

console.log(chars); // Output: ['h', 'e', 'l', 'l', 'o']

Arrays

Kopiëren van Arrays

Je kunt de spread operator gebruiken om een kopie te maken van een array.

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
err
console.log(copiedArray); // Output: [1, 2, 3]

Dit kan handig zijn omdat een array een referentie-datatype is. Wanneer je bij een referentie-datatype de waarden van de originele array of referentie aanpast, zal je ook de kopie aanpassen. Om dit te voorkomen kan het nuttig zijn om een kopie te maken van de array.

Samenvoegen van Array

De spread operator maakt het eenvoudig om arrays samen te voegen.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];

console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

De spread operator kan ook worden gebruikt om nieuwe elementen aan het een array toe te voegen.

const newArray = [0, ...originalArray, 4, ...otherArray];

console.log(newArray); // Output: [0, 1, 2, 3, 4]

Functieargumenten

Je kunt de spread operator gebruiken om array-elementen uit te spreiden als argumenten voor een functie.

const numbers = [1, 2, 3];
const sum = (a, b, c) => a + b + c;

const result = sum(...numbers);
console.log(result); // Output: 6

De ingebouwde function Math.max is een goed voorbeeld om aan te tonen hoe een spread operator werkt bij het aanroepen van een functie. De Math.max(x1, x2, ...) geeft de waarde van het argument terug met de hoogste waarde. Deze functie verwacht 1 tot meer argumenten, maar geen itereerbare datatypen. Met de spread operator kunnen we bijvoorbeeld de elementen uit een array spreiden in deze functie als argumenten:

let maxValue = Math.max(-1, 6, -15, 12);
console.log(maxValue);
maxValue = Math.max(...[-1, 6, -15, 12]);
console.log(maxValue);

In het volgende voorbeeld definieren we een array met drie elementen (jaar, maand en dag van de maand). Deze array spreiden we als argumenten via de spread operator in de constructor van de Date klasse.

const dateFields = [1970, 0, 1];
const date = new Date(...dateFields);
console.log(date);

function getAllArguments(...args) {
  console.log(args);
}

getAllArguments(1, 2, 3);
getAllArguments("Test");
getAllArguments("Er", "kunnen", "onverwacht", "veel", "argumenten", "zijn");

Objecten

In een object literal kunnen key-value pairs verspreid worden als key-value pairs in een nieuwe object literal. Deze techniek wordt vaak toegepast om objecten te clonen (een kopie maken) of te laten samensmelten in een nieuw object. Deze techniek wordt vaak toegepast in het React (opens new window)-framework.

const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };

const clonedObj = { ...obj1 };
console.log(clonedObj);

Samenvoegen van objecten

const object1 = { key1: "value1" };
const object2 = { key2: "value2" };
const mergedObject = { ...object1, ...object2 };

console.log(mergedObject); // Output: { key1: 'value1', key2: 'value2' }

const defaultSettings = { theme: "light", fontSize: 14 };
const userSettings = { fontSize: 16 };

const mergedSettings = { ...defaultSettings, ...userSettings };

console.log(mergedSettings);
// Output: { theme: 'light', fontSize: 16 }

Toevoegen of overschrijven van keys

Je kunt de spread operator gebruiken om nieuwe eigenschappen toe te voegen of bestaande eigenschappen in een object te overschrijven.

const originalObject = { key1: "value1", key2: "value2" };
const updatedObject = { ...originalObject, key2: "newvalue2", key3: "value3" };

console.log(updatedObject);
// Output: { key1: 'value1', key2: 'newvalue2', key3: 'value3' }