- Object initializer
- Try it
- Syntax
- Description
- Object literal syntax vs. JSON
- Examples
- Creating objects
- Accessing properties
- Property definitions
- Duplicate property names
- Method definitions
- Computed property names
- Spread properties
- Prototype setter
- Specifications
- Browser compatibility
- See also
- Object() constructor
- Syntax
- Parameters
- Return value
- Examples
- Creating a new Object
- Using Object given undefined and null types
- Obtaining wrapper objects for BigInt and Symbol
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
Object initializer
An object 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 using Object.create() or by invoking a constructor function with the new operator.
Try it
Syntax
= 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 an Object . Objects consist of properties, which are used to describe an object. The values of object properties can either contain primitive data types or other objects.
Object literal syntax vs. JSON
The object literal syntax is not the same as the JavaScript Object Notation (JSON). Although they look similar, there are differences between them:
- JSON only 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 like Date or RegExp .
- In JSON, «__proto__» is a normal property key. In an object literal, it sets the object’s prototype.
JSON is a strict 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 to JSON.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.
.log(JSON.parse('< "__proto__": 0, "__proto__": 1 >')); // console.log( "__proto__": 0, "__proto__": 1 >); // SyntaxError: Duplicate __proto__ fields are not allowed in object literals console.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:
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 notate a list of key: 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 number 42 , 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. (See property accessors for detailed information.)
.foo; // "bar" object["age"]; // 42 object.baz; // 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 names const 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); //
After ES2015, duplicate property names are allowed everywhere, including strict mode. You can also have duplicate property names in classes. The only exception is private properties, which must be unique in the class body.
Method definitions
A property of an object can also refer to a function or a getter or setter method.
const o = property: function (parameters) >, get property() >, set property(value) >, >;
A shorthand notation is available, so that the keyword function is no longer necessary.
// Shorthand method names const o = property(parameters) >, >;
There is also a way to concisely define generator methods.
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, see method definitions.
Computed property names
The object initializer syntax also supports computed property names. That allows you to put an expression in brackets [] , that will be computed and used as the property name. This is reminiscent of the bracket notation of the property 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 names let i = 0; const 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 const 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); //
Spread properties
Object literals support the spread syntax. It copies own enumerable properties from a provided object onto a new object.
Shallow-cloning (excluding prototype ) or merging objects is now possible using a shorter syntax than Object.assign() .
const obj1 = foo: "bar", x: 42 >; const obj2 = foo: "baz", y: 13 >; const clonedObj = . obj1 >; // const mergedObj = . obj1, . obj2 >; //
Warning: Note that Object.assign() triggers setters, whereas the spread syntax doesn’t!
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 or null , it points the [[Prototype]] of the created object to that value. (If the value is not an object or null , the object is not changed.)
Note that the __proto__ key is standardized syntax, in contrast to the non-standard and non-performant Object.prototype.__proto__ accessors. It sets the [[Prototype]] during object creation, similar to Object.create — instead of mutating the prototype chain.
const obj1 = >; console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true const obj2 = __proto__: null >; console.log(Object.getPrototypeOf(obj2)); // null const protoObj = >; const obj3 = "__proto__": protoObj >; console.log(Object.getPrototypeOf(obj3) === protoObj); // true const obj4 = __proto__: "not an object or null" >; console.log(Object.getPrototypeOf(obj4) === Object.prototype); // true console.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); // true console.log(Object.hasOwn(obj1, "__proto__")); // true console.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__" key const obj4 = ["__proto__"]: 17, __proto__: > >; // (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, >; // (with null as prototype) const obj7 = ["__proto__"]: 17, __proto__, __proto__: null, >; // (with null as prototype)
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Object() constructor
The Object() constructor turns the input into an object. Its behavior depends on the input’s type.
Syntax
new Object(value) Object(value)
Note: Object() can be called with or without new , but sometimes with different effects. See Return value.
Parameters
Return value
When the Object() constructor itself is called or constructed, its return value is an object:
- If the value is null or undefined , it creates and returns an empty object.
- If the value is an object already, it returns the value.
- Otherwise, it returns an object of a type that corresponds to the given value. For example, passing a BigInt primitive returns a BigInt wrapper object.
When Object() is implicitly called via super() in the constructor of a class that extends Object , it initializes a new object with new.target.prototype as its prototype. Any value passed to super() is ignored — for example, even if you pass a number, the this value inside the constructor does not become a Number instance.
Examples
Creating a new Object
const o = new Object(); o.foo = 42; console.log(o); //
Using Object given undefined and null types
The following examples store an empty Object object in o :
const o = new Object(undefined);
Obtaining wrapper objects for BigInt and Symbol
The BigInt() and Symbol() constructors throw an error when called with new , to prevent the common mistake of creating a wrapper object instead of the primitive value. The only way to create a wrapper object for these types is to call Object() with them:
const numberObj = new Number(1); console.log(typeof numberObj); // "object" const bigintObj = Object(1n); console.log(typeof bigintObj); // "object" const symbolObj = Object(Symbol("foo")); console.log(typeof symbolObj); // "object"
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on May 4, 2023 by MDN contributors.
Your blueprint for a better internet.