JavaScript ES6+ : Qu’est ce que le destructuring et le spread operator

L'opération de déstructuration est une syntaxe qui permet d'affecter des variables à partir d'informations que le moteur JavaScript va chercher dans un objet ou dans un tableau.

• Lorsqu'il s'agit d'un objet le moteur se base par rapport au nom d'une propriété pour retrouver l'information dans l'objet.
• Lorsqu'il s'agit d'un tableau le moteur se base par rapport à une position pour retrouver l'information dans le tableau.

Pour déstructurer un objet on déclare une ou plusieurs variables en les mettant entre accolades comme ceci let {x,y,z}. Ensuite on affecte cette déclaration à un objet let {x,y,z} = vecteur;. Le moteur JavaScript comprend qu'il doit aller chercher les valeurs des propriétés dans l'objet et les affecter aux variables de même nom.

const vecteur = { x : 2, y : -1, z : 1 } let {x,y,z} = vecteur; console.log(`x=${x} y=${y} z=${z}`); Tester le code

Lorsque l'on procédait de manière traditionnelle il fallait utiliser la notation pointée ce qui était répétitif (* Voir ci-dessous).

const vecteur = { x : 2, y : -1, z : 1 } // Si on veut récupérer les coordonnées de // manière traditionnelle il faut faire let x = vecteur.x; let y = vecteur.y; let z = vecteur.z; console.log(`x=${x} y=${y} z=${z}`);

On peut bien sûr déstructurer en créant des variables ou des constantes.

// Ci-dessous on crée des variables let {x,y,z} = vecteur; // Ci-dessous on crée des constantes const {x,y,z} = vecteur;

Déstructurer en changeant le nom de la variable

Vous l'avez peut être remarqué dans l'exemple que nous venons de faire la variable porte le même nom que la propriété. C'est ce qui se fait par défaut. Si ce comportement ne vous convient pas vous avez la possibilité de renommer la variable.

Dans l'exemple ci-dessous j'ai renommé x en coordX en mettant deux points entre les deux comme ceci x:coordX. Dans ce cas c'est la propriété x qui est recherchée dans l'objet et la variable coordX qui est déclarée et initialisée avec la valeur de x (* et ainsi de suite pour coordY et coordZ).

const vecteur = { x : 2, y : -1, z : 1 } let {x:coordX ,y:coordY ,z:coordZ } = vecteur; console.log(`coordX=${coordX} coordY=${coordY} coordZ=${coordZ}`); Tester le code

Déstructurer au moment de l'appel d'une fonction

Vous pouvez déstructurer au moment de l'appel à une fonction. C'est logique surtout si vous vous souvenez que le passage d'argument se fait par une affectation. C'est pratique dans le cas où vous avez un gros objet avec beaucoup de propriétés et que dans la fonction vous n'avez besoin que de quelques unes de ces propriétés. En plus ça va améliorer la lisibilité de votre code puisque vous précisez les propriétés que vous allez utiliser dès la déclaration.

Ci-dessous je déclare la liste des paramètres de la fonction entre accolades {x,y,z} et je passe à l'appel l'objet vecteur.

const vecteur = { x : 2, y : -1, z : 1 } function print({x,y,z}) { console.log(`x=${x} y=${y} z=${z}`); } print(vecteur); Tester le code

Déstructurer des propriétés imbriquées

Ci-dessous on va prendre l'exemple d'un objet qui représente une droite qui a une épaisseur width, une couleur color et qui passe par deux point A et B qui ont tous les deux un triplet de coordonnées. Ici je déstructure pour récupérer d'abord width puis je veux descendre sur la coordonnée x du point A et j'écris A : {x}. Ce qui fait A : {x:startA} si j'en profite pour renommer x.

const line = { width : 2, color : 'blue', A : {x:2, y:1, z:3}, B : {x:4, y:3, z:2} }; const {width , A : {x:startA} } = line; console.log(`width => ${width} startA => ${startA}`); Tester le code

Pour déstructurer un tableau la recherche de l'information ne peut pas se faire sur la base d'un nom. La recherche va se faire sur la base de la position de l'information dans le tableau.

