Is { abcFunc(arg1, arg2){ /*FuncBody*/ } } new Object method syntax?

Question

When i was reading MDN docs i got the following Objects syntax's,

var o = {
  a: 7,
  get b() { 
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  }
};

// ...

From Here. At first i thought, It was only for get & set. But then i saw this,

// ...

const handler = {
  getPrototypeOf(target) {
    return monsterPrototype;
  }
};

// ...

From Here. And When i tested with custom function it worked. here,

let obj = {
  _sum: 0,
  sum(a, b) {
    return this._sum += (a + b);
  }
}

console.log(obj.sum(2, 3));    // int 5
console.log(obj.sum(7, 3));    // int 15
console.log(obj.sum(25, 75));  // int 115

It also works like this with expression !!

let obj = {
  _sum: 0,
  ['su' + 'm'](a, b) {
    return this._sum += (a + b);
  }
}

console.log(obj.sum(2, 3));    // int 5
console.log(obj.sum(7, 3));    // int 15
console.log(obj.sum(25, 75));  // int 115

I searched MDN, googled for new Objects Method Syntax, but still couldn't find this kind of syntax. So, I just want to if its a standard syntax which i can use or A experimental technology. I am using Chome v79.

Answer 1

You're using two types of syntaxes introduced in ES6. The first is known as "shorthand method names" and the other is known as computed property names. So they're not considered experimental technology and have been part of the standard since 2015. You can find the syntax for shorthand method names in section 14.3 of the spec as well as computed property names in section 12.2.6.

Shorthand method names allow you to omit the function keyword so that the name of the method is used as the property name:

In ECMAScript 2015, a shorthand notation is available, so that the keyword "function" is no longer necessary.

Your last code block combines both shorthand method names and computed property names to create the method name sum at runtime. Computed property names allow you to add properties to object literals as expressions, this means that it doesn't just have to be used for object methods, but can be used for standard object literal properties:

const obj = {
  ["k" + "ey"]: 1
}
console.log(obj.key); // 1

You can use shorthand method names and computed property names in most modern browsers, however, Internet Explorer currently doesn't support these two syntaxes.

You can read more about method definitions in objects here

Answer 2

Method Definitions specs

From BabelJS Learn ES2015: Enhanced Object Literals:

defining methods and making super calls [...] bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.

Note that the object literal syntax enhancements (which categorically encompasses method definitions) had the explicit goal for not only bringing in class syntax, but the conveniences of class syntax to classical Javascript syntax.

There are two main differences from functions as object properties, where methods are not just a simple shorthand for functions as object properties.

1. Support for super syntax, which allows accessing properties on the inherited prototype chain
2. Like arrow functions, they cannot be used as constructors. new object.method will fail if method is declared using method definition syntax
   Note: methods are different from (and in a way opposite to) arrow functions and have context (this binding), and they work with .bind()

Note: super is a syntax level feature, and there is only a difference when super is detected. see 14.3.4 HasDirectSuper

Demo of the usage of super and TypeError thrown when trying to use method property as a constructor.

x = {
  method() {
    return super.toString()
  },
  toString() {
    return 'fake'
  },
  prop: function(){}  
}

console.log(`x.method()->super.toString() : ${x.method()}`)
console.log(`x.toString(): ${x.toString()}`)
console.log(`new x.prop: `, new x.prop)
try{
console.log(`new x.method: `,new x.method)
} catch(e) {console.log(`new x.method error: ${e.toString()}`)}

super failing when used in a function as an object property demoed separately, since it is a syntax level error and would block parsing:

obj = { notmethod: function() { return super.toString() } }