Method definitions

Trwa tłumaczenie tego artykułu.

Starting with ECMAScript 2015, 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

const obj = {
  get property() {},
  set property(value) {},
  property( parameters… ) {},
  *generator( parameters… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  //  with computed keys
  get [property]() {},
  set [property](value) {},
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},
  async* [generator]( parameters… ) {},
};

Description

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

Given the following code:

const obj = {
  foo: function() {
    // ...
  },
  bar: function() {
    // ...
  }
}

You are now able to shorten this to:

const obj = {
  foo() {
    // ...
  },
  bar() {
    // ...
  }
}

Generator methods

Generator methods can be defined using the shorthand syntax as well.

When doing so:

  • The asterisk (*) in the shorthand syntax must be before the generator property name. (That is, * g(){} will work, but g *(){} will not.)
  • Non-generator method definitions cannot contain the yield keyword. This means that legacy generator functions won't work either, and will throw a SyntaxError. Always use yield in conjunction with the asterisk (*).

// Using a named property
const obj2 = {
  g: function* () {
    let index = 0
    while (true) {
      yield index++
    }
  }
};

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

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

Async methods

Async methods can also be defined using the shorthand syntax.

// Using a named property
const obj3 = {
  f: async function () {
    await some_promise
  }
}

// The same object using shorthand syntax
const obj3 = { 
  async f() {
    await some_promise
  }
}

Async generator methods

Generator methods can also be async.

const obj4 = {
  f: async function* () {
    yield 1
    yield 2
    yield 3
  }
};

// The same object using shorthand syntax
const obj4 = {
  async* f() {
   yield 1
   yield 2
   yield 3
  }
}

Method definitions are not constructable

All methods are not constructors (only shorthand syntax)! They will throw a TypeError if you try to instantiate them.

const objA = { 
  method() {}
}
new objA.method  // TypeError: obj.method is not a constructor

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

Examples

Simple test case

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

Computed property names

The shorthand syntax also supports computed property names.

const 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

// A global function 
function foo() {
  return 1
}

let name = 'foo'
console.log(window[name]())  // 1


Specifications

Specification
ECMAScript (ECMA-262)
The definition of 'Method definitions' in that specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Method definitionsChrome Full support 39Edge Full support 12Firefox Full support 34IE No support NoOpera Full support 26Safari Full support 9WebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 34Opera Android Full support 26Safari iOS Full support 9Samsung Internet Android Full support 4.0nodejs Full support Yes
Async generator methodsChrome Full support 63Edge Full support 79Firefox Full support 55IE No support NoOpera Full support 50Safari Full support 12WebView Android Full support 63Chrome Android Full support 63Firefox Android Full support 55Opera Android Full support 46Safari iOS Full support 12Samsung Internet Android Full support 8.0nodejs Full support 10.0.0
Full support 10.0.0
Full support 8.10.0
Disabled
Disabled From version 8.10.0: this feature is behind the --harmony runtime flag.
Async methodsChrome Full support 55Edge Full support 15Firefox Full support 52IE No support NoOpera Full support 42Safari Full support 10.1WebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 52Opera Android Full support 42Safari iOS Full support 10.3Samsung Internet Android Full support 6.0nodejs Full support 7.6.0
Full support 7.6.0
Full support 7.0.0
Disabled
Disabled From version 7.0.0: this feature is behind the --harmony runtime flag.
Generator methods are not constructable (ES2016)Chrome Full support 42Edge Full support 13Firefox Full support 43IE No support NoOpera Full support 29Safari No support NoWebView Android Full support 42Chrome Android Full support 42Firefox Android Full support 43Opera Android Full support 29Safari iOS No support NoSamsung Internet Android Full support 4.0nodejs Full support 6.0.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

See also