JavaScript Object Literal: What Exactly Is {A, B, C}

Javascript object literal: what exactly is {a, b, c}?

It is an Object Initializer Property Shorthand in ES6.

var f = {a, b, c, d:1}; // Will be equal to {a:a, b:b, c:c, d:1}

This works because the property value has the same name as the property identifier. This a new addition to the syntax of Object Initialiser (section 11.1.5) in the latest ECMAScript 6 draft Rev 13. And of course, just like the limitations set from ECMAScript 3, you can’t use a reserved word as your property name.

Such a shorthand won’t dramatically change your code, it only makes everything a little bit sweeter!

function createCar(name, brand, speed) {
  return { type: 'Car', name: name, brand: brand, speed: speed };
}

// With the new shorthand form
function createSweetCar(name, brand, speed) {
  return { type: 'Car', name, brand, speed }; // Yes it looks sweet.
}

Please see the compatibility table for support for these notations. In non-supporting environments, these notations will lead to syntax errors.

This shorthand notation offers object matching pretty nicely:

In ECMAScript5 what we used to do:

var tmp = getData();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

Can be done in ECMAScript6 with a single line of code:

var { op, lhs, rhs } = getData();

Self-references in object literals / initializers

Well, the only thing that I can tell you about are getter:

var foo = {

  a: 5,

  b: 6,

  get c() {

    return this.a + this.b;

  }

}

console.log(foo.c) // 11

Creating Javascript Object without explicitly defining the keys?

This is part of the ES6 object shorthand, where you may use variables from the current scope to declare a property within an object (literal) with the same name and value as that variable.

That is, c = {a, b} expands to c = {a: a, b: b} so long as a and b are both in the current scope.

The MDN documentation goes into more detail here.

Using variable *name* as property name in object literal

It is part of ES6, check for shorthand properties http://es6-features.org/#PropertyShorthand

How to interpret this syntax: {...{key}}?

The syntax {...{keys}}is usually used to pass dynamic props and is called rest spread syntax

This of it as

const keys = 'xyz';
const props = { keys: keys}; // can also be written as const props = {keys};
...
<mark {...props}>{s.slice(1,-1)}</mark>

However there was really no need of this syntax here and could have been simply written as

<mark key={key}>{s.slice(1,-1)}</mark>

What difference does it makes to parse something as an object literal rather than as a block?

First, don't eval JSON, use JSON.parse on the String source

---

A block is a "group of expressions" for example,

let x = 0;
if (true) {
    // this is a block
    ++x;
}

However, equally this is also a block

let x = 0;
{ // hi there, I'm a block!
    ++x;
}

This means when the interpreter sees block notation, it assumes a block even if you do something like this

{ // this is treated as a block
    foo: ++x
}

Here, foo acts as a label rather than a property name and if you try to do more complex things with the attempted object literal, you're going to get a Syntax Error.

When you want to write an Object literal ambiguously like this, the solution is to force the interpreter into "expression mode" explicitly by providing parenthesis

({ // this is definately an Object literal
    foo: ++x
})

---

Related Topics