Comment utiliser la déstructuration d’objets en JavaScript

La déstructuration d’objets est une fonctionnalité JavaScript utile pour extraire des propriétés des objets et les lier à des variables.

Mieux encore, la déstructuration d’objets peut extraire plusieurs propriétés dans une instruction, accéder aux propriétés à partir d’objets imbriqués et définir une valeur par défaut si la propriété n’existe pas.

Dans cet article, je vais vous expliquer comment utiliser la déstructuration d’objets en JavaScript.

1. La nécessité de déstructurer les objets

Imaginez que vous souhaitiez extraire certaines propriétés d’un objet. Dans un environnement pré-ES2015, vous devez écrire le code suivant:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

La valeur de la propriété hero.name est affectée à la variable name. De la même manière, la valeur hero.realName est affectée à realName.

Une telle façon d’accéder aux propriétés et de les affecter à des variables nécessite un code standard. En écrivant var name = hero.name, il faut mentionner la liaison name 2 fois, et la même chose pour realName.

C’est là que la syntaxe de déstructuration des objets est utile : vous pouvez lire une propriété et affecter sa valeur à une variable sans dupliquer le nom de la propriété. De plus, vous pouvez lire plusieurs propriétés du même objet dans une seule instruction!

Refactorisons le script ci-dessus et appliquons la déstructuration de l’objet pour accéder aux propriétés name et realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero est une affectation de déstructuration d’objet. Cette instruction définit les variables name et realName, puis leur attribue les valeurs des propriétés hero.name et hero.realName en correspondance.

Comparaison des 2 approches pour accéder aux propriétés de l’objet:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

il est visible que la déstructuration de l’objet est plus pratique car ni les noms de propriété ni la variable d’objet ne sont dupliqués.

2. Extraction d’une propriété

La syntaxe de base de la déstructuration d’objets est assez simple:

const { identifier } = expression;

Où identifier est le nom de la propriété à accéder et expression doit être évalué à un objet. Après la déstructuration, la variable identifier contient la valeur de la propriété.

Voici le code équivalent utilisant un accesseur de propriété:

const identifier = expression.identifier;

Essayons la déstructuration de l’objet en pratique:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

L’instruction const { name } = hero définit la variable name et l’initialise avec la valeur de la propriété hero.name.

3. Extraction de plusieurs propriétés

Pour déstructurer l’objet en plusieurs propriétés, énumérez autant de propriétés que vous le souhaitez en ajoutant des virgules , entre les deux:

const { identifier1, identifier2, ..., identifierN } = expression;

Où identifier1, …, identifierN sont des noms de propriétés à accéder et expression doivent être évalués en un objet. Après la déstructuration, les variables identifier1, …, identifierN contiennent les valeurs de propriétés correspondantes.

Voici le code équivalent:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

Regardons à nouveau l’exemple de la première section, où 2 propriétés sont extraites:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero crée 2 variables name et realName affectées avec les valeurs des propriétés correspondantes hero.name et hero.realName.

4. Valeurs par défaut

Si l’objet déstructuré n’a pas la propriété spécifiée dans l’affectation de déstructuration, la variable est affectée de undefined. Voyons comment ça se passe:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

Après la déstructuration, la variable enemies est undefined car la propriété enemies n’existe pas dans l’objet hero.

Heureusement, vous pouvez définir une valeur par défaut si la propriété n’existe pas dans l’objet déstructuré. Voici la syntaxe de base:

const { identifier = defaultValue } = expression;

Où identifier est le nom de la propriété à accéder et expression doit être évalué à un objet. Après la déstructuration, la variable identifier contient la valeur de la propriété ou est affectée de defaultValue si la propriété identifier n’existe pas.

Voici le code équivalent:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

Changeons l’exemple de code précédent et utilisons la fonction de valeur par défaut:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

Maintenant, au lieu d’être undefined, la variable enemies vaut par défaut .

5. Alias

Si vous souhaitez créer des variables de noms différents des propriétés, vous pouvez utiliser la fonction d’alias de la déstructuration des objets.

const { identifier: aliasIdentifier } = expression;

identifier est le nom de la propriété à accéder, aliasIdentifier est le nom de la variable et expression doit être évalué à un objet. Après la déstructuration, la variable aliasIdentifier contient la valeur de la propriété.

Le code équivalent:

