open

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

#1 Principe du destructuring ou en français de la déstructuration open

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.

#2 Destructuring d’un objet open

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.

Principe de destructuring ou déstructuration d'un objet
Tester le code
Exemple de destructuring d'un objet

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).

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

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).

Tester le code
Déstructuration en changeant le nom

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.

Tester le code
Déstructuration au moment de l'appel d'une fonction

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.

Tester le code
Déstructuration d'objets imbriqués

#3 Déstructuration d’un tableau. open

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.

Destructuring d'un tableau
Tester le code
Déstructuration d'un tableau

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).

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.

Tester le code
Déstructuration d'un élément particulier du tableau

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.

Tester le code

#4 Spread Operator sur un objet open

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.

Dupliquer les références
Tester le code
Résultats si on duplique les références

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.
Tester le code

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

Dupliquer un objet

#5 Spread Operator sur un tableau open

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.

Tester le code
Dupliquer un tableau

#6 Comparaison Spread Operator et Rest parameter open

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.
Comparaison du spread operator et du rest parameter