Anobject initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}). Objects can also be initialized usingObject.create() orby invoking a constructor function with thenew operator.

Try it

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: 42const object3 = { a, b, c };console.log(object3.a);// Expected output: "foo"

Syntax

o = {  a: "foo",  b: 42,  c: {},  1: "number literal property",  "foo:bar": "string literal property",  shorthandProperty,  method(parameters) {    // …  },  get property() {},  set property(value) {},  [expression]: "computed property",  __proto__: prototype,  ...spreadProperty,};

Description

An object initializer is an expression that describes the initialization of anObject. Objects consist ofproperties, which are used to describe an object. The values of object properties can either containprimitive data types or other objects.

Object literal syntax vs. JSON

The object literal syntax is not the same as theJavaScriptObjectNotation (JSON). Although they look similar, there are differences between them:

• JSONonly permits property definition using the"property": value syntax. The property name must be double-quoted, and the definition cannot be a shorthand. Computed property names are not allowed either.
• JSON object property values can only be strings, numbers,true,false,null, arrays, or another JSON object. This means JSON cannot express methods or non-plain objects likeMap orRegExp.
• In JSON,"__proto__" is a normal property key. In an object literal, itsets the object's prototype.

JSON is astrict subset of the object literal syntax, meaning that every valid JSON text can be parsed as an object literal, and would likely not cause syntax errors. The only exception is that the object literal syntax prohibits duplicate__proto__ keys, which does not apply toJSON.parse(). The latter treats__proto__ like a normal property and takes the last occurrence as the property's value. The only time when the object value they represent (a.k.a. their semantic) differ is also when the source contains the__proto__ key — for object literals, it sets the object's prototype; for JSON, it's a normal property.

console.log(JSON.parse('{ "__proto__": 0, "__proto__": 1 }')); // {__proto__: 1}console.log({ "__proto__": 0, "__proto__": 1 }); // SyntaxError: Duplicate __proto__ fields are not allowed in object literalsconsole.log(JSON.parse('{ "__proto__": {} }')); // { __proto__: {} }console.log({ "__proto__": {} }); // {} (with {} as prototype)

Examples

Creating objects

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

const object = {};

However, the advantage of theliteral orinitializer notation is, that you are able to quickly create objects with properties inside the curly braces. You notate a list ofkey: value pairs delimited by commas.

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", the number42, and another object.

const 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. (Seeproperty accessors for detailed information.)

object.foo; // "bar"object["age"]; // 42object.baz; // {myProp: 12}object.baz.myProp; // 12

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:

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

There is a shorter notation available to achieve the same:

const a = "foo";const b = 42;const c = {};// Shorthand property namesconst o = { a, b, c };// In other words,console.log(o.a === { a }.a); // true

Duplicate property names

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

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

After ES2015, duplicate property names are allowed everywhere, includingstrict mode. You can also have duplicate property names inclasses. The only exception isprivate elements, which must be unique in the class body.

Method definitions

A property of an object can also refer to afunction or agetter orsetter method.

const o = {  property: function (parameters) {},  get property() {    return 1;  },  set property(value) {},};

A shorthand notation is available, so that the keywordfunction is no longer necessary.

// Shorthand method namesconst o = {  property(parameters) {},};

There is also a way to concisely define generator methods.

const o = {  *generator() {    // …  },};

Which is equivalent to this ES5-like notation (but note that ECMAScript 5 has no generators):

const o = {  generator: function* () {    // …  },};

For more information and examples about methods, seemethod definitions.

Computed property names

The object initializer syntax also supports computed property names. That allows you to put an expression in square brackets[], that will be computed and used as the property name. This is reminiscent of the bracket notation of theproperty accessor syntax, which you may have used to read and set properties already.

Now you can use a similar syntax in object literals, too:

// Computed property nameslet i = 0;const a = {  [`foo${++i}`]: i,  [`foo${++i}`]: i,  [`foo${++i}`]: i,};console.log(a.foo1); // 1console.log(a.foo2); // 2console.log(a.foo3); // 3const items = ["A", "B", "C"];const obj = {  [items]: "Hello",};console.log(obj); // A,B,C: "Hello"console.log(obj["A,B,C"]); // "Hello"const param = "size";const config = {  [param]: 12,  [`mobile${param.charAt(0).toUpperCase()}${param.slice(1)}`]: 4,};console.log(config); // {size: 12, mobileSize: 4}

Spread properties

Object literals support thespread syntax. It copies own enumerable properties from a provided object onto a new object.

Shallow-cloning (excludingprototype) or merging objects is now possible using a shorter syntax thanObject.assign().

const obj1 = { foo: "bar", x: 42 };const obj2 = { foo: "baz", y: 13 };const clonedObj = { ...obj1 };// { foo: "bar", x: 42 }const mergedObj = { ...obj1, ...obj2 };// { foo: "baz", x: 42, y: 13 }

Prototype setter

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 ornull, it points the[[Prototype]] of the created object to that value. (If the value is not an object ornull, the object is not changed.)

Note that the__proto__ key is standardized syntax, in contrast to the non-standard and non-performantObject.prototype.__proto__ accessors. It sets the[[Prototype]] during object creation, similar toObject.create — instead of mutating the prototype chain.

const obj1 = {};console.log(Object.getPrototypeOf(obj1) === Object.prototype); // trueconst obj2 = { __proto__: null };console.log(Object.getPrototypeOf(obj2)); // nullconst protoObj = {};const obj3 = { "__proto__": protoObj };console.log(Object.getPrototypeOf(obj3) === protoObj); // trueconst obj4 = { __proto__: "not an object or null" };console.log(Object.getPrototypeOf(obj4) === Object.prototype); // trueconsole.log(Object.hasOwn(obj4, "__proto__")); // false

Only a single prototype setter is permitted in an object literal. Multiple prototype setters are a syntax error.

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

const __proto__ = "variable";const obj1 = { __proto__ };console.log(Object.getPrototypeOf(obj1) === Object.prototype); // trueconsole.log(Object.hasOwn(obj1, "__proto__")); // trueconsole.log(obj1.__proto__); // "variable"const obj2 = { __proto__() { return "hello"; } };console.log(obj2.__proto__()); // "hello"const obj3 = { ["__proto__"]: 17 };console.log(obj3.__proto__); // 17// Mixing prototype setter with normal own properties with "__proto__" keyconst obj4 = { ["__proto__"]: 17, __proto__: {} }; // {__proto__: 17} (with {} as prototype)const obj5 = {  ["__proto__"]: 17,  __proto__: {},  __proto__: null, // SyntaxError: Duplicate __proto__ fields are not allowed in object literals};const obj6 = {  ["__proto__"]: 17,  ["__proto__"]: "hello",  __proto__: null,}; // {__proto__: "hello"} (with null as prototype)const obj7 =  {  ["__proto__"]: 17,  __proto__,  __proto__: null,}; // {__proto__: "variable"} (with null as prototype)

Specifications

Browser compatibility

See also

• Property accessors
• get
• set
• Method definitions
• Lexical grammar