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

On peut encore procéder de manière traditionnelle, à ce moment-là, il faut utiliser la notation pointée, ce qui est 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 points 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 points 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.