Objets JavaScript

Objets JavaScript

En JavaScript, les objets sont fondamentaux. Ce sont des collections de paires clé-valeur, où les clés sont des chaînes (ou des Symboles) et les valeurs peuvent être de n’importe quel type de données, y compris d’autres objets ou des fonctions.

Analogie du monde réel : Objets, propriétés et méthodes

Pensez à un objet du monde réel, comme une voiture. Une voiture a :

• Propriétés : Des caractéristiques comme la couleur, le modèle, le poids, la vitesse actuelle.
• Méthodes : Des actions qu’elle peut effectuer, comme démarrer, accélérer, freiner, arrêter.

Différentes voitures (instances) auront le même ensemble de propriétés et de méthodes, mais les valeurs de leurs propriétés (par exemple, la couleur) différeront, et les méthodes opéreront sur cette voiture spécifique.

Objets JavaScript

Les variables JavaScript peuvent contenir des valeurs de données simples (primitives comme les nombres ou les chaînes) :

let carName = "Volvo";

Les objets, cependant, peuvent contenir de nombreuses valeurs, organisées en propriétés nommées.

Syntaxe des littéraux d’objet

La manière la plus courante de créer un objet est d’utiliser un littéral d’objet :

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2023,
  color: "blue",
  isRunning: false
};

Les valeurs sont écrites sous forme de paires nom: valeur (ou clé: valeur), séparées par des virgules. Les noms de propriétés peuvent être non-cités s’ils sont des identifiants JavaScript valides. S’ils contiennent des espaces ou des caractères spéciaux, ou sont des mots réservés, ils doivent être cités.

const person = {
  "first name": "John", // Clé entre guillemets à cause de l'espace
  lastName: "Doe",
  age: 30,
  "eye-color": "brown" // Clé entre guillemets à cause du trait d'union
};

Accéder aux propriétés d’objet

Vous pouvez accéder aux propriétés d’objet de deux manières :

1. Notation par point : nomObjet.nomPropriété

console.log(car.make);  // Sortie : Toyota
console.log(person.lastName); // Sortie : Doe

2. Notation par crochets : nomObjet["nomPropriété"] (nom de la propriété en tant que chaîne)

console.log(car["model"]); // Sortie : Camry
console.log(person["first name"]); // Sortie : John (Notation par crochets nécessaire pour les clés avec des espaces/caractères spéciaux)

// La notation par crochets permet également d'utiliser une variable pour le nom de la propriété :
let propertyKey = "color";
console.log(car[propertyKey]); // Sortie : blue

Modifier les propriétés d’objet

Vous pouvez modifier la valeur d’une propriété existante ou ajouter une nouvelle propriété en utilisant l’assignation :

const myComputer = {
  brand: "Apple",
  type: "Laptop"
};

// Modifier une propriété existante
myComputer.type = "MacBook Pro";
console.log(myComputer.type); // Sortie : MacBook Pro

// Ajouter une nouvelle propriété
myComputer.year = 2023;
console.log(myComputer.year); // Sortie : 2023

myComputer["ram_gb"] = 16;
console.log(myComputer.ram_gb); // Sortie : 16

console.log(myComputer); // { brand: "Apple", type: "MacBook Pro", year: 2023, ram_gb: 16 }

Méthodes d’objet

Les méthodes sont des fonctions stockées comme propriétés d’objet. Elles définissent les actions qu’un objet peut effectuer.

const personWithMethods = {
  firstName: "Jane",
  lastName: "Doe",
  age: 28,
  // Méthode pour obtenir le nom complet
  fullName: function() {
    return this.firstName + " " + this.lastName;
  },
  // Syntaxe abrégée de méthode ES6
  greet() {
    console.log("Hello, my name is " + this.fullName() + " and I am " + this.age + " years old.");
  }
};

Le mot-clé this :

À l’intérieur d’une méthode d’objet, this fait référence à l’objet lui-même (l’objet sur lequel la méthode a été appelée). Cela permet aux méthodes d’accéder et de manipuler les propres propriétés de l’objet.

