📦

LES OBJETS EN JAVASCRIPT

Version Ultra-Détaillée - Définitions & Explications Complètes

📖 1. INTRODUCTION AUX OBJETS

Définition : Un objet en JavaScript est une collection de propriétés (clés et valeurs). C'est une structure de données qui permet de regrouper des informations et des fonctionnalités sur une entité.

Métaphore : Un objet est comme un dossier dans une armoire :

Clé : L'étiquette du dossier (ex: "nom", "âge", "ville").
Valeur : Le contenu du dossier (ex: "Jean", 30, "Paris").
Méthode : Une action que le dossier peut effectuer (ex: "afficher" le contenu).

Pourquoi les objets sont-ils importants ?

Ils permettent de structurer des données complexes.
Ils sont partout en JavaScript (DOM, API, bibliothèques).
Ils sont la base de la programmation orientée objet en JS.

🛠️ 2. CRÉATION D'OBJETS

2.1 Littéral d'Objet (Object Literal)

Définition : Le littéral d'objet est la façon la plus simple et la plus courante de créer un objet. On utilise des accolades { } pour définir les propriétés.

Syntaxe :

const nomObjet = { propriete1: valeur1, propriete2: valeur2, propriete3: valeur3 };

// Exemple d'objet représentant une personne

const personne = { nom: "Jean Dupont", age: 30, ville: "Paris", estEtudiant: false, interets: ["Lecture", "Musique", "Sport"] };

console.log(personne);

// Affiche : { nom: "Jean Dupont", age: 30, ville: "Paris", ... }

2.2 Constructeur new Object()

Définition : On peut créer un objet en utilisant le constructeur new Object(). Cette méthode est moins utilisée que le littéral.

const personne = new Object();

personne.nom = "Jean Dupont";

personne.age = 30;

personne.ville = "Paris";

console.log(personne);

// { nom: "Jean Dupont", age: 30, ville: "Paris" }

2.3 Fonction Constructeur

Définition : Une fonction constructeur est une fonction qui permet de créer plusieurs objets du même "type". Par convention, le nom d'une fonction constructeur commence par une majuscule.

Métaphore : Une fonction constructeur est comme un moule à biscuits. Avec un seul moule, on peut créer des biscuits identiques (mais avec des ingrédients différents).

// Fonction constructeur

function Personne(nom, age, ville) { this.nom = nom; this.age = age; this.ville = ville; this.direBonjour = function() { return `Bonjour, je suis ${this.nom}`; }; }

// Création d'objets avec le constructeur

const jean = new Personne("Jean", 30, "Paris");

const marie = new Personne("Marie", 25, "Lyon");

console.log(jean.direBonjour()); // "Bonjour, je suis Jean"

console.log(marie.direBonjour()); // "Bonjour, je suis Marie"

2.4 Object.create()

Définition : Object.create() est une méthode qui permet de créer un nouvel objet en utilisant un objet existant comme prototype.

// Objet prototype

const animal = { type: "Animal", faireDuBruit: function() { console.log("L'animal fait du bruit"); } };

// Nouvel objet avec animal comme prototype

const chat = Object.create(animal);

chat.nom = "Mimi";

chat.faireDuBruit = function() { console.log("Miaou !"); };

chat.faireDuBruit(); // "Miaou !"

console.log(chat.type); // "Animal" (hérité du prototype)

🏷️ 3. PROPRIÉTÉS

Définition : Une propriété est une association entre un nom (clé) et une valeur. La valeur peut être de n'importe quel type (nombre, chaîne, booléen, tableau, fonction, etc.).

3.1 Accès aux Propriétés

Deux manières :

Notation pointée : objet.propriete
Notation crochets : objet['propriete']

const personne = { nom: "Jean", age: 30, "nom complet": "Jean Dupont" };

// Notation pointée

console.log(personne.nom); // "Jean"

console.log(personne.age); // 30

// Notation crochets (utile pour les noms avec espaces)

console.log(personne["nom complet"]); // "Jean Dupont"

// Avec une variable (utile pour les clés dynamiques)

const cle = "age";

console.log(personne[cle]); // 30

3.2 Ajouter et Modifier des Propriétés

Définition : On peut ajouter de nouvelles propriétés ou modifier des propriétés existantes simplement en assignant une valeur.

const voiture = { marque: "Tesla", modele: "Model 3" };

// Ajouter une propriété

voiture.annee = 2023;

// Modifier une propriété

voiture.modele = "Model Y";

// Ajouter une méthode

voiture.demarrer = function() { console.log("Vroum !"); };

console.log(voiture); // { marque: "Tesla", modele: "Model Y", annee: 2023, demarrer: f }

