Affectation par déstructuration en JavaScript
Apprenez la déstructuration JavaScript : déballez arrays et objects, définissez des valeurs par défaut, renommez des variables, utilisez les motifs imbriqués et rest, échangez des variables et déstructurez des paramètres.
Comprendre la déstructuration en JavaScript
L'affectation par déstructuration est une syntaxe qui permet de déballer des valeurs d'arrays ou des propriétés d'objects dans des variables distinctes en une seule instruction compacte. Introduite avec ES6 (ES2015), elle remplace les accès répétitifs propriété par propriété et rend beaucoup plus lisible le code qui manipule des données structurées.
Sans déstructuration, on écrit du code comme celui-ci :
Avec la déstructuration, la même intention tient en une seule ligne. Le reste de ce chapitre couvre les formes array et object, les valeurs par défaut, le renommage, les motifs imbriqués, le motif rest, l'échange de variables, la déstructuration dans les paramètres de fonctions, et le piège courant de ({ a } = {}).
Déstructuration d'array : déballer des éléments
La déstructuration d'array affecte les éléments d'un array à des variables distinctes selon leur position (index). Les variables à gauche reflètent l'ordre des valeurs à droite. Elle est particulièrement pratique pour les valeurs de retour de fonctions et l'itération sur des paires clé/valeur.
Déstructuration d'array basique
Une variable sans élément correspondant devient undefined, d'où l'utilité des valeurs par défaut (ci-dessous).
Ignorer des éléments et valeurs par défaut
Laissez un « trou » (un emplacement vide entre des virgules) pour ignorer les éléments dont vous n'avez pas besoin. Ajoutez = valeur pour donner à une variable une valeur de repli, utilisée uniquement lorsque la valeur déballée est undefined :
Comme la déstructuration fonctionne sur tout itérable, elle s'associe naturellement au motif rest pour collecter les éléments restants :
Déstructuration d'object : extraire des propriétés
La déstructuration d'object offre un moyen pratique d'extraire plusieurs propriétés d'objects. Cette technique peut améliorer la gestion des objects de configuration ou le traitement de données issues de structures complexes.
Déstructuration d'object simple
Contrairement aux arrays, la déstructuration d'object fait correspondre les éléments par nom de propriété, et non par position, donc l'ordre des clés dans le motif n'a pas d'importance.
Renommer des variables et définir des valeurs par défaut
Utilisez la syntaxe nomPropriété: nouveauNom pour affecter une propriété à une variable portant un nom différent — utile lorsque le nom de la propriété entre en conflit avec une variable existante ou n'est pas un identifiant valide. Les valeurs par défaut fonctionnent de la même façon qu'avec les arrays :
Vous pouvez renommer et définir une valeur par défaut simultanément avec propriété: nouveauNom = défaut :
Techniques avancées de déstructuration
La déstructuration avancée englobe les structures imbriquées et l'utilisation du paramètre rest pour agréger les propriétés ou éléments restants.
Déstructuration imbriquée
Les motifs peuvent être imbriqués pour atteindre en profondeur des objects et des arrays simultanément. La forme du motif reflète simplement la forme des données :
Notez que size: et items: ici ne sont pas des variables — ils constituent simplement le chemin dans la structure. Seuls width, height, item1 et item2 deviennent des variables.
Utiliser le motif rest
Le motif rest (...nom) regroupe toutes les propriétés restantes non déstructurées dans un nouvel object. Pour en savoir plus, consultez Paramètres rest et syntaxe spread :
Applications pratiques de la déstructuration
La déstructuration s'avère indispensable dans diverses applications pratiques, notamment :
- Échange de variables : simplifie le processus d'échange de valeurs entre variables.
- Gestion des paramètres de fonction : améliore la gestion de plusieurs paramètres, en particulier pour les fonctions comportant de nombreux paramètres optionnels.
Échange de variables
La déstructuration permet d'échanger deux valeurs sans variable temporaire. L'array de droite est construit en premier, puis déballé dans les variables de gauche :
Paramètres de fonction
La déstructuration d'un paramètre permet à une fonction d'accepter un « object d'options » et d'en extraire des paramètres nommés avec des valeurs par défaut sensées — bien plus propre qu'une longue liste de paramètres sensibles à l'ordre. Le = {} final est ce qui permet à l'appelant d'omettre entièrement l'argument :
Apprenez-en davantage sur les paramètres dans le chapitre Fonctions JavaScript.
Le piège de ({ a } = {})
Lorsque vous déstructurez une variable existante (pas dans une déclaration const/let), vous devez entourer l'instruction de parenthèses. Sinon, JavaScript interprète l'accolade ouvrante { comme le début d'un bloc de code, et non d'un motif object, et génère une erreur de syntaxe :
Les parenthèses ne sont nécessaires que pour la déstructuration d'object dans des variables déjà déclarées. La déstructuration d'array ([a, b] = [1, 2]) n'a pas ce problème, car [ ne commence jamais un bloc d'instruction.
Un piège connexe : lorsque la variable et sa valeur par défaut proviennent d'une source potentiellement absente, donnez une valeur par défaut de {} à l'ensemble du paramètre (comme dans drawChart ci-dessus). Sans cela, appeler la fonction sans argument lève une erreur, car on ne peut pas lire une propriété depuis undefined.
Conclusion
La déstructuration JavaScript est une fonctionnalité puissante qui offre un code plus lisible, concis et maintenable. En adoptant cette approche, les développeurs peuvent gérer efficacement l'extraction de données à partir d'arrays et d'objects, ce qui conduit à des structures de code plus claires et plus efficaces.