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 Section
var obj = {
property( parameters… ) {},
*generator( parameters… ) {},
async property( parameters… ) {},
async* generator( parameters… ) {},
// with computed keys:
[property]( parameters… ) {},
*[generator]( parameters… ) {},
async [property]( parameters… ) {},
// compare getter/setter syntax:
get property() {},
set property(value) {}
};
Description Section
The shorthand syntax is similar to the getter and setter syntax introduced in ECMAScript 2015.
Given the following code:
var obj = {
foo: function() {
/* code */
},
bar: function() {
/* code */
}
};
You are now able to shorten this to:
var obj = {
foo() {
/* code */
},
bar() {
/* code */
}
};
Generator
Generator methods can be defined using the shorthand syntax as well. When using them,
- 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 may not 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
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
Async methods can also be defined using the shorthand syntax.
// Using a named property
var obj3 = {
f: async function () {
await some_promise;
}
};
// The same object using shorthand syntax
var obj3 = {
async f() {
await some_promise;
}
};
Generator methods can also be async.
var obj4 = {
f: async function* () {
yield 1;
yield 2;
yield 3;
}
};
// The same object using shorthand syntax
var obj4 = {
async* f() {
yield 1;
yield 2;
yield 3;
}
};
Method definitions are n
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 Section
Simple t
var obj = {
a: 'foo',
b() { return this.a; }
};
console.log(obj.b()); // "foo"
Computed property
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 Section
Specification / Status / CommentECMAScript 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 Latest Draft (ECMA-262)
The definition of 'Method definitions' in that specification. / Draft
Browser compatibilitySection
Update compatibility data on GitHub
Desktop / Mobile / ServerChrome / Edge / Firefox / Internet Explorer / Opera / Safari / Android webview / Chrome for Android / Firefox for Android / Opera for Android / Safari on iOS / Samsung Internet / Node.js
Method definitions / Full support39 / Full supportYes / Full support34 / No supportNo / Full support26 / Full support9 / Full support39 / Full support39 / Full support34 / Full support26 / Full support9 / Full support4.0 / Full supportYes
Generator methods are not constructable (ES2016) / ? / ? / Full support43 / No supportNo / ? / No supportNo / ? / ? / Full support43 / ? / No supportNo / ? / ?
Async methods / ? / ? / Full support52 / No supportNo / ? / No supportNo / ? / ? / Full support52 / ? / No supportNo / ? / Full support7.6.0Open
Async generator methods / ? / ? / Full support55 / No supportNo / ? / No supportNo / ? / ? / Full support55 / ? / No supportNo / ? / Full support10.0.0Open
Legend
Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.