const vecteur = [2,-1,1]; let [x,y,z] = vecteur; console.log(`x=${x} y=${y} z=${z}`); Tester le code

Lorsque l'on procédait de manière traditionnelle il fallait accéder aux éléments un par un, ce qui était répétitif (* Voir ci-dessous).

const vecteur = [2,-1,1]; let x = vecteur[0]; let y = vecteur[1]; let z = vecteur[2]; console.log(`x=${x} y=${y} z=${z}`);

Récupérer une partie des informations

Il faut mettre une virgule pour sauter un élément. Dans l'exemple ci-dessous dans lequel j'ai écrit [,,z] je saute les deux premiers éléments de manière à récupérer le troisième que je nomme z.

const vecteur = [2,-1,1]; // Ne récupérer que le z let [,,z] = vecteur; console.log(`Récupérer uniquement le z=${z}`); Tester le code

Déstructurer un tableau à deux dimensions

Dans l'exemple ci-dessous je fais deux déstructurations. Au niveau de la première je décompose ma matrice en trois lignes const [L1,L2,L3] = matrice;. Dans la deuxième déstructuration je descends dans la ligne 2 en mettant à nouveau une paire de crochets. Puis je récupère la première valeur que j'appelle L2_x.

const matrice = [ [2,1,1], [3,1,4], [5,0,1] ]; const [L1,L2,L3] = matrice; console.log(`Ligne 2 => ${L2}`); const [,[L2_x],] = matrice; console.log(`Ligne 2 valeur de x => ${L2_x}`); Tester le code

Le spread operator est comme son nom l'indique un opérateur. Il faut mettre trois point devant une variable pour appliquer le spread operator soit ...n. La variable peut être un objet ou un tableau.

Le spread operator décompose un objet ou un tableau en une suite de valeurs individuelles.

Spread Operator sur un objet

Supposons que je veuille dupliquer un objet. Il y a une erreur qu'il ne faut pas faire. Je vais vous la montrer au moins on l'écarte.

Ci-dessous après avoir créé l'objet person1 je crée person2 avec l'égalité suivante : const person2 = person1;. Attention ici je ne fais que dupliquer les références pas les objets. J'ai donc deux références qui pointent sur le même objet. Mais ce que je veux faire c'est créer deux objets. Donc ça ne va pas.

const person1 { name : 'Jean', age : 25 } // Je veux créer un nouvel objet person2 // Je ne peux pas faire cela car ce sont des références const person2 = person1; person2.name = 'Paul'; console.log(person1); console.log(person2); Tester le code

On va utiliser le spread operator pour récupérer l'objet person1. On pourrait se contenter de le dupliquer. En fait on peut faire plus :

1. On peut changer la valeur d'une propriété de l'objet que l'on vient de dupliquer. Ici on change la valeur de name pour lui affecter 'Paul'.
2. On peut ajouter une nouvelle propriété. Ici on ajoute la propriété sexe.

const person1 = { name : 'Jean', age : 25 } const person2 = { // Ici je récupère person1 ...person1, // Je peux changer le nom name : 'Paul', // Je peux ajouter une propriété sexe : 'M' }; console.log(person1); console.log(person2); Tester le code

Les console.log permettent de vérifier que l'on a bien deux objets distincts.

Pour dupliquer tab1 on place d'abord le spread operateur devant tab1 soit ...tab1 ce qui vaut 1,2,3. Pour fabriquer tab2 on fait const tab2 = [] et on place dedans le ...tab1 soit const tab2 = [...tab1]. Ce qui fait que nos deux tableaux sont identiques.

Pour tab3 je m'amuse à concaténer tab1 puis une chaîne de séparation puis tab2.

const tab1 = [1,2,3]; // Ici on duplique const tab2 = [...tab1]; const tab3 = [...tab1,'sep',...tab2]; console.log(tab1); console.log(tab2); console.log(tab3); Tester le code

Le rest parameter n'existe que pour les tableaux. On a vu le rest parameter dans le tutoriel sur la gestion des paramètres et arguments en JavaScript. En fait, rest parameter et spread operator sont des opérateurs qui font des opérations inverses :

• Le spread operator décompose le tableau en éléments individuels.
• Le rest parameter rassemble les éléments individuels dans un tableau.