À propos de ce cours
La déstructuration et l'opérateur spread sur les objets. Dans cette leçon du cours JavaScript, vous apprendrez à : extraire des propriétés dans des variables par déstructuration ; renommer, donner des valeurs par défaut et récupérer le reste ; copier et fusionner des objets avec l'opérateur spread ; distinguer copie superficielle et copie profonde.
Chapitre 9 — Les objets littéraux, JSON et les collections · La déstructuration et l'opérateur spread sur les objets
🎯 Objectifs de la leçon
• extraire des propriétés dans des variables par déstructuration ;
• renommer, donner des valeurs par défaut et récupérer le reste ;
• copier et fusionner des objets avec l'opérateur spread ;
• distinguer copie superficielle et copie profonde.
• extraire des propriétés dans des variables par déstructuration ;
• renommer, donner des valeurs par défaut et récupérer le reste ;
• copier et fusionner des objets avec l'opérateur spread ;
• distinguer copie superficielle et copie profonde.
1. La déstructuration
La déstructuration extrait plusieurs propriétés d'un objet en une seule instruction : const { nom, groupe } = stagiaire
crée deux variables nom et groupe. On peut renommer (age: annees), donner une valeur par défaut (email = "…"),
descendre dans un objet imbriqué et regrouper le reste avec .... La même syntaxe avec des crochets fonctionne pour les tableaux (leçon 8.7).
const stagiaire = {
nom: "Karim Benali",
age: 20,
groupe: "DEV102",
adresse: { ville: "Fès", quartier: "Agdal" },
notes: { html: 12, js: 15 },
};
// 1. Déstructurer : extraire des propriétés dans des variables du même nom
const { nom, groupe } = stagiaire;
console.log(nom, groupe);
// 2. Renommer, valeur par défaut, objet imbriqué
const { age: annees, email = "non renseigné", adresse: { ville } } = stagiaire;
console.log(annees, email, ville);
// 3. Le reste des propriétés
const { notes, ...identite } = stagiaire;
console.log("identite :", Object.keys(identite).join(", "));
// 4. Déstructurer dans les paramètres d'une fonction
function carte({ nom, groupe, adresse: { ville } }) {
return `${nom} — ${groupe} — ${ville}`;
}
console.log(carte(stagiaire));
// 5. Spread : copier et fusionner des objets
const reglagesParDefaut = { theme: "clair", langue: "fr", notifications: true };
const reglagesUtilisateur = { theme: "sombre" };
const reglages = { ...reglagesParDefaut, ...reglagesUtilisateur }; // le dernier l'emporte
console.log(reglages);
// 6. Modifier sans toucher l'original (immutabilité)
const misAJour = { ...stagiaire, groupe: "DEV201" };
console.log("original :", stagiaire.groupe, "| copie :", misAJour.groupe);
// 7. Attention : le spread copie seulement le premier niveau
misAJour.adresse.ville = "Meknès";
console.log("ville dans l'original après modification de la copie :", stagiaire.adresse.ville);
const copieProfonde = structuredClone(stagiaire);
copieProfonde.notes.js = 20;
console.log("note js de l'original après structuredClone :", stagiaire.notes.js);
// 8. Échanger deux variables
let premier = "A", second = "B";
[premier, second] = [second, premier];
console.log(premier, second);Résultat dans la console
Karim Benali DEV102
20 non renseigné Fès
identite : nom, age, groupe, adresse
Karim Benali — DEV102 — Fès
{ theme: 'sombre', langue: 'fr', notifications: true }
original : DEV102 | copie : DEV201
ville dans l'original après modification de la copie : Meknès
note js de l'original après structuredClone : 15
B A
2. L'opérateur spread
{ ...a }crée un nouvel objet avec les propriétés dea.{ ...defaut, ...choix }fusionne: en cas de clé commune, la dernière valeur l'emporte. Idéal pour des réglages par défaut.{ ...stagiaire, groupe: "DEV201" }produit une version modifiée sans toucher l'original. C'est le principe de l'immutabilité, utilisé par la plupart des frameworks (React, Vue…).
⚠️ Attention
Le spread ne copie que le premier niveau:
Le spread ne copie que le premier niveau:
misAJour.adresse est le même objet que stagiaire.adresse, d'où la ville
modifiée dans l'original. Pour une copie complète, utilisez structuredClone(objet) (ou { ...a, adresse: { ...a.adresse } } pour un niveau de plus).ℹ️ À retenir
•
• La déstructuration fonctionne aussi dans les paramètres d'une fonction.
•
• Spread = copie superficielle ;
•
const { a, b: autreNom, c = 0, ...reste } = objet;• La déstructuration fonctionne aussi dans les paramètres d'une fonction.
•
{ ...a, ...b } copie et fusionne ; la dernière valeur l'emporte.• Spread = copie superficielle ;
structuredClone = copie profonde.🛠 Activité 4 — Le profil utilisateur
Mission : Un site enregistre le profil d'un utilisateur : identité, adresse (objet imbriqué) et préférences d'affichage.
Questions pour avancer (répondez dans votre compte rendu, puis appliquez dans votre projet) :
- Extrayez en une ligne le prénom, le nom et la ville du profil. Comment gérez-vous un profil qui n'a pas de téléphone ?
- Écrivez une fonction
etiquette({ prenom, nom, ville }). Que se passe-t-il si on l'appelle sans argument ? Corrigez avec une valeur par défaut. - Séparez le mot de passe du reste du profil avec la syntaxe du reste, pour envoyer le profil au navigateur sans le mot de passe.
- Fusionnez des préférences par défaut
{ theme, langue, taillePolice }avec celles choisies par l'utilisateur. Dans quel ordre écrivez-vous les deux objets ? - Créez une version du profil avec une nouvelle ville, sans modifier l'original. Vérifiez que l'original est intact… y compris son adresse. Corrigez si besoin.
- Échangez les valeurs de deux variables
gaucheetdroiteen une seule ligne.
Je vérifie / je rends :
- ☐ Le script et l'explication de la question 5.
← Parcourir un objet : for…in, Object.keys, Object.values et Object.entriesLe format JSON : JSON.stringify et JSON.parse →