Semaine 2 - Jour 4 : Objets

Qu'est-ce qu'un objet ?

Un objet est une structure de données qui permet de regrouper des informations liées sous forme de paires clé-valeur. C'est l'un des concepts fondamentaux de JavaScript.

Analogie : Un objet est comme une fiche d'identité : il contient plusieurs informations (nom, prénom, âge, adresse...) regroupées dans une seule entité.

Différence avec les tableaux : Les tableaux utilisent des index numériques (0, 1, 2...), les objets utilisent des clés nommées (nom, age, ville...).

1. Création et accès

On crée un objet avec des accolades {} et on accède aux propriétés avec . ou [].

// Créer un objet
let personne = {
  nom: 'Dupont',
  prenom: 'Marie',
  age: 25,
  ville: 'Paris'
};

// Accès avec la notation point
console.log(personne.nom); // 'Dupont'
console.log(personne.age); // 25

// Accès avec la notation crochet
console.log(personne['ville']); // 'Paris'

2. Modifier et ajouter

On peut facilement modifier des propriétés existantes ou en ajouter de nouvelles.

let voiture = {
  marque: 'Renault',
  annee: 2020
};

// Modifier une propriété
voiture.annee = 2021;

// Ajouter une propriété
voiture.couleur = 'Rouge';
voiture['prix'] = 25000;

console.log(voiture);
// {marque: 'Renault', annee: 2021, couleur: 'Rouge', prix: 25000}

3. Méthodes et this

Un objet peut contenir des fonctions (appelées méthodes). this fait référence à l'objet lui-même.

let compteur = {
  valeur: 0,
  incrementer: function() {
    this.valeur++;
  },
  afficher: function() {
    console.log(this.valeur);
  }
};

compteur.incrementer();
compteur.incrementer();
compteur.afficher(); // 2

// Syntaxe courte (ES6)
let obj = {
  nom: 'Test',
  afficher() { // Sans 'function'
    console.log(this.nom);
  }
};

4. Object.keys, values, entries

Des méthodes utiles pour extraire les clés, valeurs ou paires clé-valeur d'un objet.

let produit = {
  nom: 'Ordinateur',
  prix: 999,
  stock: 50
};

// Obtenir les clés
let cles = Object.keys(produit);
console.log(cles); // ['nom', 'prix', 'stock']

// Obtenir les valeurs
let valeurs = Object.values(produit);
console.log(valeurs); // ['Ordinateur', 999, 50]

// Obtenir les paires [clé, valeur]
let paires = Object.entries(produit);
// [['nom', 'Ordinateur'], ['prix', 999], ...]
Console JavaScript Interactive - Testez les objets !
Prêt à exécuter votre code...

Exemples pratiques

// Gestion d'un compte bancaire
let compte = {
  titulaire: 'Alice Martin',
  solde: 1000,
  devise: 'EUR',
  deposer(montant) {
    this.solde += montant;
    console.log(`Dépôt de ${montant}€. Nouveau solde: ${this.solde}€`);
  },
  retirer(montant) {
    if (montant > this.solde) {
      console.log('Solde insuffisant !');
    } else {
      this.solde -= montant;
      console.log(`Retrait de ${montant}€. Nouveau solde: ${this.solde}€`);
    }
  },
  afficherInfo() {
    console.log(`Compte de ${this.titulaire}: ${this.solde}${this.devise}`);
  }
};

compte.afficherInfo();
compte.deposer(500);
compte.retirer(200);
compte.retirer(2000); // Solde insuffisant

Copiez ces exemples dans la console interactive ci-dessus !

Froggiesplaining :


Objectifs de ce cours :
✅ Comprendre ce qu'est un objet et comment le créer
✅ Accéder et modifier les propriétés d'un objet
✅ Créer des méthodes (fonctions dans les objets)
✅ Utiliser this pour référencer l'objet
✅ Manipuler les objets avec Object.keys, Object.values, Object.entries

Points clés à retenir :
• Un objet = collection de paires clé: valeur
• {} pour créer un objet
• objet.propriete ou objet['propriete'] pour accéder
• this dans une méthode = référence à l'objet lui-même
• Object.keys(obj) retourne un tableau des clés
• Les objets sont des types de données fondamentaux en JavaScript

Exercice pratique :
1. Créez un objet livre avec : titre, auteur, pages, lu (boolean)
2. Ajoutez une méthode afficher() qui affiche toutes les infos
3. Ajoutez une méthode marquerCommentLu() qui met lu à true
4. Créez un objet calculatrice avec des méthodes add, subtract, multiply, divide
5. Testez Object.keys() sur vos objets
6. Bonus : Créez un objet todoList qui gère une liste de tâches

Froggie explain

GitHub - eCrea