Initialisateur d'objet

Exemple interactif

const object1 = { a: "foo", b: 42, c: {} };

console.log(object1.a);
// Expected output: "foo"

const a = "foo";
const b = 42;
const c = {};
const object2 = { a: a, b: b, c: c };

console.log(object2.b);
// Expected output: 42

const object3 = { a, b, c };

console.log(object3.a);
// Expected output: "foo"

Syntaxe

var o = {};
var o = { a: "toto", b: 42, c: {} };

var a = "toto",
  b = 42,
  c = {};
var o = { a: a, b: b, c: c };

var o = {
  property: function (paramtres) {},
  get property() {},
  set property(valeur) {},
};

Nouvelles notations ECMAScript 2015 (ES6)

ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilit de ces notations avec les diffrents environnements, se rfrer au tableau de compatibilit ci-aprs.

// Raccourcis pour les noms de proprits (ES2015)
var a = "toto",
  b = 42,
  c = {};
var o = { a, b, c };

// Raccourcis pour les noms de mthodes(ES2015)
var o = {
  property(paramtres) {},
};

// Noms calculs pour les proprits (ES2015)
var prop = "toto";
var o = {
  [prop]: "hey",
  ["tr" + "uc"]: "ho",
};

Description

Un initialisateur d'objet est une expression qui permet de dcrire l'initialisation d'un Object. Les objets sont constitus de proprits qui permettent de les dcrire. Les valeurs des proprits d'un objet peuvent tre construites partir de types de donnes primitifs ou partir d'autres objets.

Crer des objets

On peut crer un objet sans aucune proprit grce l'expression suivante :

var objet = {};

Cependant, en utilisant un littral ou un initialisateur, on peut crer des objets disposant de proprits rapidement. Il suffit d'inscrire une liste de cls-valeurs spares par des virgules. Le fragment de code qui suit permet de crer un objet avec trois proprits identifies par les cls "toto", "ge" et "machin". Les valeurs respectives de ces diffrentes proprits sont : la chane de caractres "truc", le nombre 42 et un autre objet.

var object = {
  toto: "truc",
  ge: 42,
  machin: { maProp: 12 },
};

Accder des proprits

Aprs la cration d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses proprits. Il est possible d'accder aux proprits d'un objet en utilisant un point ou des crochets. Voir la page sur les accesseurs de proprits pour plus d'information.

object.toto; // "truc"
object["ge"]; // 42

object.toto = "machin";

Dfinir des proprits

On a dj vu comment on pouvait utiliser la syntaxe de l'initialisateur pour dfinir des proprits. Il arrive souvent de vouloir utiliser des variables comme proprits d'un objet. C'est pourquoi on peut trouver le code suivant :

var a = "toto",
  b = 42,
  c = {};

var o = {
  a: a,
  b: b,
  c: c,
};

Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un rsultat gal :

var a = "toto",
  b = 42,
  c = {};

// Raccourcis sur les noms de proprits (ES2015)
var o = { a, b, c };

// Autrement dit
console.log(o.a === { a }.a); // true

Les duplicatas et les noms de proprits

Si le mme nom est utilis plusieurs fois pour diffrentes proprits, ce sera la dernire proprit qui sera prise en compte :

var a = { x: 1, x: 2 };
console.log(a); // { x: 2}

Le mode strict d'ECMAScript 5 renvoyait une exception SyntaxError lorsque plusieurs proprits avaient le mme nom. ECMAScript 2015 (ES6) permettant de crer des proprits avec des noms qui sont calculs l'excution, cette restriction a t retire.

function vrifierSmantiqueES2015() {
  "use strict";
  try {
    ({ prop: 1, prop: 2 });

    // Aucune erreur, la smantique en cours consiste  accepter les proprits dupliques
    return true;
  } catch (e) {
    // Une erreur est renvoye : les duplicatas sont interdits en mode strict
    return false;
  }
}

Dfinitions de mthodes

Une proprit d'un objet peut tre une function, un accesseur ou un mutateur :

var o = {
  property: function (paramtres) {},
  get property() {},
  set property(valeur) {},
};

Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-cl "function".

// Raccourci pour les noms de mthodes (ES2015)
var o = {
  property(paramtres) {},
  *generator() {},
};

Ou encore :

var o = {
  *generator() {
    ...
  }
};

