Method definitions
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 ES5.
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, butg *(){}
will not.) -
Non-generator method definitions cannot contain the
yield
keyword. This means that legacy generator functions won't work either, and will throw aSyntaxError
. Always useyield
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
Methods cannot be constructors! 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 Language Specification # sec-method-definitions |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Method definitions | ChromeFull support39 | EdgeFull support12 | FirefoxFull support34 | Internet ExplorerNo supportNo | OperaFull support26 | SafariFull support9 | WebView AndroidFull support39 | Chrome AndroidFull support39 | Firefox for AndroidFull support34 | Opera AndroidFull support26 | Safari on iOSFull support9 | Samsung InternetFull support4.0 | DenoFull support1.0 | Node.jsFull support4.0.0 |
Async generator methods | ChromeFull support63 | EdgeFull support79 | FirefoxFull support55 | Internet ExplorerNo supportNo | OperaFull support50 | SafariFull support12 | WebView AndroidFull support63 | Chrome AndroidFull support63 | Firefox for AndroidFull support55 | Opera AndroidFull support46 | Safari on iOSFull support12 | Samsung InternetFull support8.0 | DenoFull support1.0 | Node.jsFull support10.0.0 |
Async methods | ChromeFull support55 | EdgeFull support15 | FirefoxFull support52 | Internet ExplorerNo supportNo | OperaFull support42 | SafariFull support10.1 | WebView AndroidFull support55 | Chrome AndroidFull support55 | Firefox for AndroidFull support52 | Opera AndroidFull support42 | Safari on iOSFull support10.3 | Samsung InternetFull support6.0 | DenoFull support1.0 | Node.jsFull support7.6.0 |
Generator methods are not constructable (ES2016) | ChromeFull support42 | EdgeFull support13 | FirefoxFull support43 | Internet ExplorerNo supportNo | OperaFull support29 | SafariFull support9.1 | WebView AndroidFull support42 | Chrome AndroidFull support42 | Firefox for AndroidFull support43 | Opera AndroidFull support29 | Safari on iOSFull support9.3 | Samsung InternetFull support4.0 | DenoFull support1.0 | Node.jsFull support6.0.0 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.