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

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

Description

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

Given the following code:

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

You are now able to shorten this to:

JavaScript
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.

js;highlight[12]
// 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.

JavaScript
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

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

Computed property names

The shorthand syntax also supports computed property names.

js;highlight[4]
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).
    JavaScript
    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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/functions/method_definitions

ECMAScript6 Functions JavaScript Object Syntax