Extraire, renommer, et manipuler avec élégance
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Maîtriser le destructuring d'objets
const { a, b } = obj
2. Utiliser des valeurs par défaut
{ prop = valeur }
3. Renommer des variables
{ prop: nouveauNom }
4. Manipuler des objets imbriqués
Accéder en profondeur
5. Destructuring dans les paramètres de fonction
Pattern très courant
Rappel du destructuring de tableau
Transition vers les objets
Destructuring basique
const { a, b } = obj - le nom compte, pas l'ordre
Valeurs par défaut et renommage
{ prop: nouveauNom, autre = 0 }
Objets imbriqués
Accéder avec des dots, déstructurer en profondeur
Destructuring dans les paramètres
Pattern très courant dans les fonctions
Rest operator sur les objets
{ id, ...reste } = obj
Vous avez déjà vu le destructuring de tableaux (S05-J4)
const tableau = ['a', 'b', 'c'];
const [premier, deuxieme] = tableau;
// premier = 'a', deuxieme = 'b'
Avec les tableaux, c'est la POSITION qui compte
Avec les objets, c'est le NOM qui compte!
Tableau
const [a, b] = [1, 2];
// a = 1 (position 0)
// b = 2 (position 1)
L'ordre compte!
Objet
const { b, a } = { a: 1, b: 2 };
// a = 1 (propriété "a")
// b = 2 (propriété "b")
Le nom compte, pas l'ordre!
Avec les objets, vous pouvez extraire les propriétés dans n'importe quel ordre!
Extraire des propriétés en une seule ligne
const { propriete } = objet;
const utilisateur = {
nom: 'Marie',
age: 28,
ville: 'Paris'
};
const { nom, age } = utilisateur;
// Résultat :
nom = 'Marie'
age = 28
Le nom de la variable doit correspondre au nom de la propriété
const utilisateur = { nom: 'Marie', age: 28 };
const { age, nom } = utilisateur; // Ordre inversé!
// Même résultat :
nom = 'Marie'
age = 28
Contrairement aux tableaux, l'ordre n'a aucune importance
const produit = {
id: 123,
nom: 'Laptop',
prix: 999,
stock: 50
};
const { nom, prix } = produit;
// On ignore id et stock
On peut choisir d'extraire seulement les propriétés qui nous intéressent
Gérer les propriétés manquantes
{ propriete = valeurParDefaut }
const config = { theme: 'dark' };
const { theme, langue = 'fr' } = config;
// Résultat :
theme = 'dark' // présent dans l'objet
langue = 'fr' // absent, utilise la valeur par défaut
Si la propriété n'existe pas, la valeur par défaut est utilisée
Donner un nouveau nom à la propriété extraite
{ propriete: nouveauNom }
const api = { user_name: 'Jean', user_id: 42 };
const { user_name: nom, user_id: id } = api;
// Résultat :
nom = 'Jean' // pas user_name!
id = 42 // pas user_id!
Très utile pour les APIs en snake_case!
const { user_name: nom, user_age: age = 18 } = utilisateur;
// Syntaxe : propriété: nouveauNom = valeurParDefaut
user_name
Propriété source
nom
Nouveau nom
= 18
Valeur par défaut
Déstructurer en profondeur
Accéder aux propriétés dans des objets... dans des objets!
const utilisateur = {
nom: 'Marie',
adresse: {
ville: 'Paris',
pays: 'France'
}
};
const ville = utilisateur.adresse.ville;
// 'Paris'
C'est bien, mais on peut faire mieux avec le destructuring!
const { adresse: { ville } } = utilisateur;
// Résultat :
ville = 'Paris'
Attention : adresse n'est PAS créée comme variable!
Seule ville est extraite
const { adresse: { ville: maVille } } = utilisateur;
// Résultat :
maVille = 'Paris'
On peut combiner l'accès imbriqué avec le renommage!
const reponse = {
status: 200,
data: {
user: {
id: 42,
profile: { name: 'Alice' }
}
}
};
const { data: { user: { profile: { name } } } } = reponse;
// name = 'Alice'
Pattern très courant en JavaScript moderne
Rendre les appels de fonction plus lisibles
L'ordre des arguments compte
function creerUtilisateur(nom, age, ville, pays) {
// ...
}
creerUtilisateur('Marie', 28, 'Paris', 'France');
Problème : Quel argument correspond à quoi? L'ordre est obligatoire.
Un seul paramètre objet, destructuré directement
function creerUtilisateur({ nom, age, ville, pays }) {
// nom, age, ville, pays sont directement disponibles
}
creerUtilisateur({
nom: 'Marie',
age: 28,
ville: 'Paris'
});
L'ordre n'importe plus! Le code est plus lisible.
function creerUtilisateur({
nom,
age = 18,
ville = 'Paris'
} = {}) {
// ...
}
age = 18
Valeur par défaut si non fournie
= {}
Objet vide par défaut si aucun argument
function Card({ title, description, imageUrl }) {
return (
<div className="card">
<img src={imageUrl} />
<h2>{title}</h2>
<p>{description}</p>
</div>
);
}
// Utilisation :
<Card title="Titre" description="Desc" />
Pattern standard en React, Vue, et autres frameworks!
Récupérer le reste des propriétés
{ id, ...reste } = obj
const produit = { id: 1, nom: 'Laptop', prix: 999 };
const { id, ...reste } = produit;
// Résultat :
id = 1
reste = { nom: 'Laptop', prix: 999 }
...reste contient toutes les autres propriétés
Problème : On veut envoyer des données utilisateur SANS le mot de passe
const user = {
id: 42,
nom: 'Alice',
motDePasse: 'secret123'
};
const { motDePasse, ...safeUser } = user;
safeUser = { id: 42, nom: 'Alice' }
Le mot de passe est exclu!
Erreurs fréquentes à éviter
Confusion : vs =
Objets imbriqués
undefined
Renommage avec :
{ prop: nouveauNom }
Change le NOM de la variable
Valeur par défaut avec =
{ prop = valeur }
Donne une valeur si MANQUANTE
// Les deux combinés :
{ prop: nouveauNom = valeurParDefaut }
Dans { adresse: { ville } }, adresse N'EST PAS créée comme variable!
const { adresse: { ville } } = user;
console.log(ville); // 'Paris' OK
console.log(adresse); // ReferenceError!
Seule ville est extraite, pas adresse
Tenter de déstructurer undefined ou null provoque une erreur!
const { nom } = undefined;
// TypeError: Cannot destructure property 'nom' of undefined
Solution : Vérifier que l'objet existe avant
const { nom } = user || {};
1. Confondre : (renommage) et = (valeur par défaut)
2. Oublier que dans { adresse: { ville } }, adresse n'est pas créée
3. Tenter de déstructurer undefined sans protection
Conseil : Testez toujours vos destructuring dans la console!
Contrairement aux tableaux, c'est le NOM qui compte, pas la position
{ prop: nouveauNom }
Renommage
{ prop = valeur }
Valeur par défaut
Le destructuring dans les paramètres rend les appels plus lisibles
Le pattern rest pour retirer des propriétés : { motDePasse, ...safe } = user
const { a, b } = obj
Extraction par nom
{ prop: nom }
Renommage
{ prop = 0 }
Valeur par défaut
{ ...reste }
Rest operator
Le destructuring = code plus propre et plus lisible!
1. Extraction basique
Extraire nom et age de l'objet utilisateur
2. Renommage
API renvoie user_name, renommer en nom
3. Objet imbriqué
Extraire la ville depuis user.adresse.ville
4. Fonction avec destructuring
Créer une fonction qui accepte { nom, age = 18 }
5. Rest operator
Retirer le mot de passe d'un objet utilisateur
Le destructuring est un outil puissant pour un code plus élégant
Prochaine leçon : Spread operator et merging d'objets