Object destructuring

Traditioneel kunnen eigenschappen uit een object geselecteerd worden met de dot- of bracket-notatie. Een value kan vervolgens toegekend worden als waarde aan een variabele.

const person = { name: "Alice", age: 25, city: "New York" };

// Without destructuring
const name = person.name;
const age = person.age;
const city = person.city;

console.log(name); // Output: 'Alice'
console.log(age); // Output: 25
console.log(city); // Output: 'New York'

• Syntax
• Items negeren
• Missing data
• Standaard waarde
• Variabele naam wijzigen
• Combinatie: Nieuwe naam en standaard waarde
• Spread operator en destructuring
• Geavanceerde toepassingen
  • for...of
  • Object als parameter van een functie

Syntax

Met object destructuring kun je waarden uit een object halen en deze toewijzen aan variabelen op basis van hun keys. In tegenstelling tot Array destructuring, is de volgorde niet belangrijk.

// Destructuring assignment
const person = { name: "Alice", age: 25, city: "New York" };

// Destructuring assignment
const { name, age, city } = person;

console.log(name); // Output: 'Alice'
console.log(age); // Output: 25
console.log(city); // Output: 'New York'

Destructuring werkt enkel bij iterable data. Niet itereerbare datatypen geven na destructuring steeds de waarde undefined.

// Destructuring non objects, arrays or iterables => always undefined
const { gameOver } = true;
console.log(gameOver); // Output: undefined

Items negeren

In object destructuring in JavaScript kun je bepaalde eigenschappen (keys) negeren als je ze niet nodig hebt. Dit kan worden bereikt door de eigenschappen over te slaan en alleen de gewenste eigenschappen te destructuren.

const person = { name: "Alice", age: 25, city: "New York" };

// Destructuring assignment met het negeren van de "city" eigenschap
const { city, name } = person;

console.log(name); // Output: 'Alice'
console.log(city); // Output: 'New York'
// console.log(age);  // Deze regel zou een fout veroorzaken omdat "age" niet is gedeclareerd

Missing data

Proberen we een niet-bestaande property te destructuren uit een object dan zal deze waarde gelijk zijn aan undefined.

const person = { name: "Alice", age: 25 };

// Destructuring assignment with missing property
const { name, age, city } = person;

console.log(name); // Output: 'Alice'
console.log(age); // Output: 25
console.log(city); // Output: undefined (property "city" is missing in "person")

Standaard waarde

Een standaard waarde aan de message variabele kan ook toegekend worden.

// Default values
const { message = "Something went wrong" } = {};
console.log(message);

const person = { name: "Alice", age: 25 };

// Destructuring assignment met standaardwaarden
const { name, age, city = "Unknown" } = person;

console.log(name); // Output: 'Alice'
console.log(age); // Output: 25
console.log(city); // Output: 'Unknown' (standaardwaarde omdat person.city niet bestaat)

Variabele naam wijzigen

In object destructuring kun je ook nieuwe namen toewijzen aan variabelen terwijl je ze uit het object haalt. Dit wordt gedaan met behulp van de syntax oudeNaam: nieuweNaam.

const person = { name: "Alice", age: 25, city: "New York" };

// Destructuring assignment met nieuwe namen
const { name: fullName, age: personAge, city: residence } = person;

console.log(fullName); // Output: 'Alice'
console.log(personAge); // Output: 25
console.log(residence); // Output: 'New York'

In dit voorbeeld worden de variabelen fullName, personAge, en residence gemaakt en toegewezen aan de waarden van de overeenkomstige eigenschappen in het person-object.

De namen van de variabelen hoeven niet overeen te komen met de keys in het object; je kunt nieuwe namen gebruiken zoals gewenst.

Combinatie: Nieuwe naam en standaard waarde

Een standaard waarde kan ook gecombineerd worden met toekenning aan een nieuwe variabele msg.

// Default values in combination with alternative name
const { message: msg = "Something went wrong" } = {};
console.log(msg);

Spread operator en destructuring

De spread operator (...) en object destructuring kunnen samen worden gebruikt om bepaalde eigenschappen van een object te extraheren en de overige eigenschappen in een apart object te verzamelen.

const person = { name: "Alice", age: 25, city: "New York", country: "USA" };

// Object destructuring met spread operator
const { name, age, ...address } = person;

console.log(name); // Output: 'Alice'
console.log(age); // Output: 25
console.log(address); // Output: { city: 'New York', country: 'USA' }

Geavanceerde toepassingen

for…of

We kunnen ook destructuring gebruiken in een for...of statement waarin we de eigenschappen van een object aanspreken.

const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 22 },
];

// Object destructuring in for...of loop
for (const { name, age } of people) {
  console.log(`${name} is ${age} years old`);
}

// Destructuring in for...of
const people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith",
    },
    age: 35,
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones",
    },
    age: 25,
  },
];

// prettier-ignore
for (const {  name: n,  family: { father: f },
} of people) {
  console.log("Name: " + n + ", Father: " + f);
}

Object als parameter van een functie

Het gebruik van objecten als parameters in een functie is een gegeerde best practice wanneer we optionele parameters wensen te creëren m.b.v. welbepaalde namen waarbij de positie van deze parameters onbelangrijk zijn.

// Functie met object destructuring in de parameters
function printPerson({ name, age, city }) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

// Object als argument doorgeven
const alice = { name: "Alice", age: 25, city: "New York" };

// Functie aanroep met destructuring in de parameters
printPerson(alice);

Standaard waarden kunnen ook toegekend worden aan eigenschappen binnen een object dat fungeert als parameter binnen een functie. Op deze manier creëren we optionele parameters.

function drawChart({
  size = "big",
  coords = { x: 0, y: 0 },
  radius = 25,
} = {}) {
  console.log(size, coords, radius);
}

drawChart({
  coords: { x: 18, y: 30 },
  radius: 30,
});