Array Destructuring

Traditioneel kunnen elementen uit een array geselecteerd worden op basis van hun index startend met 0 tot de arr.length - 1. Een element kan vervolgens toegekend worden als waarde aan een variabele.

const arr = ["first", "second", "third"];

// Without destructuring
const f = arr[0];
const s = arr[1];
const t = arr[2];

Syntax

Met array destructuring kun je waarden uit een array halen en deze toewijzen aan variabelen op basis van hun positie in de array.

const arr = ["first", "second", "third"];

// With destructuring
const [firstItem, secondItem, thirdItem] = arr;
console.log(firstItem, secondItem, thirdItem);

De variabele firstItem komt overeen met het eerste element, de variabele thirdItem met het laatste element. In de variabele firstItem zit dus de waarde first.

const colors = ["red", "green", "blue"];

// Destructuring assignment
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor); // Output: 'red'
console.log(secondColor); // Output: 'green'
console.log(thirdColor); // Output: 'blue'

De toekenning (Eng. assignment) kan ook apart gebeuren van de declaratie. We moeten dan wel let gebruiken i.p.v. const.

let df, ds, dt;
[df, ds, dt] = arr;

Items negeren

Bepaalde elementen uit de array kunnen we ook negeren (Eng. ignore). Dit doen we door de corresponderende variabele niet te vermelden. Dit kunnen we doen door geen waardes mee te geven, maar toch de komma’s te noteren.

// Skip elements
const [, , thirdItem] = ["foo", "bar", "baz"];
console.log(thirdItem);

In het voorbeeld wordt enkel het laatste element toegekend aan de variabele thirdItem.

Missing data

Zijn er geen elementen aanwezig in de array die we wensen toe te kennen aan corresponderende variabelen, dan bevat in dit voorbeelde de variabele missing de waarde undefined.

// Destructuring missing data
const [missing] = [];
console.log(missing);

const colors = ["red", "green"];

// Destructuring assignment met standaardwaarden
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor); // Output: 'red'
console.log(secondColor); // Output: 'green'
console.log(thirdColor); // Output: 'undefined' (omdat colors[2] niet bestaat)

Standaard waarde

Je kan standaardwaarden toewijzen aan variabelen voor het geval de waarde in de array op die specifieke positie undefined is.

const colors = ["red", "green"];

// Destructuring assignment met standaardwaarden
const [firstColor, secondColor, thirdColor = "blue"] = colors;

console.log(firstColor); // Output: 'red'
console.log(secondColor); // Output: 'green'
console.log(thirdColor); // Output: 'blue' (standaardwaarde omdat colors[2] niet bestaat)

In destructuring kunnen we ook bij een variabele de waarde van een andere variabele daaraan toekennen.

// Reference to eachother
const [d = 3, e = d] = [7, undefined];
console.log(d, e);

In bovenstaand voorbeeld bevat de variabele d de standaard (Eng. default) waarde 3. Deze waarde wordt echter overschreven door de waarde van het eerste element uit de array, in dit geval 7. Vermits we de waarde van de variabele d toekennen aan de variabele e, dan zal deze laatste variabele de waarde 7 bevatten.

Spread operator en destructuring

Met behulp van de rest operator (...) kunnen we het resterend deel van een array toekennen aan een variabele. In dit voorbeeld bevat de variabele de waarde 1, de tail variabele bevat de waarde [2, 3, 4].

// Rest parameter
const [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail);

Omdat een string iterable is (Eng. iterable) kunnen we ook hierin destructuring gebruiken. In dit voorbeeld bevat de variabele x de waarde a, de variabele y de waarde [b, c].

// Strings are iterable
const [x, ...y] = "abc";
console.log(x, y);

Geavanceerde toepassingen

.entries()

We kunnen ook destructuring gebruiken in een for...of statement. Met behulp van de entries() (opens new window) functie uit een array object, kunnen we een array iterator genereren. Zon’n iterator bevat als eerste element de huidige index en als tweede element de waarde van dit element.

// Destructuring in for...of
const arrLetters = ["a", "b"];
for (const [index, element] of arrLetters.entries()) {
  console.log(index, element);
}

.exec()

De exec() functie van RegExp object geeft een array terug geconstrueerd op basis van de reguliere expressie.

const [all, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2999-12-31");
console.log(year, month, day);