Accéder aux méthodes d’objet :

Vous appelez une méthode d’objet en utilisant la notation par point suivie de parenthèses () :

const name = personWithMethods.fullName();
console.log(name); // Sortie : Jane Doe

personWithMethods.greet(); // Sortie : Hello, my name is Jane Doe and I am 28 years old.

Si vous accédez à une propriété de méthode sans (), cela renvoie la définition de la fonction elle-même, et non le résultat de l’appel de la fonction :

const greetFunction = personWithMethods.greet;
console.log(greetFunction); // Sortie : [Function: greet] (ou similaire, affiche la définition de la fonction)

Itérer sur les propriétés d’objet

Vous pouvez parcourir les propriétés d’un objet en utilisant diverses méthodes :

const user = {
  id: 101,
  username: "coder",
  email: "coder@example.com",
  isActive: true
};

// boucle for...in (itère sur les propriétés énumérables, y compris les héritées)
console.log("Utilisation de for...in:");
for (const key in user) {
  if (user.hasOwnProperty(key)) { // Bonne pratique pour vérifier les propriétés propres
    console.log(`${key}: ${user[key]}`);
  }
}

// Object.keys() (renvoie un tableau des noms de propriétés énumérables propres à un objet)
console.log("\nUtilisation de Object.keys():");
Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

// Object.values() (renvoie un tableau des valeurs de propriétés énumérables propres à un objet)
console.log("\nUtilisation de Object.values():");
Object.values(user).forEach(value => {
  console.log(value);
});

// Object.entries() (renvoie un tableau des paires [clé, valeur] énumérables propres à un objet)
console.log("\nUtilisation de Object.entries():");
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

JSON (JavaScript Object Notation)

JSON est un format léger d’échange de données. Il est facile à lire et à écrire pour les humains, et facile à analyser et à générer pour les machines. Sa syntaxe est dérivée de la syntaxe des littéraux d’objet JavaScript, mais avec quelques différences (par exemple, les clés doivent être des chaînes entre guillemets doubles en JSON).

JavaScript fournit des méthodes intégrées pour convertir entre les objets JavaScript et les chaînes JSON :

• JSON.stringify(object) : Convertit un objet JavaScript en chaîne JSON.
• JSON.parse(jsonString) : Analyse une chaîne JSON, construisant la valeur ou l’objet JavaScript décrit par la chaîne.

const book = {
  title: "The Art of Programming",
  author: "Dev Master",
  pages: 300,
  published: true
};

// Convertir l'objet en chaîne JSON
const jsonBook = JSON.stringify(book);
console.log(jsonBook); // Sortie : {"title":"The Art of Programming","author":"Dev Master","pages":300,"published":true}

// Convertir la chaîne JSON en objet
const bookObject = JSON.parse(jsonBook);
console.log(bookObject.title); // Sortie : The Art of Programming

Éviter new Object() pour les primitives

Bien que JavaScript permette de créer des objets wrapper pour les types primitifs comme les chaînes, les nombres et les booléens en utilisant des constructeurs (par exemple, new String("text"), new Number(123)), cela est généralement déconseillé.

let x = new String("John");   // x est un objet
let y = "John";                 // y est une primitive de chaîne

console.log(typeof x); // "object"
console.log(typeof y); // "string"

L’utilisation de ces objets wrapper complique votre code, peut entraîner un comportement inattendu (par exemple, new String("") est truthy) et peut ralentir l’exécution. Préférez toujours utiliser directement les valeurs primitives.

JavaScript convertit automatiquement les primitives en objets lorsqu’une méthode est appelée sur elles (auto-boxing), vous pouvez donc toujours utiliser des méthodes comme y.toUpperCase().

Les objets sont une partie vaste et essentielle de JavaScript. D’autres façons de créer des objets incluent les fonctions constructrices et les classes ES6, qui sont utilisées pour des modèles de programmation orientée objet plus complexes.