Leer Objecten Destructureren voor Schonere Code | Geavanceerde Technieken voor Objectmanipulatie

Objectdestructurering is een functie waarmee specifieke eigenschappen uit een object kunnen worden gehaald en aan variabelen kunnen worden toegewezen. 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 volgt de basis syntaxis voor objectdestructurering:

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

property1, property2, enzovoort: Dit zijn de variabelen waarin de waarden van de overeenkomstige eigenschappen uit sourceObject worden geplaatst. Eigenschappen uit het object worden gedestructureerd op basis van de eigenschapsnaam, niet op volgorde. De volgorde is volledig irrelevant;
sourceObject: Het object waaruit de eigenschappen worden gehaald.

Objectdestructurering in de praktijk

Beschouw een voorbeeld waarbij een object de informatie van een persoon weergeeft:


              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 kunnen fullName, nationality en occupation als afzonderlijke variabelen worden gebruikt met de bijbehorende waarden uit het person-object.

Standaardwaarden opgeven

Het is ook mogelijk om standaardwaarden toe te wijzen aan variabelen voor het geval de eigenschap niet aanwezig is in het bronobject:


              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

In dit voorbeeld krijgt de variabele birthDate de waarde "March 9, 1454" toegewezen als het person-object geen birthDate-eigenschap met een waarde bevat.

Variabelen hernoemen

Met behulp van de :-syntaxis kunnen we de waarden van eigenschappen toewijzen aan variabelen met andere namen. Bijvoorbeeld:


              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

Nu kunnen we de variabelen min en max gebruiken in plaats van minTemperature en maxTemperature.

Geneste objectdestructurering

Destructurering kan ook worden toegepast op geneste objecten. Als het object bijvoorbeeld objecten als eigenschappen bevat, kunnen we de geneste eigenschappen 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

In dit voorbeeld kunnen zowel de eigenschappen op het hoogste niveau, zoals name en profession, als de geneste eigenschappen, zoals degree, university en graduationYear, worden benaderd met destructurering.

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.

Awesome!

Completion rate improved to 2.27

Veeg om het menu te tonen

Objectdestructurering begrijpen

Hier volgt de basis syntaxis voor objectdestructurering:

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

property1, property2, enzovoort: Dit zijn de variabelen waarin de waarden van de overeenkomstige eigenschappen uit sourceObject worden geplaatst. Eigenschappen uit het object worden gedestructureerd op basis van de eigenschapsnaam, niet op volgorde. De volgorde is volledig irrelevant;
sourceObject: Het object waaruit de eigenschappen worden gehaald.

Objectdestructurering in de praktijk

Beschouw een voorbeeld waarbij een object de informatie van een persoon weergeeft:


              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 kunnen fullName, nationality en occupation als afzonderlijke variabelen worden gebruikt met de bijbehorende waarden uit het person-object.

Standaardwaarden opgeven

Het is ook mogelijk om standaardwaarden toe te wijzen aan variabelen voor het geval de eigenschap niet aanwezig is in het bronobject:


              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

In dit voorbeeld krijgt de variabele birthDate de waarde "March 9, 1454" toegewezen als het person-object geen birthDate-eigenschap met een waarde bevat.

Variabelen hernoemen

Met behulp van de :-syntaxis kunnen we de waarden van eigenschappen toewijzen aan variabelen met andere namen. Bijvoorbeeld:


              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

Nu kunnen we de variabelen min en max gebruiken in plaats van minTemperature en maxTemperature.

Geneste objectdestructurering

Destructurering kan ook worden toegepast op geneste objecten. Als het object bijvoorbeeld objecten als eigenschappen bevat, kunnen we de geneste eigenschappen 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

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 opgeven voor variabelen bij objectdestructurering?

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

Awesome!

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 opgeven voor variabelen bij objectdestructurering?

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