0 XP
?
Débutant40 min25 XP

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 this lexicalement 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/5
📝 Pseudo-code
1const personne = { nom: "Alice", age: 25, ville: "Paris" };
2console.log(personne.nom);
3personne.email = "alice@mail.com";
4const { nom, age } = personne;
5console.log(nom);
⚙️ Exécution
📦 Mémoire
personne
{ nom: "Alice", age: 25, ville: "Paris" }
🔀 Flux d'exécution
objet créé
3
Création de l'objet

On 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.