Objectifs de cette leçon
- Créer des objets littéraux
- Destructurer les objets
- Utiliser le spread operator
Objets en JavaScript 🗂️
Les objets sont la structure de donnees la plus versatile de JavaScript. Ils stockent des donnees sous forme de paires cle-valeur.
1. Creation d'un objet 🏗️
// Notation litterale (la plus courante) const personne = { nom: "Alice", age: 25, ville: "Paris" }; // Constructeur Object const personne2 = new Object(); personne2.nom = "Bob"; // Object.create (heritage) const prototype = { saluer() { return `Bonjour, je suis ${this.nom}`; } }; const alice = Object.create(prototype); alice.nom = "Alice"; console.log(alice.saluer()); // "Bonjour, je suis Alice"
2. Acceder aux proprietes 🔑
const personne = { nom: "Alice", age: 25, "prenom complet": "Alice Martin" }; // Notation avec point console.log(personne.nom); // "Alice" // Notation avec crochets (necessaire pour les cles speciales) console.log(personne["age"]); // 25 console.log(personne["prenom complet"]); // "Alice Martin" // Acceder dynamiquement const propriete = "nom"; console.log(personne[propriete]); // "Alice" // Optional chaining (?.) const utilisateur = { adresse: { ville: "Paris" } }; console.log(utilisateur?.adresse?.ville); // "Paris" console.log(utilisateur?.telephone?.codePostal); // undefined (pas d'erreur)
3. Modifier et ajouter des proprietes ✏️
const personne = { nom: "Alice" }; // Modifier personne.nom = "Bob"; console.log(personne); // { nom: "Bob" } // Ajouter personne.age = 25; personne["ville"] = "Paris"; console.log(personne); // { nom: "Bob", age: 25, ville: "Paris" } // Supprimer delete personne.ville; console.log(personne); // { nom: "Bob", age: 25 } // Verifier si une propriete existe console.log("nom" in personne); // true console.log("ville" in personne); // false console.log(personne.hasOwnProperty("age")); // true
4. Les methodes d'objet 📋
const personne = { nom: "Alice", age: 25, // Methode avec syntaxe courte saluer() { return `Bonjour, je suis ${this.nom}`; }, // Methode avec expression presenter: function() { return `${this.nom}, ${this.age} ans`; }, // Arrow function — attention au this ! direAge: () => { // this ne referencera PAS l'objet ici ! return this.age; // undefined } }; console.log(personne.saluer()); // "Bonjour, je suis Alice" console.log(personne.presenter()); // "Alice, 25 ans"
⚠️ Ne jamais utiliser les arrow functions comme methodes d'objet. Le
thislexicalement lie au contexte parent, pas a l'objet.
5. La destructuration d'objets 📦
const personne = { nom: "Alice", age: 25, ville: "Paris", pays: "France" }; // Extraire des proprietes const { nom, age } = personne; console.log(nom); // "Alice" console.log(age); // 25 // Renommer const { nom: prenom, age: agePersonne } = personne; console.log(preom); // "Alice" console.log(agePersonne); // 25 // Valeur par defaut const { nom, telephone = "Non renseigne" } = personne; console.log(telephone); // "Non renseigne" // Rest const { nom: n, ...reste } = personne; console.log(reste); // { age: 25, ville: "Paris", pays: "France" }
6. Le spread operator avec les objets 🌟
const personne1 = { nom: "Alice", age: 25 }; const personne2 = { age: 30, ville: "Paris" }; // Fusionner const fusion = { ...personne1, ...personne2 }; console.log(fusion); // { nom: "Alice", age: 30, ville: "Paris" } // Copier const copie = { ...personne1 }; console.log(copie); // { nom: "Alice", age: 25 } // Ajouter/modifier const avecVille = { ...personne1, ville: "Lyon" }; const avecAgeModifie = { ...personne1, age: 30 };
⚠️ Le spread fait une copie superficielle (shallow copy). Les objets imbriques restent des references :
const original = { adresse: { ville: "Paris" } }; const copie = { ...original }; copie.adresse.ville = "Lyon"; console.log(original.adresse.ville); // "Lyon" — l'original est modifie !
7. Les methodes statiques de Object 🧰
const personne = { nom: "Alice", age: 25 }; // Object.keys — toutes les cles console.log(Object.keys(personne)); // ["nom", "age"] // Object.values — toutes les valeurs console.log(Object.values(personne)); // ["Alice", 25] // Object.entries — paires [cle, valeur] console.log(Object.entries(personne)); // [["nom", "Alice"], ["age", 25]] // Object.assign — copier/fusionner (ancien, preferer spread) const copie = Object.assign({}, personne); // Object.freeze — empecher les modifications const fige = Object.freeze({ x: 1, y: 2 }); fige.x = 10; // Pas d'erreur mais rien ne se passe console.log(fige.x); // 1 // Object.sealed — empecher ajout/suppression const scelle = Object.seal({ x: 1, y: 2 }); scelle.x = 10; // ✅ Modifier OK scelle.z = 3; // ❌ Ajouter impossible delete scelle.x; // ❌ Supprimer impossible
8. Parcourir un objet 🔍
const personne = { nom: "Alice", age: 25, ville: "Paris" }; // Boucle for...in for (const cle in personne) { console.log(`${cle}: ${personne[cle]}`); } // Object.entries + forEach Object.entries(personne).forEach(([cle, valeur]) => { console.log(`${cle}: ${valeur}`); }); // Object.fromEntries — creer un objet depuis des paires const nouvellesPaires = [["nom", "Bob"], ["age", 30]]; const nouvelObjet = Object.fromEntries(nouvellesPaires); console.log(nouvelObjet); // { nom: "Bob", age: 30 }
9. Mutabilite et immutabilite 🛡️
// Mutable par defaut const personne = { nom: "Alice" }; personne.nom = "Bob"; // OK // Pour creer une copie immutable avec spread const personneOriginale = { nom: "Alice", age: 25 }; const personneCopie = { ...personneOriginale, age: 30 }; // Pour un deep copy (objets imbriques) const original = { adresse: { ville: "Paris" } }; const deepCopy = structuredClone(original); // ES2022 deepCopy.adresse.ville = "Lyon"; console.log(original.adresse.ville); // "Paris" — intact
10. Pattern: objet comme dictionnaire 📖
// Compteur d'occurrences const mots = ["bonjour", "salut", "bonjour", "hello", "salut", "bonjour"]; const compte = {}; for (const mot of mots) { compte[mot] = (compte[mot] || 0) + 1; } console.log(compte); // { bonjour: 3, salut: 2, hello: 1 } // Version moderne avec reduce const compte2 = mots.reduce((acc, mot) => { acc[mot] = (acc[mot] || 0) + 1; return acc; }, {});
11. Exercices pour toi 🎯
Exercice 1 : Fusionner des objets
Cree une fonction fusionner profond(obj1, obj2) qui fusionne deux objets, y compris les objets imbriques.
Exercice 2 : Inverser cles-valeurs Cree une fonction qui inverse les cles et valeurs d'un objet :
inverser({ a: 1, b: 2 }) // { 1: "a", 2: "b" }
Exercice 3 : Grouper par propriete Groupe un tableau de personnes par ville :
const personnes = [ { nom: "Alice", ville: "Paris" }, { nom: "Bob", ville: "Lyon" }, { nom: "Charlie", ville: "Paris" } ]; // Resultat : { Paris: [Alice, Charlie], Lyon: [Bob] }
⚡ Simulateur — Objets
Étape 1/5On crée un objet avec des paires clé-valeur entre accolades. Chaque clé (propriété) est séparée par une virgule. Les objets JS sont similaires aux dictionnaires Python.