Introduction


L’affectation par décomposition, ou "destructuring" en anglais, est une fonctionnalité JS 2015 (ES6) permettant d’extraire une ou plusieurs propriétés d’un tableau ou d’un objet à l’aide d’une syntaxe concise.


L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction, ce qui facilite la lecture du code. D'autres possibilités sont également offertes grâce à cette fonctionnalité, j’en détaillerai quelques exemples.


Extraire une propriété d’un objet


Imaginons l’objet suivant : 


const user = {
	name: 'Estelle',
	login: 'estellepicq',
	role: 'admin',
	job: 'dev'
};


Dans un environnement pré-JS 2015, pour extraire les propriétés name et login et les affecter à de nouvelles variables, nous écririons ceci : 


var name = user.name;
var login = user.login;
console.log(name); // ‘Estelle’
console.log(login); // ‘estellepicq’


Grâce au destructuring, nous pouvons écrire :


const { name, login } = user;
console.log(name); // ‘Estelle’
console.log(login); // ‘estellepicq’


De cette manière, nous pouvons extraire uniquement les propriétés qui nous intéressent, en une seule ligne de code.


Si la propriété n’existe pas, la propriété demandée sera undefined. Par exemple :

const { name, login, age } = user;
console.log(name); // 'Estelle'
console.log(login); // 'estellepicq'
console.log(age); // undefined


Le fonctionnement est le même pour un tableau : 

const fruits = ['apple', 'banana', 'watermelon', 'papaya'];
const [ firstFruit, secondFruit ] = fruits;
console.log(firstFruit); // 'apple'
console.log(secondFruit); // 'banana'


Renommer une propriété


Reprenons l’exemple précédent, et admettons que nous voulions extraire l’information contenue dans la propriété login, et l’affecter à une nouvelle variable username


const { login: username } = user;
console.log(username); // ‘estellepicq’


De cette façon, nous avons donné un alias à la propriété “login” et créé une nouvelle variable “username” contenant l’information souhaitée.

Donner une valeur par défaut

Nous avons vu que si la propriété était absente de l’objet, la variable créée était “undefined”. Nous pouvons si besoin affecter une valeur par défaut à la variable :


const { age = 20 } = user;
console.log(age); // 20


Conclusion


Le destructuring est une fonctionnalité puissante permettant d’extraire des propriétés d’un objet et de les assigner à des variables.


Sa syntaxe concise et sa facilité d’utilisation en font à mes yeux une fonctionnalité très intéressante.


Ressources FR

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition


Ressources EN

https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/

https://davidwalsh.name/destructuring-alias

https://dmitripavlutin.com/javascript-object-destructuring/