Comment écrire du code plus propre avec JavaScript

0
92

La destruction est l’un de mes outils préférés en JavaScript, en termes simples, la déstructuration vous permet de décomposer une structure complexe (comme un tableau ou un objet) en parties plus simples, bien qu’il y ait un peu plus que cela.

Voyons cela mieux dans un exemple:

Maintenant, certaines personnes utilisent cette fonctionnalité depuis un certain temps, peut-être lors de la création d’applications React, mais elles ne la comprennent pas très bien, pour d’autres, c’est peut-être la première fois. Je vais donc vous guider dès le début afin qu’à la fin de l’article, nous ayons le même niveau de compréhension.

Destructuration d’objets

Dans l’exemple ci-dessus, toute la magie se produit à la ligne suivante:

Maintenant, cela peut sembler un peu étrange d’avoir ces crochets comme celui-ci sur le côté gauche de l’affectation, mais c’est ainsi que nous disons à JavaScript que nous détruisons un objet.

La destruction d’un objet vous permet de lier différentes propriétés d’un objet à n’importe quelle profondeur. Commençons par un exemple encore plus simple:

Dans le cas ci-dessus, nous déclarons une variable appelée name qui sera initialisé à partir de la propriété du même nom dans l’objet me, de sorte que lorsque nous évaluons la valeur de name on a Juan. Cette même méthode peut être appliquée à n’importe quelle profondeur, à laquelle revenons à notre exemple:

Pour title et rating c’est exactement la même chose que nous l’avons déjà expliqué, mais en author, les choses sont un peu différentes. Lorsque nous arrivons à une propriété qui est soit un objet ou un tableau, nous pouvons choisir de créer une variable author avec une référence au article.author objet, ou nous pouvons procéder à une déstructuration profonde et accéder immédiatement aux propriétés de l’objet interne.

Accéder à la propriété de l’objet

Faire une déstructuration profonde ou imbriquée

Attends quoi? Si j’ai détruit author, pourquoi n’est-il pas défini? Ce qui se passe est en fait très simple. Lorsque nous demandons à JavaScript de détruire le author objet, cette liaison elle-même n’est pas créée et à la place nous avons accès à tous les author propriétés que nous avons sélectionnées. Alors souvenez-vous toujours de cela.

Opérateur de propagation (…)

De plus, nous pouvons utiliser l’opérateur de diffusion ... pour créer un objet avec toutes les propriétés qui n’ont pas été détruites.

Si vous souhaitez savoir comment procéder, consultez mon article précédent sur le Spread Operator en JavaScript.

Renommer les propriétés

Une grande propriété de la destruction est la possibilité de choisir un nom différent pour la variable de la propriété que nous extrayons. Prenons l’exemple suivant:

En utilisant : sur une propriété, nous pouvons lui donner un nouveau nom, dans notre cas newName. Ensuite, nous pouvons accéder à cette variable dans notre code. Il est important de noter qu’une variable avec la propriété d’origine name dans notre cas, le nom ne sera pas défini.

Propriétés manquantes

Alors que se passerait-il si nous essayions de déstructurer une propriété qui n’est pas définie dans notre objet?

Dans ce cas, la variable est créée avec la valeur undefined.

Les valeurs par défaut

En développant les propriétés manquantes, il est possible d’attribuer une valeur par défaut lorsque la propriété n’existe pas, voyons quelques exemples de ceci:

Dans l’exemple ci-dessus, nous avons montré quelques exemples d’attribution de valeurs par défaut à nos destructions. Les valeurs par défaut ne sont attribuées que lorsque la propriété est undefined. Si la valeur de la propriété est par exemple null ou un string la valeur par défaut ne sera pas attribuée, mais la valeur réelle de la propriété.

Destructuration des tableaux et des itérables

Nous avons déjà vu quelques exemples d’objets de déstructuration, mais la même chose peut s’appliquer aux tableaux ou aux itérables en général. Commençons par un exemple:

L’exemple est explicite lorsque nous devons détruire un tableau que nous devons utiliser [] au lieu de {}, et nous pouvons mapper chaque position du tableau avec une variable différente. Mais il y a aussi de belles astuces.

Sauter des éléments

En utilisant le , opérateur, nous pouvons ignorer certains éléments de l’itérable comme suit:

Remarquez comment le laisser vide entre , saute les éléments. Cela peut être subtil mais cela a de grandes conséquences sur les résultats finaux. Vous pouvez également utiliser l’opérateur de diffusion ... comme suit:

Dans ce cas, z volonté obtenir toutes les valeurs après b comme un tableau. Ou peut-être que vous avez un besoin plus spécifique et que vous souhaitez détruire des positions spécifiques dans le tableau, pas de problème, JavaScript vous a couvert:

Si nous détruisons un tableau comme s’il s’agissait d’un objet, nous pouvons utiliser les index comme propriétés et ainsi accéder à n’importe quelle position dans le tableau.

Propriétés manquantes

Comme pour les objets, il est également possible de définir des valeurs par défaut pour les éléments non définis dans le tableau. Jetons un œil à quelques exemples:

Pour la destruction de tableaux, il est également possible de définir des valeurs par défaut pour undefined propriétés, cependant, il n’est pas possible de définir une valeur par défaut lorsque nous avons l’opérateur de diffusion ..., qui dans le cas de undefined, renverra un tableau vide.

Permutation des variables

C’est un cas d’utilisation amusant de la déstructuration, 2 variables peuvent être échangées en une seule expression:

Destructuration avec propriétés calculées

Jusqu’à présent, chaque fois que nous voulions détruire les propriétés d’un objet, ou les éléments d’un itérable, nous utilisions des clés statiques. Si nous voulons des clés dynamiques (comme celles stockées sur une variable), nous devons utiliser des propriétés calculées.

Voici un exemple:

C’est vraiment génial! En utilisant une variable entre [], nous pouvons évaluer sa valeur avant de faire l’affectation, et donc il est possible de faire une déstructuration dynamique. Cependant, il est obligatoire de donner un nom à cette nouvelle variable.

Arguments de la fonction de destruction

Les variables de destruction peuvent être placées n’importe où où nous pouvons déclarer des variables. Par exemple en utilisant let, const ou var, mais il est également possible de déconstruire des arguments de fonction. Voici un exemple simple du concept:

Comme vous pouvez le voir, il est très simple et élégant et utilise les mêmes règles que nous avons évoquées précédemment.

La destruction peut sembler gênante au début, mais une fois que vous vous y êtes habitué, il n’ya pas de retour en arrière. Cela peut vraiment aider votre code à être plus lisible.

Ce article a été initialement publié le Flux de code en direct par Juan Cruz Martinez, fondateur et éditeur de Live Code Stream, entrepreneur, développeur, auteur, conférencier et faiseur de choses. Vous pouvez suivre Juan sur Twitter ici.

Flux de code en direct est également disponible sous forme de newsletter hebdomadaire gratuite. Inscrivez-vous pour recevoir des mises à jour sur tout ce qui concerne la programmation, l’IA et l’informatique en général.

Pssst, hé toi!

Souhaitez-vous recevoir GRATUITEMENT la newsletter technologique quotidienne la plus impertinente, dans votre boîte de réception? Bien sûr que vous faites: inscrivez-vous à Big Spam ici.