Introduction


Object Destructuring is an ES6 feature that allows us to extract one or many properties of an array or an object with a concise syntax. We can read an entire object structure in a single instruction, that makes it easy to read. More features are also packed with object destructuring : I will talk about some of them in this post.



Extract a property from an object


Let's take the following object: 



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


If we wanted to extract name and login from the user object in order to assign them in new variables, in a pre-ES6 environment, we would write:



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


With destructuring, we can write:



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


That way, we can extract only the wanted properties, in a single line of code.


If the property does not exist, the new variable will be undefined:



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


It works the same for arrays:



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




Rename a property


Let's take the previous example and say that we want to extract the information contained in login, and assign it to a new variable username:



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


We gave an alias to login and created a new variable username which contain the information.



Give a default value


We saw that if the property was missing, the new variable was undefined. If needed, we can assign a default value.



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



Conclusion


Object destructuring is a powerful feature allowing us to extract properties from an object and concisely assign them to variables, and I encourage you to use it!



--------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------- Version française ---------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------




Introduction


L’affectation par décomposition, ou "destructuring" en anglais, est une fonctionnalité ES 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/