Comprendre la syntaxe de destruction JavaScript

La déstructuration fournit un moyen simple mais efficace de créer des variables à partir de morceaux d'un tableau ou des propriétés d'un objet – cette approche permet généralement un code meilleur et plus compréhensible.

En JavaScript (et d'autres langages de programmation), nous travailler avec des groupes de données comme Array et Object. Le moyen d'accéder à ces données se fait généralement par le biais d'un index pour les tableaux et d'une propriété pour les objets, mais vous êtes-vous déjà retrouvé à devoir accéder à la même donnée exacte encore et encore dans votre code, au point où il est devenu de plus en plus difficile à comprendre?

La clarté du code est essentielle lorsque vous travaillez avec des équipes et pour pérenniser votre travail. Regardez les morceaux de code suivants.

 if   ( users  [ 0 ] .  capabilities  [ 0  ]] .  type  ===   'modifier'   &&  utilisateurs  [ 0 ] .  actif ) 


 const  user  =  users  [ 0 ] 
 const  active  =  user .  actif
 const  canEdit  =  utilisateur .  capacités  [ 0 ] .  type
 if   ( canEdit  ===   'edit'   &&  active ) 


 const   [ { ] active  capacités :   [ { type :  canEdit } ]  } ]   =  utilisateurs
 if   ( canEdit  ===   'edit'   &&  active ) 

Même s'il y a plus de lignes de code, le deuxième exemple est beaucoup plus clair et sera probablement plus facile à déchiffrer pour tous les autres membres de l'équipe lorsqu'ils examineront ce morceau de code particulier. Le dernier exemple est créé avec la déstructuration imbriquée à la fois d'un objet et d'un tableau imbriqué, et c'est ce que nous allons examiner aujourd'hui.

La destruction fournit un moyen simple mais efficace de créer des variables à partir de morceaux d'un tableau, ou des propriétés de un objet – cette approche permet généralement un code meilleur et plus compréhensible.

Avertissement: Cet article est destiné aux personnes qui adoptent une première approche de la syntaxe d'affectation de déstructuration et qui ont du mal à la comprendre. Je ne couvrirai que les bases concernant les capacités que cette fonctionnalité nous donne. Pour des exemples et des informations plus approfondis, je vous recommande de lire les exemples sur la page MDN Destructuring assignation .

Commençons par les tableaux

 const  people  =   [ 'Karen'   'Bob' ]  »

