Objets en

À propos de Objets

Explication

Outre les types de données primitifs comme number et string, il existe en JavaScript un autre type de données important appelé object. Les objets sont des collections de paires clé-valeur. À ce titre, on peut les utiliser comme ce que l'on appelle souvent des tables associatives ou des dictionnaires dans d'autres langages.

Dans d'autres langages, toutes les valeurs d'une table associative doivent souvent avoir le même type de données. En JavaScript, seul le type de la clé est restreint : il doit s'agir d'une string. Les valeurs d'un même objet peuvent avoir des types différents. Elles peuvent être de type primitif, comme les nombres, mais aussi des tableaux, d'autres objets ou même des fonctions. Cela rend les objets très polyvalents, ce qui en fait aussi des éléments essentiels de la programmation orientée objet (POO) en JavaScript.

Dans ce qui suit, on s'intéressera aux objets en tant que collections ou tables associatives. Les autres cas d'usage des objets seront traités dans d'autres concepts, voir par exemple les Classes.

Créer un objet

On crée un objet littéral à l'aide d'accolades. On peut aussi y inclure directement des entrées (des paires clé-valeur). Pour cela, indique d'abord la clé, suivie de deux-points, puis de la valeur.

const emptyObject = {};

const obj = {
  favoriteNumber: 42,
  greeting: 'Hello World',
  useGreeting: true,
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
  fruits: ['melon', 'papaya'],
  addNumbers: function (a, b) {
    return a + b;
  },
};

La virgule finale après la dernière entrée est facultative en JavaScript. Tu peux lire les avantages de son utilisation ici.

Tu te demandes peut-être pourquoi les clés ne sont pas entourées de guillemets alors qu'elles sont censées être des strings. Il s'agit d'une notation abrégée. Si la clé respecte les règles de nommage d'un identifiant JavaScript, tu peux omettre les guillemets. Pour les clés dont le nom contient des caractères spéciaux, tu dois utiliser la notation habituelle des strings.

const obj = {
  '1keyStartsWithNumber': '...',
  'key/with/slashes': '...',
  'key-with-dashes': '...',
  'key with spaces': '...',
  '#&()[]{}èä樹keyWithSpecialChars': '...',
};

Souvent, tu voudras ajouter des variables existantes au moment de déclarer un objet. Cela conduit fréquemment à des paires clé-valeur comme name: name. JavaScript dispose d'une notation abrégée qui permet d'écrire simplement name. Il existe aussi une notation abrégée pour définir une fonction dans un objet. On peut alors omettre les deux-points et le mot-clé function.

const x = 1;
const y = 2;

const obj = {
  x: x,
  y: y,
  calcSum: function (a, b) {
    return a + b;
  },
};

// Can be shortened to ...
const obj = {
  x,
  y,
  calcSum(a, b) {
    return a + b;
  },
};

Si tu veux créer un littéral d'objet dont le nom de clé est stocké dans une variable ou calculé par une expression, tu dois entourer la variable ou l'expression de crochets.

const key = 'greeting';

const obj = {
  [key]: 'hello world',
};
console.log(obj);
// => { greeting: 'hello world' }

Récupérer une valeur

Il existe deux façons de récupérer la valeur associée à une clé : la notation pointée et la notation entre crochets.

const obj = { greeting: 'hello world' };

obj.greeting;
// => hello world

obj['greeting'];
// => hello world

// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world

Utiliser la notation pointée comme raccourci a la même restriction que l'omission des guillemets. Elle ne fonctionne que si la clé respecte les règles de nommage des identifiants.

Si tu essaies de récupérer une clé qui n'existe pas dans l'objet, JavaScript renvoie undefined. Voir Null et undefined pour plus de détails à ce sujet.

Tu peux enchaîner les clés si tu veux récupérer une valeur dans un objet imbriqué.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.address.city;
// => 'Batticaloa'

obj['address']['city'];
// => 'Batticaloa'

// Notations can also be mixed.
obj.address['city'];
// => 'Batticaloa'

Ajouter ou modifier une valeur

Tu peux ajouter ou modifier une valeur à l'aide de l'opérateur d'affectation =. Là encore, les notations pointée et entre crochets sont disponibles.

const obj = { greeting: 'hello world' };

obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';

obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';

const key = 'new key 3';
obj[key] = 'new value 3';

Supprimer une entrée

Tu peux supprimer une paire clé-valeur d'un objet à l'aide du mot-clé delete.

const obj = {
  key1: 'value1',
  key2: 'value2',
};

delete obj.key1;
delete obj['key2'];

À noter que, bien que undefined soit renvoyé pour les clés inexistantes, affecter undefined à une clé ne supprime pas l'entrée. Utilise toujours delete à la place.

Vérifier si une clé existe

Tu peux vérifier qu'une certaine clé existe dans un objet avec la méthode hasOwnProperty.

const obj = { greeting: 'hello world' };

obj.hasOwnProperty('greeting');
// => true

obj.hasOwnProperty('age');
// => false

hasOwnProperty renvoie false pour les clés héritées. C'est généralement le comportement souhaité. Si tu veux inclure les clés héritées dans la vérification d'existence, tu peux utiliser l'opérateur in à la place.

Parcourir un objet

Il existe une boucle spéciale for...in pour itérer sur toutes les clés d'un objet.

const obj = {
  name: 'Ali',
  age: 65,
};

for (let key in obj) {
  console.log(key, obj[key]);
}
// name Ali
// age 65

On pourrait croire que for...in visite toujours les clés dans l'ordre où elles apparaissent ou ont été ajoutées à l'objet (l'ordre d'insertion). Néanmoins, tu ne dois pas t'y fier, car dans certains cas particuliers l'ordre diffère de l'ordre d'insertion. Écris toujours ton code comme si l'ordre était arbitraire. Si tu as besoin d'un ordre fiable, utilise une Map ou un [tableau][concept-arrays] imbriqué plutôt qu'un objet.

La boucle for…in présente un piège si l'objet possède des clés héritées. Celles-ci seront aussi visitées par la boucle for…in. En général, tu veux éviter cela, il faut donc les ignorer comme montré ci-dessous.

for (let key in obj) {
  if (!obj.hasOwnProperty(key)) {
    continue;
  }
  // ...
}

JavaScript dispose aussi d'une boucle for...of, par exemple pour itérer sur des tableaux. Il est important de noter que for...in et for...of ne sont pas interchangeables, voir la documentation MDN pour plus de détails à ce sujet.

Clés, valeurs et entrées

L'objet intégré Object fournit des méthodes utilitaires pour récupérer sous forme de tableaux toutes les clés, les valeurs ou les entrées d'un objet donné.

const obj = {
  name: 'Ali',
  age: 65,
};

Object.keys(obj);
// => [ 'name', 'age' ]

Object.values(obj);
// => [ 'Ali', 65 ]

Object.entries(obj);
// => [ [ 'name', 'Ali' ], [ 'age', 65 ] ]

Objet vraiment vide

Tu as peut-être remarqué qu'un objet vide en JavaScript n'est pas complètement vide. Par exemple, il contient la méthode hasOwnProperty et d'autres méthodes comme toString. En général, cela ne pose aucun problème, mais si tu as un jour besoin de créer un objet vraiment vide, utilise un objet null que l'on peut créer avec Object.create(null).