R

Destructuration

La destructuration permet d'extraire facilement des valeurs d'objets et de tableaux dans des variables distinctes.

Destructuration d'objet

javascript
const user = { name: 'Alice', age: 25, city: 'Paris' };

// Avant
const name = user.name;
const age = user.age;

// Avec destructuration
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age); // 25

Avec renommage

javascript
const user = { name: 'Alice', age: 25 };

const { name: userName } = user;
console.log(userName); // 'Alice'

Que se passe-t-il avec : const { name: userName } = user ?

Avec valeur par défaut

javascript
const user = { name: 'Alice', age: 25 };

const { name, country = 'France' } = user;
console.log(country); // 'France'

Objets imbriqués

javascript
const user = {
  name: 'Alice',
  address: {
    city: 'Paris',
    country: 'France'
  }
};

const { address: { city, country } } = user;
console.log(city); // 'Paris'
console.log(country); // 'France'

Destructuration de tableau

javascript
const colors = ['red', 'green', 'blue'];

// Extraire les premiers éléments
const [first, second] = colors;
console.log(first);  // 'red'
console.log(second); // 'green'

// Ignorer des éléments
const [, , third] = colors;
console.log(third); // 'blue'

Avec valeur par défaut

javascript
const colors = ['red'];

const [first, second = 'blue'] = colors;
console.log(first);  // 'red'
console.log(second); // 'blue'

Rest operator

javascript
const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

Quelle est la différence entre destructuration d'objet et destructuration de tableau ?

Que fait ce code : const { name, age } = user ?

Destructuration dans les paramètres

Fonctions

javascript
// Sans destructuration
const displayUser = (user) => {
  console.log(`${user.name} - ${user.age} ans`);
};

// Avec destructuration
const displayUser = ({ name, age }) => {
  console.log(`${name} - ${age} ans`);
};

displayUser({ name: 'Alice', age: 25 });
// "Alice - 25 ans"

Avec valeurs par défaut

javascript
const greet = ({ name = 'Anonyme', greeting = 'Bonjour' } = {}) => {
  return `${greeting} ${name}!`;
};

console.log(greet()); // "Bonjour Anonyme!"
console.log(greet({ name: 'Alice' })); // "Bonjour Alice!"
console.log(greet({ name: 'Bob', greeting: 'Salut' })); // "Salut Bob!"

Pourquoi utiliser la destructuration dans les paramètres de fonction ?

Échange de variables

javascript
let a = 1;
let b = 2;

// Échange avec destructuration
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

Comprendre, pas mémoriser

Ce qu'il faut retenir :

  • Destructuration d'objet : const { name, age } = user extrait par nom de propriété
  • Destructuration de tableau : const [first, second] = arr extrait par position
  • Renommage : const { name: userName } = user pour éviter les conflits de noms
  • Valeurs par défaut : const { city = 'Paris' } = user si la propriété n'existe pas
  • Dans les paramètres : très utile pour rendre les fonctions plus lisibles

La destructuration est omniprésente en JavaScript - vous la reconnaîtrez avec la pratique.

Exercice : Pratique : Destructuration

Facile

Avec ces données :

javascript
const product = {
  id: 1,
  name: 'Laptop',
  price: 1000,
  specs: {
    ram: '16GB',
    cpu: 'i7'
  }
};

const reviews = [
  { rating: 5, comment: 'Excellent' },
  { rating: 4, comment: 'Good' },
  { rating: 3, comment: 'Average' }
];
  1. Extraire name et price de product
  2. Extraire specs.ram en le renommant memory
  3. Extraire le premier et le dernier avis (ignorer celui du milieu)
  4. Créer une fonction displayProduct qui utilise la destructuration dans ses paramètres pour afficher : "Laptop - 1000€ (CPU: i7)"

Astuce : Utilisez la destructuration d'objets imbriqués et de tableaux.