Destructuration

Destructuration en JavaScript

Notions théoriques

La destructuration est une fonctionnalité pratique de JavaScript qui permet d'extraire des valeurs de données emballées dans des objets ou des tableaux.

C'est une manière élégante d'extraire les propriétés d'un objet ou les éléments d'un tableau en une seule instruction.

Destructuration d'objets

Pour les objets, la destructuration permet d'extraire les propriétés d'un objet directement dans des variables.

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20
};

let { nom, prenom, age } = etudiant;

console.log(nom); // Affiche "Dupont"
console.log(prenom); // Affiche "Jean"
console.log(age); // Affiche 20

Destructuration de tableaux

Pour les tableaux, la destructuration permet d'extraire les éléments d'un tableau dans des variables.

let nombres = [1, 2, 3];

let [un, deux, trois] = nombres;

console.log(un); // Affiche 1
console.log(deux); // Affiche 2
console.log(trois); // Affiche 3

Exemple pratique

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20,
    notes: [15, 12, 14, 16, 13]
};

let { nom, prenom, age, notes } = etudiant;

console.log(nom); // Affiche "Dupont"
console.log(prenom); // Affiche "Jean"
console.log(age); // Affiche 20

let [note1, note2, note3, note4, note5] = notes;

console.log(note1); // Affiche 15
console.log(note2); // Affiche 12
console.log(note3); // Affiche 14
console.log(note4); // Affiche 16
console.log(note5); // Affiche 13

Test de mémorisation/compréhension

Qu'est-ce que la destructuration en JavaScript ?

C'est une fonctionnalité qui permet de créer des objets ou des tableaux de façon simple et rapide, en une seule commande.

C'est une fonctionnalité qui permet de détruire des objets ou des tableaux de façon simple et rapide, en une seule commande.

C'est une fonctionnalité qui permet d'extraire des valeurs de données emballées dans des objets ou des tableaux.

Aucune des réponses précédentes.

Comment peut-on extraire les propriétés d'un objet en JavaScript ?

En utilisant la méthode extract().

En utilisant la destructuration.

En utilisant la méthode pull().

Aucune des réponses précédentes.

Comment peut-on extraire les éléments d'un tableau en JavaScript ?

En utilisant la méthode extract().

En utilisant la destructuration.

En utilisant la méthode pull().

Aucune des réponses précédentes.

---

TP pour réfléchir et résoudre des problèmes

Dans ce TP, nous allons utiliser la destructuration pour extraire les propriétés ou éléments d'objets et de tableaux.

1. Créez un objet etudiant qui contient les propriétés nom, prenom, age et notes (5 notes entre 1 et 20).

   Une solution possible

   let etudiant = {
       nom: "Dupont",
       prenom: "Jean",
       age: 20,
       notes: [15, 12, 14, 16, 13]
   };

2. Utilisez la destructuration pour extraire les propriétés nom, prenom, age et notes de l'objet etudiant dans des variables.

   Une solution possible

   let { nom, prenom, age, notes } = etudiant;

3. Affichez les valeurs des variables nom, prenom et age sur la console, avec console.log().

   Une solution possible

   console.log(nom); // Affiche "Dupont"
   console.log(prenom); // Affiche "Jean"
   console.log(age); // Affiche 20

4. Utilisez la destructuration pour extraire les 5 notes du tableau notes dans des variables.

   Une solution possible

   let [note1, note2, note3, note4, note5] = notes;

5. Affichez les valeurs des variables de notes sur la console, avec console.log().

   Une solution possible

   console.log(note1); // Affiche 15
   console.log(note2); // Affiche 12
   console.log(note3); // Affiche 14
   console.log(note4); // Affiche 16
   console.log(note5); // Affiche 13

---

Le programme complet

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20,
    notes: [15, 12, 14, 16, 13]
};

let { nom, prenom, age, notes } = etudiant;

console.log(nom); // Affiche "Dupont"
console.log(prenom); // Affiche "Jean"
console.log(age); // Affiche 20

let [note1, note2, note3, note4, note5] = notes;

console.log(note1); // Affiche 15
console.log(note2); // Affiche 12
console.log(note3); // Affiche 14
console.log(note4); // Affiche 16
console.log(note5); // Affiche 13

---