Dans cet article, vous allez apprendre comment utiliser les objets littéraux en JavaScript.
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