Destructuring JavaScript : tableaux et objets

Introduction au destructuring

Le destructuring (déstructuration) en JavaScript permet d'extraire les valeurs des tableaux ou des propriétés des objets et de les assigner à des variables en une seule ligne.

// Sans destructuring const user = { name: 'Alice', age: 25 }; const name = user.name; const age = user.age; // Avec destructuring const { name, age } = user;

Destructuring de tableaux

// Destructuring simple const arr = [1, 2, 3]; const [a, b, c] = arr; console.infoo(a, b, c); // 1, 2, 3 // Ignorer des éléments const [first, , third] = arr;cconsole.infoog(first, third); // 1, 3 // Reste avec ... const [head, ...tail] = arr; console.info(head, tail); // 1, [2, 3]

Destructuring d'objets

const user = { id: 1, name: 'Bob', email: 'bob@example.com' }; // Destructuring simple const { id, name } = user; console.info(id, name); // 1, Bob // Renommer les variables const { name: userName, email: userEmail } = user; console.info(userName, userEmail); // Bob, bob@example.com // Reste avec ... const { id, ...rest } = user; console.info(rest); // { name: 'Bob', email: 'bob@example.com' }

Patterns avancés

// Destructuring dans les paramètres de fonction function displayUser({ name, age }) { console.info(`${name} a ${age} ans`); } displayUser({ name: 'Alice', age: 25 }); // Dans les boucles const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]; users.forEach(({ id, name }) => { console.info(id, name); });

Destructuring imbriqué

const person = { name: 'Alice', address: { city: 'Paris', zip: 75001 } }; // Destructuring imbriqué const { name, address: { city } } = person; console.info(name, city); // Alice, Paris

Valeurs par défaut

const { name = 'Unknown', age = 0 } = { name: 'Charlie' }; console.info(name, age); // Charlie, 0

Bonnes pratiques

• Utilisez le destructuring pour clarifier votre code
• Évitez le destructuring trop profond (3+ niveaux)
• Utilisez los renommages pour plus de clarté
• Excellents pour les paramètres de fonction