JS: Object Literal Expression

The most useful and simple way to create a object is using the literal expression {…}.

{k1:v1,k2:v2 …} → return a new object with properties key k1 value v1, etc.

// create object with 2 properties
const jj = {aa:7, bb:8};

console.log( jj ); // { aa: 7, bb: 8}

Property key must be string or symbol, else, it's converted to string automatically. [see JS: Property Key]

Ending comma is ok.

// ending comma is ok
const h4 = { k1:7, k2:8, };

console.log( h4 ); // { k1: 7, k2: 8 }

Repeated comma is not ok.

// repeated comma is not ok
const hh = { a:1, , b:2};
// SyntaxError: Unexpected token

Example of a property value of function:

// example of object with a method
const my = {
    dd:7,
    ff: function (x) { return x + 1; },
};

console.log( my ); // { dd: 7, ff: [Function: ff] }

// call the function
console.log ( my.ff(3) ); // 4

Computed Property Key (ES2015)

if property key is enclosed by square bracket [key], the key is evaluated as expression.

obj = {[expression]:value}

This is called “computed property key”.

// es2015 computed property syntax. use [] around the property key
const obj = {["a" + "b"]: 4 };
console.log(obj.ab); // 4

This is useful when you want a variable's value to be the property key.

// computed property key
const x = "cc";
const obj = {[x]: 3};
console.log(obj.cc); // 3

This new syntax is especially useful for property key that is symbol. [see JS: Symbol Tutorial]

Method Syntax Shorthand (ES2015)

Method syntax shorthand lets you define function in object literal with shorter syntax.

obj = { fname() {} }

is equivalent to

obj = { fname: function () {} }

// new syntax shorthand for method, ES2015
const obj = {
    f(x) { return x + 1; },
    g:4
};

console.log( obj.f(2) ); // 3

[see JS: ES2015 Object Literal Expression Extensions]

Prototype of Object Literal Expression

The parent of object created using {…} is Object.prototype.

[see JS: Prototype and Inheritance]

[see JS: Object.prototype]

Object Literal Expression vs Object.Create

{k1:v1 …}

is equivalent to

Object.create(Object.prototype,{k1:{value:v1, enumerable: true, configurable: true, writable: true},…})

[see JS: Object.create]

// check equivalence of 2 ways to create a object

const o1 = {"p":1};

const o2 = Object.create(
    Object.prototype,
    { "p":
      {value:1, enumerable: true, configurable: true, writable: true}
    }
);

console.log( Object.getPrototypeOf(o1) === Object.getPrototypeOf(o2) ); // true

console.log( Object.getOwnPropertyDescriptor(o1, "p") );
// { value: 1, writable: true, enumerable: true, configurable: true }

console.log( Object.getOwnPropertyDescriptor(o2, "p") );
// { value: 1, writable: true, enumerable: true, configurable: true }

console.log ( Object.isExtensible ( o1 ) ); // true
console.log ( Object.isExtensible ( o2 ) ); // true