JavaScript Destructuring

Syntaxis van destructuring assign

De syntaxis van destructuring assigneert objecteigenschappen naar variabelen:

let {firstName, lastName} = person;

Het kan ook arrays en andere iterable objecten ontpakken:

let [firstName, lastName] = person;

Objectdestructuring

Voorbeeld

// Een object maken
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Deconstructie
let {firstName, lastName} = person;

Probeer het zelf

Volgorde van eigenschappen doet er niet toe:

Voorbeeld

// Een object maken
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Deconstructie
let {lastName, firstName} = person;

Probeer het zelf

Objectstandaardwaarden

Voor mogelijk ontbrekende eigenschappen kunnen we standaardwaarden instellen:

Voorbeeld

// Een object maken
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Deconstructie
let {firstName, lastName, country = "US"} = person;

Probeer het zelf

Objecteigenschapsaanduiding

Voorbeeld

// Een object maken
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Deconstructie
let {lastName: name} = person;

Probeer het zelf

Stringdestructuring

Een gebruik van destructuring is het ontpakken van stringkarakters.

Voorbeeld

// Een string maken
let name = "W3Schools";
// Deconstructie
let [a1, a2, a3, a4, a5] = name;

Probeer het zelf

Arraydestructuring

We kunnen arrayvariabelen extraheren naar hun eigen variabelen:

Voorbeeld

// Een array maken
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Deconstructie
let [fruit1, fruit2] = fruits;

Probeer het zelf

Over slaan van arraywaarden

We kunnen twee of meer komma's gebruiken om arraywaarden over te slaan:

Voorbeeld

// Een array maken
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Deconstructie
let [fruit1,,,fruit2] = fruits;

Probeer het zelf

Arraypositiewaarde

We kunnen waarden ophalen van specifieke indexposities in een array:

Voorbeeld

// Een array maken
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Deconstructie
let {[0]: fruit1, [1]: fruit2} = fruits;

Probeer het zelf

Overblijvende eigenschappen

Men kan overblijvende eigenschappen gebruiken aan het einde van de destructuurgrammatica.

Deze syntaxis slaat alle overblijvende waarden op in een nieuwe array:

Voorbeeld

// Een array maken
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Deconstructie
const [a, b, ...rest] = numbers;

Probeer het zelf

Deconstruct Map

Voorbeeld

// Een Map maken
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  
]
// Deconstructie
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

Probeer het zelf

Wissel JavaScript-variabelen

Je kunt de waarden van twee variabelen met de deconstructie toewijzen:

Voorbeeld

let firstName = "Bill";
let lastName = "Gates";
// Deconstructie
[firstName, lastName] = [lastName, firstName];

Probeer het zelf