How does this object method definition work without the "function" keyword?

Question

I discovered this by accidentally leaving off the function keyword. Ordinarily the foobar method in the module below would be declared as foobar: function(arg1), but interestingly the following works, at least in some browsers, e.g. Chrome Version 44.0.2403.157 m, but it fails in IE 11.0.9600.17959

How is it possible that this runs at all in any browser? Is this some sort of new ES6 functionality?

var module = {
    foobar(arg1) {
        alert(arg1);
    }
};

module.foobar("Hello World");

score 30 · Accepted Answer · edited Mar 08 '16 at 23:33

30

How is it possible that this runs at all in any browser? Is is some sort of new ES6 functionality?

Yes.

...

Method definitions

A property of an object can also refer to a function or a getter or setter method.
var o = {
  property: function ([parameters]) {},
  get property() {},
  set property(value) {},
};
In ECMAScript 6, a shorthand notation is available, so that the keyword "function" is no longer necessary.
// Shorthand method names (ES6)
var o = {
  property([parameters]) {},
  get property() {},
  set property(value) {},
  * generator() {}
};
...

edited Mar 08 '16 at 23:33

2540625

11,022
8
52
58

answered Sep 04 '15 at 18:42

user229044

232,980
40
330
338

As you can see though, in the first case, `new o.preperty()` behaves normally. Using shorthand method names, `new o.property()` throws an error. See [here](http://stackoverflow.com/questions/41193117/constructor-behaving-differently-using-es6-shorthand-notation) – nicovank Jan 09 '17 at 16:46

score 13 · Answer 2 · answered Sep 04 '15 at 18:42

13

ES6 allows "concise methods" which, as you've discovered, aren't cross-browser compatible yet.

answered Sep 04 '15 at 18:42

Joseph

117,725
30
181
234

How does this object method definition work without the "function" keyword?

2 Answers2

Method definitions

Linked

Related