Destructuring

Le destructuring permet d’extraire rapidement des valeurs depuis un tableau ou un objet.

Cette syntaxe moderne rend le code :

• Plus court
• Plus lisible
• Plus pratique

Le destructuring est très utilisé dans le JavaScript moderne.

1. Destructuring de tableau

On peut extraire des valeurs d’un tableau directement dans des variables.

const fruits = ["apple", "banana"];

const [first, second] = fruits;

console.log(first);

console.log(second);

2. Sans destructuring

Avant le destructuring, on devait accéder aux index manuellement.

const fruits = ["apple", "banana"];

const first = fruits[0];

const second = fruits[1];

Le destructuring simplifie cette opération.

3. Ignorer une valeur

Il est possible d’ignorer certaines positions.

const numbers = [10, 20, 30];

const [first, , third] = numbers;

console.log(first);

console.log(third);

4. Valeur par défaut

Une valeur par défaut peut être définie.

const [username = "Anonymous"] = [];

console.log(username);

5. Destructuring d’objet

Le destructuring fonctionne aussi avec les objets.

const user = {

    name: "Fred",
    age: 22

};

const { name, age } = user;

console.log(name);

console.log(age);

6. Sans destructuring objet

const user = {

    name: "Fred",
    age: 22

};

const name = user.name;

const age = user.age;

Le destructuring réduit le code répétitif.

7. Renommer une variable

Une propriété peut être renommée pendant le destructuring.

const user = {

    name: "Fred"

};

const { name: username } = user;

console.log(username);

8. Valeur par défaut dans un objet

const user = {

    name: "Fred"

};

const { age = 18 } = user;

console.log(age);

Si la propriété n’existe pas, JavaScript utilise la valeur par défaut.

9. Destructuring dans une fonction

Le destructuring est souvent utilisé dans les paramètres de fonction.

function displayUser({ name, age }) {

    console.log(name);

    console.log(age);

}

displayUser({

    name: "Fred",
    age: 22

});

10. Destructuring avec for...of

Le destructuring est très utilisé avec les Maps.

const cart = new Map();

cart.set("apple", 2);

cart.set("banana", 3);

for (const [item, quantity] of cart) {

    console.log(item);

    console.log(quantity);

}

Ici :

• item reçoit la clé
• quantity reçoit la valeur

11. Destructuring imbriqué

Le destructuring peut accéder à des structures plus complexes.

const user = {

    name: "Fred",

    address: {

        city: "Montreal"

    }

};

const {

    address: { city }

} = user;

console.log(city);

12. Pourquoi utiliser le destructuring

• Réduire le code répétitif
• Améliorer la lisibilité
• Extraire rapidement des valeurs
• Simplifier les fonctions
• Travailler facilement avec les objets et tableaux

13. Erreur fréquente

Les noms doivent correspondre aux propriétés de l’objet.

const user = {

    name: "Fred"

};

const { username } = user;

console.log(username);

La propriété username n’existe pas dans l’objet.

14. Bonnes pratiques

• Utiliser le destructuring pour simplifier le code
• Éviter les destructuring trop complexes
• Utiliser des noms clairs
• Utiliser des valeurs par défaut lorsque nécessaire
• Utiliser le destructuring avec les Maps et fonctions

Résumé rapide