Object initializer

Objects can be initialized using new Object(), Object.create(), or using the literal notation (initializer notation). An object initializer is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

Syntax

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

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

var o = {
  <var>property: function </var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {},
};

New notations in ECMAScript 2015

Please see the compatibility table for support for these notations. In non-supporting environments, these notations will lead to syntax errors.

JavaScript
// Shorthand property names (ES6)
var a = "foo", b = 42, c = {};
var o = { a, b, c };

// Shorthand method names (ES6)
var o = {
  <var>property</var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {},
  * <var>generator</var>() {}
};

// Computed property names (ES6)
var prop = "foo";
var o = {
  [prop]: "hey",
  ["b" + "ar"]: "there",
};

Description

An object initializer is an expression that describes the initialization of an Object. Objects consist of properties, which are used to describe an object. Values of object properties can either contain primitive data types or other objects.

Creating objects

An empty object with no properties can be created like this:

JavaScript
var object = {};

However, the advantage of the literal or initializer notation is, that you are able to quickly create objects with properties inside the curly braces. You simply notate a list of key: value pairs delimited by comma. The following code creates an object with three properties and the keys are "foo", "age" and "baz". The values of these keys are a string "bar", a number 42 and the third property has another object as its value.

JavaScript
var object = {
  foo: "bar",
  age: 42,
  baz: { myProp: 12 },
}

Accessing properties

Once you have created an object, you might want to read or change them. Object properties can be accessed by using the dot notation or the bracket notation. See property accessors for detailed information.

JavaScript
object.foo; // "bar"
object["age"]; // 42

object.foo = "baz";

Property definitions

We have already learned how to notate properties using the initializer syntax. Oftentimes, there are variables in your code that you would like to put into an object. You will see code like this:

JavaScript
var a = "foo", 
    b = 42,
    c = {};

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

With ECMAScript 2015, there is a shorter notation available to achieve the same:

JavaScript
var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c };

Duplicate property names

When using the same name for your properties, the second property will overwrite the first.

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

In ECMAScript 5 strict mode code, duplicate property names were considered a SyntaxError.  With the introduction of computed property names making duplication possible at runtime, ECMAScript 2015 has removed this restriction.

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

    // No error thrown, duplicate property names allowed in strict mode
    return true;
  } catch (e) {
    // Error thrown, duplicates prohibited in strict mode
    return false;
  }
}

Method definitions

A property of an object can also refer to a function or a getter or setter method.

JavaScript
var o = {
  <var>property: function </var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {},
};

In ECMAScript 2015, a shorthand notation is available, so that the keyword "function" is no longer necessary.

JavaScript
// Shorthand method names (ES6)
var o = {
  <var>property</var>([<var>parameters</var>]) {},
  get <var>property</var>() {},
  set <var>property</var>(<var>value</var>) {},
  * <var>generator</var>() {}
};

In ECMAScript 2015 There is a way to concisely define properties whose values are generator functions:

JavaScript
var o = {
  * <var>generator</var>() {
    ...........
  }
};

In ECMAScript 5 you would write it like this (but note that ES5 has no generators):

JavaScript
var o = {
  generator<var>: function *</var>() {
    ...........
  }
};

For more information and examples about methods, see method definitions.

Computed property names

Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed as the property name. This is symmetrical to the bracket notation of the property accessor syntax, which you might have used to read and set properties already. Now you can use the same syntax in object literals, too:

JavaScript
// Computed property names (ES6)
var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

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

console.log(config); // { size: 12, mobileSize: 4 }

Prototype mutation

A property definition of the form __proto__: value or "__proto__": value does not create a property with the name __proto__.  Instead, if the provided value is an object or null, it changes the [[Prototype]] of the created object to that value.  (If the value is not an object or null, the object is not changed.)

JavaScript
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__"));

Only a single prototype mutation is permitted in an object literal: multiple prototype mutations are a syntax error.

Property definitions that do not use "colon" notation are not prototype mutations: they are property definitions that behave identically to similar definitions using any other name.

JavaScript
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);

Object literal notation vs JSON

The object literal notation is not the same as the JavaScript Object Notation (JSON). Although they look similar, there are differences between them:

  • JSON permits only property definition using "property": value syntax.  The property name must be double-quoted, and the definition cannot be a shorthand.
  • In JSON the values can only be strings, numbers, arrays, true, false, null, or another (JSON) object.
  • A function value (see "Methods" above) can not be assigned to a value in JSON.
  • Objects like Date will be a string after JSON.parse().
  • JSON.parse() will reject computed property names and an error will be thrown.

Specifications

Specification Status Comment
ECMAScript 1st Edition (ECMA-262) Standard initial definition.
ECMAScript 5.1 (ECMA-262)
The definition of 'Object Initializer' in that specification.
Standard getter and setter added.
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Object Initializer' in that specification.
Standard Shorthand method/property names and computed property names added.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Object Initializer' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 1 1 1
Computed property names (Yes) 34 (34) No support No support 7.1
Shorthand property names (Yes) 33 (33) No support No support No support
Shorthand method names 42.0 34 (34) No support No support No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) 1.0 (1.0) 1 1 1 1.0
Computed property names No support (Yes) 34.0 (34) No support No support No support No support
Shorthand property names No support (Yes) 33.0 (33) No support No support No support No support
Shorthand method names No support 42.0 34.0 (34) No support No support No support 42.0

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/operators/object_initializer

computed ECMAScript 2015 ECMAScript6 JavaScript JSON Literal Methods mutation Object Primary Expression properties