Named function inside a Javascript object? Why does this work?

Question

I stumbled upon this by accident when writing some code:

var obj = {
  myFunc() {
    document.body.innerHTML = 'Hello World!';
  }
};

obj.myFunc();

What I meant to type was this:

var obj = {
  myFunc: function() { 
    // ...
  }
};

I didn't notice I accidentally typed the first one until I realized my code wasn't running in IE11.

Why does the first example work in Chrome/Firefox, and not IE11?

Also, if this is an official language feature, what is this called?

"Why does the first example work in Chrome/Firefox, and not IE11?" — Because only two of those are modern browsers. — Quentin
– Quentin, Commented Jan 6, 2017 at 20:02
It is modern ECMAScript which is valid, but only on browsers that can parse it. — MiltoxBeyond
– MiltoxBeyond, Commented Jan 6, 2017 at 20:04
@LolCoder아카쉬 — No. It's the lumbering final form of a dead browser that was superseded by Edge almost two years ago. — Quentin
– Quentin, Commented Jan 6, 2017 at 20:05

mrmcgreg · Accepted Answer · 2017-01-06 20:13:02Z

7

It's an Enhanced Object Literal, which is es6 syntax. More formally, Object Initializers allow Method Definitions instead of only key/value pairs as in previous versions.

This table tells the compatibility story under 'object literal extensions'. The short answer is just that IE11 hasn't implemented that feature.

answered Jan 6, 2017 at 20:03

mrmcgreg

2,8261 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1