Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Method definitions

Starting with ECMAScript 2015 (ES6), a shorter syntax for method definitions on objects initializers is introduced. It is a shorthand for a function assigned to the method's name.

Syntax

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
// also with computed keys:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
// compare ES5 getter/setter syntax:
  get property() {},
  set property(value) {}
};

Description

The shorthand syntax is similar to the getter and setter syntax introduced in ECMAScript 2015.

Given the following code:

var obj = {
  foo: function() {},
  bar: function() {}
};

You are now able to shorten this to:

var obj = {
  foo() {},
  bar() {}
};

Note : The shorthand syntax uses named function instead of anonymous functions (as in …foo: function() {}…). Named functions can be called from the function body (this is impossible for anonymous function as there is no identifier to refer to). For more details, see function.

Shorthand generator methods

Generator methods can be defined using the shorthand syntax as well. Note that the asterisk (*) in the shorthand syntax must be before the generator property name. That is, * g(){} will work but g *(){} will not.

// Using a named property (pre-ES6)
var obj2 = {
  g: function*() {
    var index = 0;
    while(true)
      yield index++;
  }
};

// The same object using shorthand syntax
var obj2 = { 
  * g() {
    var index = 0;
    while(true)
      yield index++;
  }
};

var it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1

Method definitions are not constructable

All method definitions are not constructors and will throw a TypeError if you try to instantiate them.

var obj = { 
  method() {},
};
new obj.method; // TypeError: obj.method is not a constructor

var obj = { 
  * g() {} 
};
new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)

Examples

Simple test case

var obj = {
  a : "foo",
  b(){ return this.a; }
};
console.log(obj.b()); // "foo"

Computed property names

The shorthand syntax also supports computed property names.

var bar = {
  foo0 : function (){return 0;},
  foo1(){return 1;},
  ["foo" + 2](){return 2;},
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Method definitions' in that specification.
Standard Initial definition.
ECMAScript 2016 (ECMA-262)
The definition of 'Method definitions' in that specification.
Standard Changed that generator methods should also not have a [[Construct]] trap and will throw when used with new.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Method definitions' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Method definition shorthand 39 34 (34) No support 26 No support
Generator methods are not constructable (ES2016) ? 43 (43) ? ? ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Method definition shorthand No support No support 34.0 (34) No support No support No support
Generator methods are not constructable (ES2016) ? ? 43.0 (43) ? ? ?

SpiderMonkey-specific notes

  • Prior to SpiderMonkey 38 (Firefox 38 / Thunderbird 38 / SeaMonkey 2.35),  "get" and "set" were invalid names for generator methods. This has been fixed in bug 1073809.
  • Prior to SpiderMonkey 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38), curly braces were not required in method definitions. They are required from now on to conform to the ES6 specification and will throw a SyntaxError in this and later versions (bug 1150855).
    var o = {x() 12}; // SyntaxError
  • The restriction that only generator methods are constructors has been implemented in SpiderMonkey 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38). See also bug 1059908 and bug 1166950.

See also

Document Tags and Contributors

 Contributors to this page: CYBAI, SphinxKnight, fscholz, bergus, jpmedley, ysangkok
 Last updated by: CYBAI,