Définition

Un objet est une structure de données qui regroupe ensemble des couples clé-valeur, chaque clé représentant une propriété (ou un attribut) de l'objet.

On parle d'objet littéral pour le différencier des instances de classe qu'on appelle aussi objet. Quand on dit "objet littéral", on insiste sur le fait qu'on parle de la structure de données, alors que quand on parle d'"instance" on met l'accent sur le fait qu'il a été instancié via une classe.

En réalité, dans les 2 cas ce sont bien des objets littéraux qu'on manipule.

Dans quel cas utiliser un objet ?

Vous avez déjà dû entendre parler des tableaux, une structure de donnée qui permet de regrouper des données accessibles par leur index.

1
const mixedTypes = [1,2, true, 'string'];

Maintenant, admettons que vous vouliez gérer les données d'une personne.

Vous pourriez être tenté de le faire dans un tableau, en indiquant dans l’ordre : le prénom, le nom, l’année de naissance, la nationalité, etc.

Mais si vous faites ça, vous allez vous heurter à un problème : dans un tableau, une donnée est uniquement accessible par son index.

Donc pour obtenir la nationalité, vous devez par exemple écrire personData[3].

1
2
const person = ['Simon', 'Dupont', 1987, 'French'];
console.log(person[3]); // Affiche la nationalité

Pas très pratique ! Car vous devez vous rappeler en permanence à quelle donnée correspond chaque indice.

Sans compter les risques d'erreur : vous pourriez mélanger l'ordre des données lors de la création de l'objet. Ou le fait que si vous avez des propriétés facultatives, vous aurez des éléments vides dans votre tableau.

Dans un cas comme celui-ci, une meilleure alternative serait d'utiliser un objet littéral.

Fonctionnement des objets littéraux

Les objets littéraux offrent une alternative aux tableaux pour regrouper des données.

Si les tableaux permettent d’accéder aux données via une "clé" numérique (l’index, un nombre entier), les objets permettent d’y accéder via une "clé" de type string.

Voici comment vous pourriez stocker les données d’une personne dans un objet, et accéder à sa nationalité :

1
2
3
4
5
6
7
const personObject = {
    firstname: 'Simon',
    lastName: 'Dupont',
    birthYear: 1987,
    nationality: 'French'
};
console.log(personObject.nationality); // Affiche la nationalité

L'avantage de l'objet est qu'on n'a pas à se soucier de l'ordre des propriétés (pas d'index à gérer), qu'on peut nommer nos clés, et ajouter/supprimer une propriété sans rompre la structure.

Déclarer un objet littéral

Il existe 2 manières de déclarer un objet littéral :

• Via les accolades : {}
• Via le constructeur de la classe Object

1
2
const emptyObject = {};
const emptyObject2 = new Object();

Vous pouvez vouloir initialiser un objet avec des valeurs lors de sa déclaration. Dans ce cas, utilisez la syntaxe des accolades :

1
const myObject = {1, 'text', ['exemple']};

Convention de nommage

Le nommage des clés est moins contraint que celui des variables : vous pouvez utiliser comme clé une chaîne de caractères, un nombre, un booléen, mais la clé sera de toute façon convertie en chaîne de caractères.

Cependant, si vos clés ne respectent pas la syntaxe de nommage d'une variable JS, vous ne pourrez pas utiliser la syntaxe du . pour parcourir votre objet.

1
2
3
4
5
6
7
8
9
const emperor = {
    name: 'Palpatine',
    'is-very-evil!': true, // Caractères spéciaux : entouré de ''
    666: true
};

console.log(emperor.name);
console.log(emperor['is-very-evil!']);
console.log(emperor['666']);

Remarquez que pour les clés 666 et 'is-very-evil!' qui ne respectent pas la syntaxe des variables, vous devez utilisez la notation des crochets pour accéder à la valeur.

Manipulation des objets

Accéder aux propriétés d'un objet

Le caractère point : "." vous permet d'accéder aux propriétés de l'objet.

1
2
3
4
5
6
7
8
9
10
let student = {
    name : ['Simon','Dupont'],
    age : 22,
    mail : 'simon.dupont@gmail.com'
}
console.log(student.name[0]);
console.log(student.age);
// expected output :
// Simon
// 22

Modifier la valeur d'une propriété

Après avoir récupéré la propriété grâce au ., vous pouvez directement la modifier par assignation :

1
2
3
4
5
6
7
let student = {
    name : ['Simon','Dupont'],
    age : 22,
    mail : 'simon.dupont@gmail.com'
}
student.age = 23;
console.log(student.age); // => 23

Ajouter une propriété à un objet existant

Vous pouvez également ajouter des propriétés à un objet existant avec la notation du ..

1
2
3
4
5
6
7
8
9
let student = {
    name : ['Simon','Dupont'],
    age : 22,
    mail : 'simon.dupont@gmail.com'
}
student.notes = [12,13,9,16];
console.log(student);
// expected output :
// {name: ['Simon', 'Dupont'], age: 22, mail: 'simon.dupont@gmail.com', notes: [12, 13, 9, 16]}

Vous observez que la nouvelle propriété notes à bien été ajouté à l'objet student.

Supprimer une propriété

Pour supprimer une propriété d'un objet, il suffit de faire appel au mot-clé delete.

1
2
delete obj['firstName'];
delete obj.lastName;

Vérifier l'existence d'une propriété

Nous avons plusieurs options pour vérifier l'existence d'une propriété sur un objet.

Avec key in obj :

1
2
3
4
5
const simon = { firstName: 'Simon', lastName: 'Dupont' };
const john = { firstName: 'John' };

console.log('lastName' in mary); // true
console.log('lastName' in john); // false

Avec obj.hasOwnProperty(key) :

1
2
console.log(simon.hasOwnProperty('lastName')); // true
console.log(john.hasOwnProperty('lastName')); // false

Avec obj[key] !== undefined :

1
2
console.log(simon['lastName'] !== undefined); // true
console.log(john['lastName'] !== undefined); // false

Le mot-clé this

1
2
3
4
5
6
7
8
9
const student = {
    name : ['Simon','Dupont'],
    age : 22,
    mail : 'simon.dupont@gmail.com',

    bonjour: function(){
        alert(`Bonjour, je suis ${this.name[0]}, j'ai ${this.age} ans.`);
    }
}

Au sein de la méthode bonjour vous pouvez remarquer la présence du mot-clé this. Il apparaît fréquemment dans les langages orientés objets.

Ce mot-clé fait référence à l'objet manipulé (student dans ce cas).

Lorsque vous appellerez student.bonjour(), le mot-clé this dans la méthode sera remplacé par student (l'instance en cours) au moment de l'éxécution.

On dit que this contient une référence vers le contexte de la méthode, c'est à dire l'instance sur laquelle la méthode est appelée.

Conclusion

Voilà, vous savez (presque) tout sur les objets ! Si vous avez des idées d’amélioration pour cet article, laissez-nous un commentaire !

Si tout est clair pour vous, rendez-vous au prochain article : "La manipulation du DOM".

Sources

• Developer Mozzila : Utiliser les objets
• Pierre Giraud - Javascript apprendre à coder : Création d’un objet JavaScript littéral