JS: Object Literal Expression

By Xah Lee. Date: . Last updated: .

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

JS Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Prototype and Inheritance
  4. Create Object
  5. Object Literal Expression
  6. Create Object with Parent X
  7. Get/Set Prototype
  8. Prevent Adding Property
  9. Determine Type of Object
  10. Clone Object
  11. Test Object Equality
  12. Add Method to Prototype
  13. Object Object
  14. Object.prototype
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog