JavaScript

Objet

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Dictionnaire

Un dictionnaire en JavaScript se déclare entre { et }.
Une clé et une valeur sont séparées par :.
Les couples sont séparés par des virgules.

{'key': 'value' };
{ wheels: 4, seats: 2 };
{ color: 'red', align: true };
{};

En JavaScript, les clés sont forcément des string !

Accéder aux valeurs (1/2)

L'opération '.' (dot) permet d'obtenir la valeur correspondant à une clé.

const car = { wheels: 4, seats: 2 };
car.wheels;
car.seats;
car.foo;

Dans le cas où la clé n'existe pas, la valeur est undefined.

Accéder aux valeurs (2/2)

Comme pour les tableaux, il est possible d'utiliser les [ ] pour obtenir la valeur correspondant à une clé.

const car = { driver: "bob", seats: 2 };
const licenses = { "bob": 1258, "ann": 1498 }; 
car["seats"];
licenses[car.driver];
car["foo"];

On utilise . si la clé est une string codée en dur (sans guillemets), et [] sinon (clé calculée, stockée dans une variable, ou codée en dur avec des guillemets).

Dictionnaire dynamique

Il est possible de changer la valeur associée à une clé ou d'ajouter un couple clé/valeur.

let basket = { pear: 2 };
basket.apple;
basket;
basket.apple = 4;
basket.apple;
basket["banana"] = 5;
basket;

Pas de clé en double !

Le dictionnaire indexe les valeurs par leur clé : il ne peut y avoir qu'une seule valeur pour une clé donnée.

let dict = { dog: 3, dog: 4 };
dict.dog = 5;
dict;
dict["dog"] = 6;
dict;

Object vs Dictionary

En JavaScript, les dictionnaires sont appelés
« object » et non « dictionary ».

L'affichage par défaut (toString()) n'est pas intéressant :
on utilise JSON.stringify() à la place.

const obj = { peer: 3 };
typeof obj;
obj.toString();
JSON.stringify(obj);

JSON = JavaScript Object Notation

Déstructuration d'objet

Comme pour les tableaux, on peut destructurer les valeurs d'un objet avec la syntaxe let {key1, key2, …} = object.

const person = { name: "Ana", age: 42 };
const {name, age} = person;
console.log(`Person ${name} ${age}`);

Objet pas primitif (1/2)

Un objet n'est pas considéré comme un type primitif,
== compare les addresses en mémoire.

const p1 = { name: "Bob", age: 14 };
const p2 = { name: "Bob", age: 14 };
const p3 = p1;
p1 == p2;
p1 == p3;
p1.name == p2.name && p1.age == p2.age;

Il faut comparer chaque champ !

Objet pas primitif (2/2)

Les objets sont tous mutables :
attention à l'usage de const !

const p1 = { name: "Bob", age: 14 };
const p2 = p1;
p1.name = "Alice";
p1 == p2;
p2.name;

L'usage de const interdit de réaffecter une variable,
mais autorise la modification de ses champs !

Regrouper des propriétés

Un objet permet de regrouper des propriétés ayant trait à un même concept, ce qui permet de structurer le code.

const isAdult = function(person) {
  return person.age >= 21;
}
const person1 = { name: "John", age: 23 };
const person2 = { name: "Jane", age: 18 };
console.log(isAdult(person1));
console.log(isAdult(person2));

Tableau d'objets

Si on veut manipuler plusieurs objets,
on les regroupe dans un tableau.

const isAdult = function(person) {
  return person.age >= 21;
}
const persons = [
   { name: "John", age: 23 },
   { name: "Jane", age: 18 }
];
const firstAdult = persons.filter(isAdult)[0];
console.log(firstAdult.name);

Le tableau des propriétés

La fonction Object.keys renvoie un tableau des propriétés (clés) d'un objet.

let letters = { 'a': 1, 'b': 2 };
Object.keys(letters);

Parcourir un objet (1/2)

On peut pas parcourir un objet directement : il faut parcourir ses propriétés, puis aller chercher la valeur de chaque propriété.

let obj = { 'a': 1, 'b': 2, 'c': 3 };
let keys = Object.keys(obj);
for(let i = 0; i < keys.length; i++) {
  let key = keys[i];
  console.log(key + " = " + obj[key]);
}

Parcourir un objet (2/2)

Il existe un mot-clé spécial pour parcourir les propriétés des objets : for(variable in obj), comme en Python.

let obj = { 'a': 1, 'b': 2, 'c': 3 };
for(property in obj) {
  console.log(property + " = " + obj[property]);
}

Cette syntaxe est équivalente au code qui utilise Object.keys().