Comprendre les Objets en JavaScript

Les objets sont l'une des structures de données fondamentales de JavaScript. Ils sont omniprésents dans n'importe quel code, mais réservent aussi de petites surprises !

Structure d'un objet

En JavaScript, un objet est une collection de données et de fonctionnalités associées. Les objets sont similaires à des conteneurs qui peuvent contenir divers types de données, tels que des nombres, des chaînes de caractères, des tableaux et d'autres objets. Ils sont utilisés pour organiser et structurer des informations de manière logique.

Un objet JavaScript est constitué de paires de clés et de valeurs. La clé identifie la propriété, tandis que la valeur est la donnée associée à cette propriété. Voici comment définir un objet simple en JavaScript :

let personne = {
    nom: "John",
    age: 30,
    ville: "New York"
};

Dans cet exemple, personne est un objet qui contient trois propriétés : nom, age et ville, chacune ayant une valeur associée.

Contrairement à d'autres langages de programmation, les clés des attributs d'un objet en JavaScript ne sont pas strictement limitées à des chaînes de caractères. En JavaScript, les clés d'attributs peuvent être de plusieurs types de données, notamment des chaînes de caractères, des nombres et des symboles.

Clés en tant que nombres : Vous pouvez utiliser des nombres comme clés pour les attributs d'un objet. Cela peut être utile, par exemple, lorsque vous travaillez avec des données indexées :

let scores = {
    1: 100,
    2: 85,
    3: 92
};

Dans cet exemple, les clés sont des nombres entiers (1, 2, 3).

Clés en tant que symboles : Les symboles sont un type de données unique en JavaScript et peuvent être utilisés comme clés d'attributs d'objet. Les symboles sont généralement utilisés lorsque vous avez besoin de créer des propriétés privées ou uniques qui ne sont pas exposées à l'extérieur de l'objet :

const symboleUnique = Symbol("cle_unique");
let monObjet = {
    [symboleUnique]: "Valeur secrète"
};

Dans cet exemple, la clé de l'attribut est un symbole.

Accéder aux Propriétés d'un Objet

Pour accéder aux propriétés d'un objet, vous pouvez utiliser la notation point (.) ou la notation crochet ([]). Par exemple, pour accéder à la propriété nom de l'objet personne, vous pouvez faire ce qui suit :

console.log(personne.nom); // Affiche "John"
console.log(personne["nom"]); // Affiche "John"

La notation point est généralement préférée lorsque la clé est une chaîne de caractères valide et ne contient pas d'espaces ni de caractères spéciaux. La notation crochet est nécessaire lorsque la clé :

contient des caractères spéciaux. Exemple : personne["nom de famille"]
est dans une variable. Exemple :

const attribut = "nom"; 
console.log(personne[attribut]); // Affiche "John"

est un entier ou un symbole

let valeur = scores[1]; // Accès à l'attribut avec une clé numérique (1)

Modification des objets

Vous pouvez ajouter de nouvelles propriétés à un objet ou modifier les valeurs des propriétés existantes de la manière suivante :

personne.profession = "Développeur";
personne.age = 31;

console.log(personne.profession); // Affiche "Développeur"
console.log(personne.age); // Affiche 31

Dans cet exemple, nous avons ajouté une nouvelle propriété profession à l'objet personne et modifié la valeur de la propriété age.

Si vous souhaitez supprimer une propriété d'un objet, vous pouvez utiliser l'opérateur delete :

delete personne.ville;

console.log(personne.ville); // Affiche "undefined"

Attention, la suppression d'une propriété ne supprime pas l'objet lui-même, elle lui attribue simplement la valeur undefined.

Manipuler les Objets de façon Sûre

Lorsque vous travaillez avec des objets en JavaScript, il est essentiel de comprendre comment les manipuler de manière sûre pour éviter des erreurs inattendues.

valeur et référence

Regardez cet exemple avec 2 objets :

var objet1 = {libelle:"Bonjour", langue:"Français"}
var objet2 = objet1
objet2.langue = "Anglais"

A votre avis, quelle est la valeur de objet1.langue ?

console.log(objet1.langue) // Affiche "Anglais" !!!!

Surprise. Lorsqu'on a modifié l'attribut langue de objet2, cela a aussi modifié l'attribut langue de objet1. Pourquoi ? Parce que c'est le même attribut

En javascript, les objets sont manipulés par leur référence.

Une référence, c'est un peu une étiquette que vous mettez sur l'objet.

Lorsque vous codez var objet2 = objet1, vous n'avez pas créé un 2ème objet, mais seulement collé une 2ème étiquette sur le même objet !

Une constante pas si constante

Dans la même idée, observez ce code :

const objet1 = {libelle:"Bonjour", langue:"Français"}
objet1 = {libelle:"Hello", langue:"Anglais"} // TypeError: Assignment to constant variable.
objet1.libelle = "Hello" // Aucune erreur !!!

Avec le mot-clé const, on empêche théoriquement de modifier la valeur d'une variable. Pourtant, on parvient à modifier objet1 en changeant son attribut libelle sans provoquer d'erreur !

La raison est simple : le mot-clé const empêche seulement de poser l'étiquette sur un autre objet, mais pas de modifier le contenu de l'objet.

Des modifications non contrôlées d'objet est une source très fréquente de bugs.

Pour empêcher cela, 2 solutions :

geler l'objet avec Object.freeze() pour le rendre immuable. Attention, cela requiert d'être en mode strict (opens in a new tab)

'use strict'
const objet1 = {libelle:"Bonjour", langue:"Français"}
Object.freeze(objet1);
objet1.libelle = "Hello" // TypeError: Cannot assign to read only property 'libelle'

cloner l'objet

const objet1 = {libelle:"Bonjour", langue:"Français"}
const objet2 = {...objet1, libelle:"Au revoir"}

Le mytérieux this