Leer Objecten Destructureren voor Schonere Code | Geavanceerde Technieken voor Objectmanipulatie

Objectdestructurering is een functie waarmee specifieke eigenschappen uit een object kunnen worden gehaald en toegewezen aan variabelen. Dit resulteert in beknoptere en beter leesbare code, vooral bij het werken met objecten die meerdere eigenschappen bevatten.

Objectdestructurering begrijpen

Objectdestructurering is een methode om waarden uit objecten te halen en toe te wijzen aan afzonderlijke variabelen. Destructurering gebruikt een syntaxis die lijkt op objectliteralen, maar dan aan de linkerzijde van een toewijzing.

Hier is de basis syntaxis voor objectdestructurering:

const { property1, property2, ...} = sourceObject;

property1, property2: variabelen die de waarden uit het object bevatten;
sourceObject: het object waaruit eigenschappen worden gehaald;
Volgorde is niet van belang: eigenschappen worden op naam gekoppeld.

Objectdestructurering in de praktijk


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Nu zijn fullName, nationality en occupation zelfstandige variabelen die hun respectievelijke waarden bevatten.

Standaardwaarden opgeven

Als het object een eigenschap niet bevat, kan een standaardwaarde worden toegekend:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Als birthDate ontbreekt, wordt de standaardwaarde gebruikt.

Variabelen hernoemen

Het is mogelijk om geëxtraheerde variabelen te hernoemen met behulp van de :-syntaxis.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Dit is nuttig wanneer kortere namen de leesbaarheid verbeteren of wanneer naamconflicten moeten worden vermeden.

Geneste objectdestructurering

Het is ook mogelijk om eigenschappen binnen geneste objecten te destructureren.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

Je kunt zowel bovenliggende als diep geneste waarden in één overzichtelijke expressie extraheren.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 7

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you explain how object destructuring works with arrays?

What happens if a property is missing and no default value is provided?

Can you show more examples of nested destructuring?

Veeg om het menu te tonen

Objectdestructurering begrijpen

Hier is de basis syntaxis voor objectdestructurering:

const { property1, property2, ...} = sourceObject;

property1, property2: variabelen die de waarden uit het object bevatten;
sourceObject: het object waaruit eigenschappen worden gehaald;
Volgorde is niet van belang: eigenschappen worden op naam gekoppeld.

Objectdestructurering in de praktijk


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Nu zijn fullName, nationality en occupation zelfstandige variabelen die hun respectievelijke waarden bevatten.

Standaardwaarden opgeven

Als het object een eigenschap niet bevat, kan een standaardwaarde worden toegekend:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Als birthDate ontbreekt, wordt de standaardwaarde gebruikt.

Variabelen hernoemen

Het is mogelijk om geëxtraheerde variabelen te hernoemen met behulp van de :-syntaxis.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Dit is nuttig wanneer kortere namen de leesbaarheid verbeteren of wanneer naamconflicten moeten worden vermeden.

Geneste objectdestructurering

Het is ook mogelijk om eigenschappen binnen geneste objecten te destructureren.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

Je kunt zowel bovenliggende als diep geneste waarden in één overzichtelijke expressie extraheren.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 7

Objecten Destructureren voor Schonere Code

Objectdestructurering begrijpen

Objectdestructurering in de praktijk

Standaardwaarden opgeven

Variabelen hernoemen

Geneste objectdestructurering

1. Wat doet de volgende code?

2. Hoe kunnen we standaardwaarden toewijzen aan variabelen bij objectdestructurering?

3. Hoe kunnen we variabelen hernoemen tijdens toewijzing bij objectdestructurering?

Objecten Destructureren voor Schonere Code

Objectdestructurering begrijpen

Objectdestructurering in de praktijk

Standaardwaarden opgeven

Variabelen hernoemen

Geneste objectdestructurering

1. Wat doet de volgende code?

2. Hoe kunnen we standaardwaarden toewijzen aan variabelen bij objectdestructurering?

3. Hoe kunnen we variabelen hernoemen tijdens toewijzing bij objectdestructurering?