8.1 Destructuration des objets
La destructuration en JavaScript — c'est une syntaxe qui permet de déballer des valeurs à partir de tableaux ou des propriétés d'objets dans des variables distinctes. Ça rend le code plus propre et plus lisible. Dans cette conférence, nous allons examiner en détail la destructuration des objets et des tableaux, ainsi que divers exemples et leur application.
1. Syntaxe de base
La destructuration des objets permet d'extraire les valeurs des propriétés d'un objet et de les attribuer à des variables :
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // Affichera : John
console.log(age); // Affichera : 30
console.log(isStudent); // Affichera : false
2. Attribution à de nouvelles variables
Il est possible d'attribuer les valeurs des propriétés d'un objet à des variables avec d'autres noms :
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // Affichera : John
console.log(personAge); // Affichera : 30
3. Valeurs par défaut
Si une propriété n'existe pas dans l'objet, on peut définir des valeurs par défaut :
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // Affichera : true
4. Destructuration imbriquée
On peut extraire des valeurs des objets imbriqués :
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // Affichera : New York
console.log(country); // Affichera : USA
5. Destructuration dans les paramètres de fonction
La destructuration peut être utilisée dans les paramètres de fonction :
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // Affichera : Hello, my name is John and I am 30 years old.
8.2 Destructuration des tableaux
1. Syntaxe de base
La destructuration des tableaux permet d'extraire les valeurs des éléments d'un tableau et de les attribuer à des variables :
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // Affichera : apple
console.log(second); // Affichera : banana
console.log(third); // Affichera : cherry
2. Sauter des éléments
On peut sauter des éléments du tableau qu'il n'est pas nécessaire d'extraire :
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // Affichera : apple
console.log(third); // Affichera : cherry
3. Valeurs par défaut
On peut définir des valeurs par défaut pour les éléments du tableau :
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // Affichera : banana
4. Destructuration imbriquée
On peut extraire des valeurs des tableaux imbriqués :
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // Affichera : 2
console.log(three); // Affichera : 3
5. Destructuration dans les paramètres de fonction
La destructuration peut être utilisée dans les paramètres de fonction pour les tableaux :
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // Affichera : John Doe
8.3 Exemples d'application de la destructuration
1. Échange de valeurs de variables
La destructuration permet d'échanger facilement les valeurs des variables :
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Affichera : 2
console.log(b); // Affichera : 1
2. Extraction de données d'objets
La destructuration simplifie l'extraction de données à partir d'objets, comme dans une réponse API :
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // Affichera : John Doe
console.log(email); // Affichera : john@example.com
3. Paramètres par défaut dans les fonctions
La destructuration permet de définir facilement des valeurs par défaut pour les paramètres de fonctions :
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// Affichera : { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// Affichera : { name: 'Anonymous', age: 0, isAdmin: false }
4. Tableaux et fonctions
La destructuration simplifie le travail avec les tableaux, surtout lors de l'utilisation des méthodes de tableaux :
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Affichera : 1
console.log(second); // Affichera : 2
console.log(rest); // Affichera : [3, 4, 5]
GO TO FULL VERSION