sendItem (people [0]'chocs') `
 sendItem  ( people  [ 1 ]   'coal' )  »

À première vue, le code ci-dessus est assez clair. Pour une raison quelconque, celui qui est sur l'index 0 semble obtenir le bon item, alors que celui sur l'index 1 ne reçoit qu'un morceau de charbon.

Peut-être que nous pourrait réécrire le code pour être un peu plus clair.

 const  people  =   [ 'Karen'   'Bob' ] 

 const  bestFriend  =  personnes  [ 0 ] 
 const  archEnemy  =  personnes  [ 1 [19659007]] 

 sendItem  ( bestFriend   'chocs' ) 
 sendItem  ( archEnemy   'coal' ) 

Maintenant que nous avons déclaré certaines variables qui décrivent plus précisément ce que signifient les indices de 0 et 1, le code devient plus facile à lire et à comprendre. Cependant, vous pouvez commencer à voir un peu de verbosité autour de l’endroit où nous déclarons les deux constantes.

Pour le moment, ce n’est pas grave, car il ne reste que deux personnes que nous devons extraire du tableau. Mais que faire si c'était 5 ou 10? En raison de ce besoin, la syntaxe de déstructuration est venue améliorer nos vies dans ES6.

Abordons l'exemple précédent en utilisant cette syntaxe.

 const  people  =   [ 'Karen ' ' Bob '] 

 const   [ bestFriend  archEnemy ]   =  people

 sendItem  ( bestFriend   'chocs' ) 
 sendItem  ( archEnemy   'coal'  ]) 

Cette syntaxe peut être très décourageante au début, mais repensez à l'époque du lycée lorsque vous appreniez l'algèbre, et à quel point vous la détestiez, et comment vous pouviez avoir deux côtés dans une équation.

Vous avez déjà sachez comment déclarer un tableau, donc si je vous disais:

 const  people  =   [ bestFriend  archEnemy ] 

Cela fait sens parfait, non? La variable de gauche reçoit le contenu de la droite.

Si nous inversons la déclaration précédente, nous obtiendrons:

 [ bestFriend  archEnemy ]   =   const  personnes

J'espère qu'à ce moment vous commencez à comprendre ce moment AHA de perspicacité. Si nous regardons l'exemple précédent, une chose semble tout de suite déplacée. Nous savons pertinemment qu'en JavaScript, nous ne pouvons pas définir le mot-clé const pour déclarer une variable sur le côté droit d'une affectation. De plus, nous avons déjà un tableau people déclaré en haut, donc nous ne voulons pas vraiment le re-déclarer, mais extraire son contenu dans deux nouvelles variables.

Ainsi, nous déplaçons le mot-clé const au début, et nous obtenons ce qui suit:

 const   [ bestFriend  archEnemy ]   =  people

Ce qui se traduit par: Je veux créer deux variables, bestFriend et archEnemy, à partir du tableau people. La première variable, bestFriend, capturera la valeur à l'intérieur de l'index 0 des personnes; et la deuxième variable, archEnemy, capturera la valeur à l'intérieur de l'index de 1.

Si vous vous demandez comment le langage sait que nous voulons dire index 0 et 1, c'est à cause de la position qu'ils occupent dans la syntaxe du tableau sur le partie gauche de l'affectation.

 const   [ bestFriend  archEnemy ]   =  people

Gérer les objets

Ok, la déstructuration lorsque vous travaillez avec des tableaux est bien, mais ce n’est pas le cas le plus courant. La plupart du temps (ou du moins c'est mon expérience), je me retrouve à utiliser la déstructuration lorsque je travaille avec des objets.

Créons un objet personne sur lequel nous pouvons travailler comme exemple.

 const  bestFriend  =   {
  nom :   'Karen' 
  âge :   35 
  espèces :   'Reptilian' 
  alignement :   'Neutre chaotique' 
  favoris :   [
     { type :   'food'  value :   'ice cream'  } 
     { type :   'animal'  value :   'loutre'  } 
  ] [19659144]} 

 const  archEnemy  =   {
  âge :   40 
  name :   'Indisponible' 
} 

Dans la déstructuration d'objets, vous avez la possibilité de créer facilement une variable pour chacune des propriétés auxquelles vous souhaitez accéder. Nous pouvons donc nous en tirer avec ce qui suit:

 const   { age  favorites  name }   =  bestFriend
console .  log  ( age ) 
console .  log  ( favoris  [ 0 ] .  value ) 
console .  journal  ( nom ) 

Si vous vouliez donner à la variable un nom personnalisé, au lieu du nom de la propriété, vous pouvez facilement le faire comme suit:

 const   { age :  howOld  nom :  howToCall }   =  bestFriend
console .  journal  ( howOld ) 
console .  journal  ( howToCall ) 

Maintenant, généralement lorsque vous travaillez avec un objet et que vous voulez accéder à l'une de ses propriétés, vous le feriez comme dans l'exemple suivant.

 sendItem  ( bestFriend  bestFriend .  favoris  [ 0 ] .  value  bestFriend .  age  ) 
 sendItem  ( archEnemy   'coal'  archEnemy .  age ) 

À première vue, sans connaître l'API interne de la fonction sendItem, cela ne semble pas très clair. Nous pourrions utiliser des variables simples pour clarifier notre intention. Nous voulons envoyer autant de cadeaux à nos amis qu'ils sont vieux, et autant de charbons à l'ennemi qu'ils sont vieux.

Donc, âge === nombre de cadeaux.

 const  perfectGift  =  bestFriend .  favoris  [ 0 ] .  value
 const  amountOfGiftsForFriend  =  bestFriend .  age
 const  amountOfCoalForEnemy  =  archEnemy .  age

 sendItem  ( bestFriend  perfectGift  amountOfGiftsForFriend ) 
 sendItem  ([19459009archEnemy arch ] 'coal'  amountOfCoalForEnemy ) 

Rien qu'en faisant ces simples changements, vous pouvez déjà voir que la lisibilité du code s'améliore considérablement. Maintenant, travaillons sur le même exemple avec la déstructuration.

 const   { age :  amountOfGiftsForFriend  favorites :   [ { valeur :  perfectGift } ] }   =  bestFriend
 const   { âge :  amountOfCoalForEnemy }   =  archEnemy

 sendItem  ( bestFriend  perfectGift  amountOfGiftsForFriend ) 
 sendItem  ([19459009archEnemy  arch ] 'charbon'  amountOfCoalForEnemy ) 

Déstructurons (😄) cet exemple afin que nous puissions mieux comprendre ce qui se passe.

In la première ligne, nous déstructurons plusieurs propriétés à partir de l'objet bestFriend. Nous avons besoin de connaître deux données: perfectGift qui devrait être la valeur du premier élément du tableau des favoris, et amountOfGiftsForFriend qui devrait être égal à l'âge.

Puisque nous cherchons à renommer la propriété age de notre objet en amountOfGiftsForFriend pour la rendre plus lisible, nous devons utiliser la syntaxe qui nous permet de renommer cette propriété en une autre variable. Donc d'abord, nous déstructurons l'âge comme ceci:

 const   { age :  amountOfGiftsForFriend }   =  bestFriend
console .  log  ( amountOfGiftsForFriend ) 

Ensuite, nous devons déstructurer la propriété favorites.

 const   { favorites }   =  bestFriend
console .  journal  ( favoris ) 

Maintenant, restez avec moi, les favoris est un tableau, non? Et dans la première partie de cet article, nous avons appris que nous pouvons déstructurer les tableaux par leur index.

Donc, si nous devons accéder au premier objet du tableau, d'index 0, nous pouvons faire une déstructuration du tableau imbriqué dans la même ligne.

 const   { favoris :   [ firstFavorite ]  } 
console .  log  ( firstFavorite ) 

Il ne nous reste plus qu'à dire à la syntaxe de déstructuration quelle propriété de ce premier objet nous voulons et comment nous voulons le renommer.

 const   { favorites :   [[19659007] { valeur :  perfectGift } ]  } 
console .  journal  ( perfectGift ) 

Voici une boîte de code avec l'exemple au cas où vous voudriez le vérifier vous-même.

Conclusion

Comme je l'ai mentionné au début de l'article, cette petite explication est uniquement destinée à vous faire passer le moment OMG WHAT IS DIS lorsque vous rencontrez pour la première fois la syntaxe quelque part dans la nature.

Je pense personnellement que La déstructuration peut apporter beaucoup de clarté au code, et c'est un outil fantastique à avoir sous votre ceinture en tant que développeur. Cependant, je vous recommande de lire au moins rapidement les exemples fournis par MDN pour comprendre en profondeur le pouvoir que cette syntaxe peut vous donner.

Comme toujours, merci de lire et de partager avec moi vos réflexions sur Twitter à: @marinamosti .

PS Tous saluent l'avocat magique! 🥑

P.P.S. ❤️🔥🐶☠️