Chapitre 9 – Les objets en JavaScript

Les objets sont une partie centrale de JavaScript. Ils permettent de structurer, stocker et manipuler des données complexes sous forme de paires clé-valeur. Comprendre le fonctionnement des objets est essentiel pour tout développeur JavaScript, du débutant au confirmé.

1. Création d'un objet et gestion des propriétés

Un objet JavaScript est une collection de propriétés. Chaque propriété est composée :

let utilisateur = {
  prénom: "Alice",
  âge: 28,
  ville: "Paris"
};

Ajouter ou modifier une propriété

utilisateur.email = "alice@mail.com";    // Ajout
utilisateur.âge = 29;                    // Modification

Supprimer une propriété

delete utilisateur.ville;

2. Accès aux propriétés : notation point et crochets

JavaScript propose deux façons d'accéder aux propriétés d'un objet :

Notation par point (recommandée)

console.log(utilisateur.prénom); // "Alice"

Notation par crochets

let clé = "email";
console.log(utilisateur[clé]); // "alice@mail.com"

let bizarre = {
  "nom complet": "Jean Dupont"
};
console.log(bizarre["nom complet"]);

3. Définir des méthodes et comprendre this

let voiture = {
  marque: "Peugeot",
  démarrer: function() {
    console.log("La " + this.marque + " démarre !");
  }
};

voiture.démarrer();

this fait ici référence à l'objet voiture, ce qui permet d'accéder à ses autres propriétés.

4. Constructeurs et prototypes

Constructeur

function Personne(nom, âge) {
  this.nom = nom;
  this.âge = âge;
}

let p1 = new Personne("Luc", 40);
let p2 = new Personne("Marie", 35);

Prototype

Personne.prototype.saluer = function() {
  console.log("Bonjour, je suis " + this.nom);
};

p1.saluer();

5. Méthodes utilitaires de l'objet global Object

Object.assign()

let cible = {};
let source = { a: 1, b: 2 };
Object.assign(cible, source);

Object.keys()

let data = { nom: "Paul", âge: 27 };
console.log(Object.keys(data));

Object.values()

console.log(Object.values(data));

Object.entries()

console.log(Object.entries(data));

6. Exercice pratique

Créer un constructeur Livre :

function Livre(titre, auteur) {
  this.titre = titre;
  this.auteur = auteur;
}

Livre.prototype.résumé = function() {
  console.log(`"${this.titre}" est écrit par ${this.auteur}.`);
};

let livre1 = new Livre("1984", "George Orwell");
livre1.résumé();

Résumé du chapitre

Dans ce chapitre, nous avons exploré en profondeur le concept fondamental des objets en JavaScript, une pierre angulaire de ce langage.

  • Un objet est une structure qui permet de regrouper plusieurs données sous forme de paires clé-valeur. On peut créer un objet de façon littérale ({}) ou via un constructeur.
  • On accède à ses propriétés avec deux syntaxes :
    • la notation par point : objet.propriété,
    • la notation par crochets : objet["propriété"], utile quand le nom est dynamique ou invalide.
  • Les objets peuvent contenir des méthodes, qui sont des fonctions définies comme propriétés. Ces méthodes peuvent utiliser this pour faire référence à l'objet lui-même.
  • Les constructeurs (fonctions avec new) permettent de créer plusieurs objets similaires. Le mot-clé this est utilisé pour affecter les valeurs.
  • Le prototype est un mécanisme qui permet de partager des méthodes entre toutes les instances d'un constructeur, sans les dupliquer en mémoire.
  • L'objet global Object propose des méthodes très pratiques :
    • Object.assign() pour copier des propriétés,
    • Object.keys() pour obtenir les noms de propriétés,
    • Object.values() pour obtenir les valeurs,
    • Object.entries() pour obtenir des paires [clé, valeur].

Les objets sont indispensables pour structurer et organiser son code, mais aussi pour manipuler des données complexes. Ils servent de base à la programmation orientée objet que nous aborderons plus en détail dans les chapitres suivants.

À retenir : maîtriser les objets, c'est maîtriser le cœur de JavaScript.

Chapitre précédent Chapitre suivant