Apprends Destructuration

Destructuration de tableaux

La destructuration te permet d'extraire des valeurs de tableaux (ou des propriétés d'objets) dans des variables individuelles en une seule instruction.

Destructuration de tableau basique :

javascript

const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Sauter des valeurs — utilise des virgules sans nom de variable :

javascript

const [, second, , fourth] = [10, 20, 30, 40];
console.log(second); // 20
console.log(fourth); // 40

Valeurs par défaut — fournis des valeurs de secours pour les éléments manquants :

javascript

const [a = 0, b = 0, c = 0] = [1, 2];
console.log(c); // 0 (valeur par défaut, car le tableau n'a pas de troisième élément)

Élément rest — collecte les éléments restants dans un nouveau tableau :

javascript

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

Échanger des variables — une astuce classique :

javascript

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x); // 2
console.log(y); // 1

Destructuration d'objets

La destructuration d'objet extrait les propriétés par leur nom :

javascript

const person = { name: 'Alice', age: 30, city: 'Paris' };
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age);  // 30

Renommer des variables — utilise un deux-points pour assigner à un nom de variable différent :

javascript

const { name: fullName, age: years } = person;
console.log(fullName); // 'Alice'
console.log(years);    // 30

Valeurs par défaut :

javascript

const { name, role = 'user' } = { name: 'Bob' };
console.log(role); // 'user' (valeur par défaut, car role n'est pas dans l'objet)

Destructuration imbriquée — extrait depuis des 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'

Tu peux combiner renommage, valeurs par défaut et imbrication selon tes besoins.

Destructuration dans les fonctions

L'une des utilisations les plus puissantes de la destructuration se trouve dans les paramètres de fonction. Au lieu d'accepter un objet et d'accéder à ses propriétés dans le corps de la fonction, tu peux destructurer directement dans la liste des paramètres.

Sans destructuration :

javascript

function greet(person) {
  console.log('Hello, ' + person.name + '! Age: ' + person.age);
}

Avec destructuration :

javascript

function greet({ name, age }) {
  console.log('Hello, ' + name + '! Age: ' + age);
}

greet({ name: 'Alice', age: 30 }); // Hello, Alice! Age: 30

Avec valeurs par défaut :

javascript

function createUser({ name = 'Anonymous', role = 'user' } = {}) {
  return { name, role };
}

createUser({ name: 'Bob' });  // { name: 'Bob', role: 'user' }
createUser();                  // { name: 'Anonymous', role: 'user' }

Le = {} à la fin fournit un objet vide par défaut pour que la fonction puisse être appelée sans aucun argument.

Ce pattern est extrêmement courant en JavaScript moderne, surtout pour les fonctions qui acceptent des objets de configuration avec de nombreuses propriétés optionnelles. Cela rend la signature de la fonction auto-documentée.

Exemples de destructuration

html

<div id="output"></div>

<script>
  // Array destructuring
  const colors = ['red', 'green', 'blue', 'yellow'];
  const [primary, secondary, ...others] = colors;

  // Object destructuring
  const book = {
    title: 'JavaScript Guide',
    author: 'MDN',
    year: 2024,
    tags: ['programming', 'web']
  };
  const { title, author, year, tags: [firstTag] } = book;

  // Function parameter destructuring
  const describe = ({ title, author }) => `${title} by ${author}`;

  const output = document.getElementById('output');
  output.innerHTML = `
    <p>Primary: ${primary}, Secondary: ${secondary}</p>
    <p>Others: [${others}]</p>
    <p>Book: ${title} (${year})</p>
    <p>Author: ${author}</p>
    <p>First tag: ${firstTag}</p>
    <p>Description: ${describe(book)}</p>
  `;
</script>

Que contient `a` après `const { x: a } = { x: 10 }` ?

Destructuration

Destructuration de tableaux

Destructuration d'objets

Destructuration dans les fonctions

Exemples de destructuration

Prêt à pratiquer ?