Destructuring¶

Deconstrueren in een functie-header¶

Vroeger¶

Bij het printen van properties van een object is het vaak nodig om steeds de naam van het object erbij te geven. Voor het object:

let invader = {
    name: "Zim",
    heath:80,
    state:"angry"
}

kan een shoot() functie er zo uitzien:

function shoot(alien){
    return `The alien \"${alien.name}\" was hit and now has ${alien.health} health left. The alien is now ${alien.state}`;
}

Deze functie geeft een string terug waarin properties van het alien object worden weergegeven. Deze functie maakt gebruik van template strings.

Nu: destructuring¶

Een snellere manier is om het object al in de functie-header te deconstrueren:

function shoot({name, health, state}){
    return `The alien \"${name}\" was hit and now has ${health} health left. The alien is now ${state}`;
}

Aanroepen¶

Beide varianten zijn aan te roepen met:

let shootString = shoot(invader);
console.log(shootString);

en levert het volgende op in de console:

'The alien "Zim" was hit and now has 80 health left. The alien is now angry'

Deconstrueren van objecten in het algemeen¶

Deconstructuring buiten de functie-header¶

Als het lelijk is om een object te deconstrueren in de functie-header, kan je de properties van het object ook als extra variabelen declareren:

function shoot(alien){
    const {name, health, state} = alien;
    return `The alien \"${name}\" was hit and now has ${health} health left. The alien is now ${state}`;
}

Deconstrueren van this¶

De techniek van het deconstrueren kan ook heel handig zijn om the vermijden dat je het this keyword heel veel moet gebruiken. Neem bijvoorbeeld de class Alien:

class Alien {
    constructor(){
        this.name = "Zim";
        this.state = "angry";
        this.health=80;
    }    
}

De shoot functie is nu een methode van de class Alien:

shoot(){
    const {name, state, health} = this;
    return `The alien ${name} was hit and now has ${health} health left. The alien is almost ${state}`;
}

Door de regel:

 const {name, state, health} = this;

verwijzen de variabelen name, health en state nu respectievelijk naar this.name, this.health en this.state.

Dit kan een hele hoop typen van this. schelen.

Bron¶

• JavaScript Pro Tips - Code This, NOT That