3.3 Supprimer des Propriétés (delete)

Définition : L'opérateur delete permet de supprimer une propriété d'un objet.

const personne = { nom: "Jean", age: 30, ville: "Paris" };

// Supprimer une propriété

delete personne.age;

console.log(personne); // { nom: "Jean", ville: "Paris" }

console.log(personne.age); // undefined

3.4 Vérifier l'Existence d'une Propriété

Trois méthodes :

in : Vérifie si la propriété existe (y compris dans le prototype).
hasOwnProperty() : Vérifie si la propriété appartient à l'objet lui-même (pas au prototype).
Comparaison avec undefined : Vérifie si la valeur est définie.

const personne = { nom: "Jean", age: 30 };

// Opérateur in

console.log("nom" in personne); // true

console.log("ville" in personne); // false

// hasOwnProperty()

console.log(personne.hasOwnProperty("nom")); // true

// Comparaison avec undefined

console.log(personne.nom !== undefined); // true

⚙️ 4. MÉTHODES

Définition : Une méthode est une propriété dont la valeur est une fonction. Elle permet à l'objet d'effectuer des actions sur lui-même.

Métaphore : Une méthode est comme une action que l'objet peut accomplir. Par exemple, une voiture peut "démarrer" (méthode), "freiner" (méthode), "klaxonner" (méthode).

4.1 Définir une Méthode

Différentes syntaxes :

// Méthode avec function (classique)

const objet = { nom: "Exemple", maMethode: function() { return "Bonjour"; } };

// Méthode avec syntaxe simplifiée (ES6)

const objet = { nom: "Exemple", maMethode() { return "Bonjour"; } };

// Méthode avec fonction fléchée

const objet = { nom: "Exemple", maMethode: () => "Bonjour" };

4.2 Le mot-clé this

Définition : this est un mot-clé qui fait référence à l'objet courant (l'objet qui appelle la méthode). C'est un concept essentiel en JavaScript.

Métaphore : this est comme le mot "moi" dans une conversation. Quand une personne dit "Je m'appelle Jean", le "Je" fait référence à cette personne spécifique. De même, this fait référence à l'objet qui exécute la méthode.

console.log(personne.sePresenter()); // "Bonjour, je suis Jean et j'ai 30 ans"

personne.vieillir();

console.log(personne.age); // 31

⚠️ Piège : Dans les fonctions fléchées, this est hérité du contexte parent (pas de this propre). Dans les fonctions classiques, this dépend de comment la fonction est appelée.

4.3 Getters et Setters

Définition : Les getters (obtenir) et setters (définir) sont des méthodes spéciales qui permettent de contrôler l'accès aux propriétés d'un objet.

Avantages :

Permettent de valider les données avant l'assignation.
Permettent de calculer des valeurs dynamiquement.
Permettent de rendre une propriété en lecture seule.

console.log(personne.nom); // "JEAN" (getter)

personne.age = 25; // Utilise le setter

console.log(personne.anneeNaissance); // 2001 (calcul dynamique)

🔍 5. PARCOURIR LES OBJETS

5.1 for...in

Définition : for...in permet de parcourir toutes les clés (propriétés) d'un objet, y compris celles héritées du prototype.

const personne = { nom: "Jean", age: 30, ville: "Paris" };

for (const cle in personne) { console.log(`${cle}: ${personne[cle]}`); }

// Affiche : "nom: Jean", "age: 30", "ville: Paris"

5.2 Object.keys()

Définition : Object.keys() retourne un tableau contenant les noms des propriétés énumérables de l'objet.

const personne = { nom: "Jean", age: 30, ville: "Paris" };

const cles = Object.keys(personne);

console.log(cles); // ["nom", "age", "ville"]

// Parcourir les clés

cles.forEach(cle => { console.log(`${cle}: ${personne[cle]}`); });

5.3 Object.values()

Définition : Object.values() retourne un tableau contenant les valeurs des propriétés de l'objet.

const personne = { nom: "Jean", age: 30, ville: "Paris" };

const valeurs = Object.values(personne);

console.log(valeurs); // ["Jean", 30, "Paris"]

5.4 Object.entries()

Définition : Object.entries() retourne un tableau de paires [clé, valeur] pour chaque propriété de l'objet.

const personne = { nom: "Jean", age: 30, ville: "Paris" };

const entrees = Object.entries(personne);

console.log(entrees); // [["nom", "Jean"], ["age", 30], ["ville", "Paris"]]

// Parcourir les entrées

entrees.forEach(([cle, valeur]) => { console.log(`${cle}: ${valeur}`); });

5.5 Réassembler un Objet (Object.fromEntries)