const aliasIdentifier = expression.identifier;

Voici un exemple de fonctionnalité d’alias de déstructuration d’objets:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

En regardant const { realName: secretName } = hero, la déstructuration définit une nouvelle variable secretName (variable alias) et lui attribue la valeur hero.realName.

6. Extraction de propriétés à partir d’objets imbriqués

Dans les exemples précédents, les objets étaient simples : les propriétés ont des types de données primitifs (par exemple des chaînes).

Souvent, les objets peuvent être imbriqués dans d’autres objets. En d’autres termes, certaines propriétés peuvent contenir des objets.

Dans ce cas, vous pouvez toujours utiliser les propriétés de déstructuration de l’objet et d’accès depuis deep. Voici la syntaxe de base:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp est le nom de la propriété qui contient un objet imbriqué. identifier est le nom de propriété auquel accéder à partir de l’objet imbriqué. expression doit être évalué à l’objet déstructuré.

Après la déstructuration, la variable identifier contient la valeur de propriété de l’objet imbriqué.

La syntaxe ci-dessus est équivalente à:

const identifier = expression.nestedObjectProp.identifier;

Le niveau d’imbrication dont vous pouvez extraire les propriétés est illimité. Si vous souhaitez extraire des propriétés de deep, ajoutez simplement d’autres accolades imbriquées:

const { propA: { propB: { propC: { .... } } } } = object;

Par exemple, l’objet hero contient un objet imbriqué { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

La déstructuration de l’objet const { address: { city } } = hero vous permet d’accéder à la propriété city à partir de l’objet imbriqué.

7. Extraction d’une propriété de nom dynamique

Vous pouvez extraire des propriétés de variables avec un nom dynamique (le nom de la propriété est connu à l’exécution):

const { : identifier } = expression;

propName l’expression doit être évaluée en un nom de propriété (généralement une chaîne), et le identifier doit indiquer le nom de variable créé après la déstructuration. Le second expression devrait évaluer l’objet que vous souhaitez déstructurer.

Un code équivalent sans déstructuration d’objet:

const identifier = expression;

Regardons un exemple où prop contient le nom de la propriété:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero est une déstructuration d’objet qui affecte à la variable name la valeur hero, où prop est une variable contenant le nom de la propriété.

8. Objet Rest après la déstructuration

La syntaxe rest est utile pour collecter les propriétés restantes après la déstructuration:

const { identifier, ...rest } = expression;

Où identifier est le nom de la propriété à accéder et expression doit être évalué à un objet.

Après la déstructuration, la variable identifier contient la valeur de la propriété. la variable rest est un objet simple avec les propriétés restantes.

Par exemple, extrayons la propriété name, mais conservons le reste des propriétés:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

La déstructuration const { name, ...realHero } = hero extrait la propriété name.

En même temps, les propriétés restantes (realName dans ce cas) sont collectées dans la variable realHero : { realName: 'Bruce Wayne' }.

9. Cas d’utilisation courants

9.1 Lier les propriétés aux variables

Comme on l’a vu dans de nombreux exemples précédents, la déstructuration de l’objet lie les valeurs de propriété aux variables.

La déstructuration de l’objet peut affecter des valeurs aux variables déclarées en utilisant const, let et var. Ou même attribuer à une variable déjà existante.

Par exemple, voici comment déstructurer à l’aide de l’instruction let:

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

Comment déstructurer à l’aide de l’instruction var:

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

Et comment déstructurer une variable déjà déclarée:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

Je trouve satisfaisant de combiner le cycle for..of avec la déstructuration d’objets pour extraire la propriété immédiatement:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 Paramètre de fonction destructuring

Généralement, la déstructuration de l’objet peut être placée n’importe où où une affectation se produit.

Par exemple, vous pouvez détruire un objet directement dans la liste des paramètres d’une fonction:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) déstructure le paramètre de fonction, créant une variable name contenant la valeur de la propriété name.

10. Résumé

La déstructuration d’objet est une fonctionnalité puissante qui vous permet d’extraire des propriétés d’un objet et de lier ces valeurs à des variables.

J’aime particulièrement la déstructuration des objets, c’est la syntaxe concise et la capacité d’extraire plusieurs variables dans une seule instruction.

J’espère que mon article vous a aidé à voir à quel point la déstructuration d’objets est utile!