En utilisant uniquement ECMAScript 5, on aurait crit :

(Il n'y a pas de function gnratrice en ECMAScript5, mais l'exemple permet de comprendre l'volution de la syntaxe) :

var o = {
  generator: function* () {},
};

Pour plus d'informations et d'exemples sur les mthodes, voir la page concernant les dfinitions de mthode.

Noms de proprits calculs

Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de proprits qui soient calculs lors de l'excution. Ainsi, en plaant une expression entre crochets [], celle-ci sera calcule pour dterminer le nom de la proprit. Cette notation est la symtrique des crochets utiliss pour accder aux proprits. Il est dsormais possible d'utiliser cette notation dans les littraux objets :

// Calcul des noms de proprits (ES2015)
var i = 0;
var a = {
  ["toto" + ++i]: i,
  ["toto" + ++i]: i,
  ["toto" + ++i]: i,
};

console.log(a.toto1); // 1
console.log(a.toto2); // 2
console.log(a.toto3); // 3

var param = "taille";
var config = {
  [param]: 12,
  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4,
};

console.log(config); // { taille: 12, mobileTaille: 4 }

Dcomposition des proprits

La proposition de la dcomposition des proprits ECMAScript (au niveau 4, finalise) vise permettre la dcomposition des proprits dans les littraux objets. Cela permet de copier les proprits numrables directes partir d'un objet source vers un nouvel objet.

Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra dsormais tre crite de faon plus concise qu'avec Object.assign().

var obj1 = { toto: "truc", x: 42 };
var obj2 = { toto: "bidule", y: 13 };

var clone = { ...obj1 };
// Object { toto: 'truc', x: 42 }

var fusion = { ...obj1, ...obj2 };
// Object { toto: 'bidule', x: 42, y: 13 };

On notera que la mthode Object.assign() dclenche les mutateurs, ce qui n'est pas le cas de l'oprateur de dcomposition.

Changement de prototype

Dfinir une proprit avec la syntaxe __proto__: valeur ou "__proto__": valeur ne permet pas de crer une proprit avec le nom __proto__. Si la valeur fournie est un objet ou est null, cela modifie le [[Prototype]] de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifi.)

var obj1 = {};
assert(Object.getPrototypeOf(obj1) === Object.prototype);

var obj2 = { __proto__: null };
assert(Object.getPrototypeOf(obj2) === null);

var protoObj = {};
var obj3 = { __proto__: protoObj };
assert(Object.getPrototypeOf(obj3) === protoObj);

var obj4 = { __proto__: "not an object or null" };
assert(Object.getPrototypeOf(obj4) === Object.prototype);
assert(!obj4.hasOwnProperty("__proto__"));

On ne peut modifier le prototype qu'une seule fois pour une mme notation littrale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.

Les dfinitions de proprits qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles dfinieront une proprit de faon classique.

var __proto__ = "variable";

var obj1 = { __proto__ };
assert(Object.getPrototypeOf(obj1) === Object.prototype);
assert(obj1.hasOwnProperty("__proto__"));
assert(obj1.__proto__ === "variable");

var obj2 = {
  __proto__() {
    return "hello";
  },
};
assert(obj2.__proto__() === "hello");

var obj3 = { ["__prot" + "o__"]: 17 };
assert(obj3.__proto__ === 17);

Notation littrale et JSON

La notation utilisant un littral objet n'est pas identique celle utilise par la JavaScript Object Notation (JSON). Bien que ces notations se ressemblent, il existe certaines diffrences :

• JSON ne permet de dfinir des proprits qu'en utilisant la syntaxe "proprit": valeur. Le nom de la proprit doit tre entour de double-quotes et la dfinition de la proprit ne peut pas tre raccourcie.
• En JSON les valeurs ne peuvent tre uniquement que des chanes de caractres, des nombres, des tableaux, true, false, null, ou tout autre objet (JSON).
• Une valeur de fonction (voir le paragraphe "Mthodes" ci-avant) ne peut pas tre affecte comme valeur en JSON.
• Les objets Date seront convertis en chanes de caractres avec JSON.parse().
• JSON.parse() rejtera les noms de proprits calculs et renverra une erreur dans ce cas.

Spcifications

Compatibilit des navigateurs

Voir aussi

• Accesseurs de proprits
• get / set
• Dfinitions de mthode
• Grammaire lexicale de JavaScript