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 syntax error.

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

Example of a property value that is a 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}

// 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)

obj = { fname() {body} }

is equivalent to:

obj = { fname: function () {body} }

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

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

Parent of {}

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( Reflect.getPrototypeOf(o1) === Reflect.getPrototypeOf(o2) );

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

console.log(
JSON.stringify ( Object.getOwnPropertyDescriptor(o1, "p") )
===
JSON.stringify ( Object.getOwnPropertyDescriptor(o2, "p") )
);

// all true

JS Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Find Object's Type
  4. Prototype Chain
  5. Create Object
  6. Object Literal Expr
  7. Create Object with Parent X
  8. Get/Set Parent
  9. Show Prototype Chain
  10. Prevent Adding Property
  11. Clone Object
  12. Test Object Equality
  13. Add Method to Prototype
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, 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 Object Reference
  5. DOM Scripting
  6. SVG
  7. Blog