Skip to content

Déstructuration

La déstructuration est une fonctionnalité en JavaScript qui permet d'extraire des valeurs d'objets ou de tableaux et de les assigner à des variables distinctes. Cette syntaxe rend le code plus propre et plus lisible, et peut également simplifier la manipulation de données complexes.

Déstructuration d'Objets

Lorsque vous déstructurez un objet, vous créez des variables qui correspondent aux noms des propriétés de l'objet.

javascript
let personne = { nom: "Alice", age: 25 };

let { nom, age } = personne;

console.log(nom); // "Alice"
console.log(age); // 25

Vous pouvez également assigner des noms de variables différents des noms de propriétés de l'objet :

javascript
let { nom: nomPersonne, age: agePersonne } = personne;

console.log(nomPersonne); // "Alice"

Déstructuration de Tableaux

La déstructuration de tableaux fonctionne de manière similaire, mais avec des indices de tableau au lieu de noms de propriétés.

javascript
let nombres = [1, 2, 3];
let [premier, deuxieme, troisieme] = nombres;

console.log(premier); // 1
console.log(deuxieme); // 2

Déstructuration et Reste de Paramètres

La déstructuration peut être combinée avec l'opérateur de reste pour regrouper le reste des éléments dans un tableau ou les propriétés restantes dans un objet.

javascript
let [premierNum, ...autres] = nombres;
console.log(premierNum); // 1
console.log(autres); // [2, 3]

let { nom, ...reste } = personne;
console.log(nom); // "Alice"
console.log(reste); // { age: 25 }

Déstructuration dans les Paramètres de Fonction

La déstructuration est souvent utilisée dans les paramètres de fonction pour extraire les valeurs des objets passés en tant qu'arguments.

javascript
function afficher({ nom, age }) {
    console.log(`${nom} a ${age} ans.`);
}

afficher(personne); // "Alice a 25 ans."

Avantages

  • Lisibilité : La déstructuration rend le code plus lisible et clair, en particulier lorsqu'il s'agit d'extraire plusieurs propriétés d'un objet.
  • Simplicité : Elle simplifie la manipulation et l'accès aux données, en particulier dans les structures complexes.
  • Réduction de Code : Réduit la nécessité d'écrire des accès répétitifs aux propriétés d'un objet ou aux éléments d'un tableau.

Abonnez-vous à la newsletter

En juillet, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !