Why [[HomeObject]] is different in shorthand syntax of method?

Question

This question is derived from super keyword unexpected here

The accepted answer says:

Because super is only valid inside methods.

But in MDN, it seems these two are both methods:

let person = {
    greeting() {
        return "Hello";
    }
};

let friend = {
    // shorter syntax for method?
    greeting() {
        return super.greeting() + ", hi!";
    }

//  method?
//  greeting: function() {
//      return super.greeting() + ", hi!"; // Throw error: Uncaught SyntaxError: 'super' keyword unexpected here
//  }

};

Object.setPrototypeOf(friend, person);
console.log(friend.greeting());   

In understanding es6, Nacholas says:

Attempting to use super outside of concise methods results in a syntax error

Methods were just object properties that contained functions instead of data.

Any reference to super uses the [[HomeObject]] to determine what to do. The first step is to call Object.getPrototypeOf() on the [[HomeObject]] to retrieve a reference to the prototype. Then, the prototype is searched for a function with the same name. Last, the this binding is set and the method is called.

So it seems [[HomeObject]] is different in shorthand syntax of method? I'm curious why?

Answer 1

First off, MDN is not official Javascript documentation. While it's often helpful, it's not the definitive source for anything related to the language. That official specification would be in the ECMAScript specification. That's where the Javascript grammar is defined.

In that document, there is something called a MethodDefinition. There are several syntaxes that can be used for a method definition. The greeting() {} syntax is one such syntax that can be used for a MethodDefinition. The typical object literal property definition of propName: function() {} is not. Here's how it is defined:

Then, to see what a MethodDefinition is, you go to section 14.3.8 where it documents the steps for a MethodDefinition as follows:

In Step 7, it calls MakeMethod(). If you go to that part of the specification, you will see that's where the [[HomeObject]] value gets set.

So, as you've already discovered super relies on [[HomeObject]] being set and perusing the specification, this is the only way that it gets set. So, for super to be allowed, it has to call MakeMethod() and the only way MakeMethod() gets called is with one of the above syntaxes and a regular object literal syntax for a property such as propName: fn is not one of them.

Answer 2

The [[HomeObject]] property is defined on methods of both classes and regular objects. But for objects, methods must be declared exactly as method(), not "method: function()".

There are no differences for us, but they are for JavaScript.

The example below uses the not-method, property-function syntax. So it doesn't have [[HomeObject]], and inheritance doesn't work:

 let animal = {
  eat: function(){ 
    console.log(this)
  }
};

let rabbit = {
  __proto__: animal,
  eat: function() {
    super.eat();
  }
};

rabbit.eat(); 

// Error calling super (because there is no [[HomeObject]])

as mentioned above

the [[HomeObject]] value is set in the MakeMethod() method, in turn, is only available for functions that fit the role of the method, i.e. functions declared as:

PropertyName ( StrictFormalParameters ) { FunctionBody } that part of the specification