Définition : Object.fromEntries() est l'inverse de Object.entries(). Il transforme un tableau de paires [clé, valeur] en un objet.

const entrees = [ ["nom", "Jean"], ["age", 30], ["ville", "Paris"] ];

const personne = Object.fromEntries(entrees);

console.log(personne); // { nom: "Jean", age: 30, ville: "Paris" }

📋 6. COPIE D'OBJETS

Définition : Copier un objet n'est pas aussi simple qu'assigner une variable. Les objets sont stockés par référence, donc une assignation simple crée une référence et non une copie.

6.1 Copie par Référence (Problème)

const original = { nom: "Jean", age: 30 };

// ❌ Copie par référence

const copie = original;

copie.age = 31;

console.log(original.age); // 31 (original modifié !)

// La copie modifie l'original car les deux pointent vers le même objet

6.2 Copie Superficielle (Shallow Copy)

Définition : Une copie superficielle crée un nouvel objet qui copie les propriétés du premier niveau. Les objets imbriqués sont toujours partagés par référence.

// Méthode 1 : Spread Operator (...)

const copie1 = { ...original };

// Méthode 2 : Object.assign()

const copie2 = Object.assign({}, original);

// ⚠️ Problème avec les objets imbriqués

const original2 = { nom: "Jean", adresse: { rue: "Rue de Paris", ville: "Paris" } };

const copie = { ...original2 };

copie.adresse.ville = "Lyon";

console.log(original2.adresse.ville); // "Lyon" (modifié !)

6.3 Copie Profonde (Deep Copy)

Définition : Une copie profonde crée une copie complète de l'objet, y compris tous les objets imbriqués. Les deux objets sont totalement indépendants.

// Méthode 1 : JSON (fonctionne avec les objets simples)

const copie = JSON.parse(JSON.stringify(original));

// Méthode 2 : fonction récursive personnalisée

const copieProfonde = deepCopy(original2);

copieProfonde.adresse.ville = "Lyon";

console.log(original2.adresse.ville); // "Paris" (inchangé)

⚠️ Attention : La méthode JSON ne fonctionne pas avec les fonctions, les dates, les expressions régulières, les symboles, etc. Utilisez structuredClone() pour une copie profonde moderne dans les navigateurs (ES2022).

6.4 structuredClone (Copie Profonde Moderne)

Définition : structuredClone() est une méthode native (ES2022) qui permet de faire une copie profonde d'un objet, en gérant correctement les types complexes (Dates, Map, Set, etc.).

const original = { nom: "Jean", date: new Date(), nombres: [1, 2, 3], adresse: { rue: "Rue de Paris", ville: "Paris" } };

const copie = structuredClone(original);

copie.adresse.ville = "Lyon";

copie.nombres.push(4);

console.log(original.adresse.ville); // "Paris" (inchangé)

console.log(original.nombres); // [1, 2, 3] (inchangé)

📊 7. RÉSUMÉ - LES OBJETS

Concept	Définition	Exemple
Objet	Collection de propriétés (clés/valeurs).	{ nom: "Jean", age: 30 }
Propriété	Association clé → valeur.	nom: "Jean"
Méthode	Fonction attachée à l'objet.	direBonjour() {}
this	Référence à l'objet courant.	this.nom
delete	Supprime une propriété.	delete objet.prop
in	Vérifie l'existence d'une propriété.	"nom" in objet
Object.keys()	Retourne les clés.	Object.keys(objet)
Object.values()	Retourne les valeurs.	Object.values(objet)
Object.entries()	Retourne les paires [clé, valeur].	Object.entries(objet)
Copie superficielle	Copie le premier niveau seulement.	{ ...objet }
Copie profonde	Copie tous les niveaux.	structuredClone(objet)
Getter/Setter	Contrôle l'accès aux propriétés.	get nom() { return this._nom; }

┌─────────────────────────────────────────────────────────────────┐

│ OBJETS - RÉCAPITULATIF │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ CRÉATION │ │

│ │ Littéral → { } new Object() → constructeur │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ PROPRIÉTÉS │ │

│ │ Accès: objet.prop ou objet['prop'] │ │

│ │ Ajout: objet.prop = valeur │ │

│ │ Suppression: delete objet.prop │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ MÉTHODES │ │

│ │ Définition: objet.methode = function() {} │ │

│ │ this → Référence à l'objet courant │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ PARCOURS │ │

│ │ for...in → Object.keys() → Object.values() → entries │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ COPIE │ │

│ │ Shallow (superficielle) → Deep (profonde) │ │

│ │ {...obj} → JSON.parse(JSON.stringify()) → structuredClone │ │

│ └─────────────────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────────────────┘