3

Whats the difference between defining a method on an object like o.x and o.y?

o = {
    x: function () {
        console.log('hi')
    },
    y () {    
        console.log('bye')
    }
}
Rocket Hazmat
  • 204,503
  • 39
  • 283
  • 323
ethtrhaef
  • 37
  • 5
  • Do not vandalize your posts. By posting on this site, you've irrevocably granted the Stack Exchange network the right to distribute that content under the [CC BY-SA 4.0 license](//creativecommons.org/licenses/by-sa/4.0/) for as long as it sees fit to do so. For alternatives to deletion, see: [I've thought better of my question; can I delete it?](https://stackoverflow.com/help/what-to-do-instead-of-deleting-question) – Cody Gray Dec 22 '20 at 11:58

2 Answers2

5

The y() { syntax is generally called a method.

The only real difference in modern environments is that a method cannot be instantiated with new, but functions can:

const o = {
    x: function () {
        console.log('hi')
    },
    y () {    
        console.log('bye')
    }
};

new o.x();
new o.y();

Uncaught TypeError: o.y is not a constructor @ JS line 11

This is ES2015 syntax, though. Ancient environments like IE11 do not support method syntax (or arrow functions, or many other nice things).

CertainPerformance
  • 260,466
  • 31
  • 181
  • 209
0

One of the goals was to provide syntactic sugar to bring Javascript closer to class syntax features: https://babeljs.io/docs/en/learn/#enhanced-object-literals

Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods and making super calls. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.

super also behaves differently. This is on the level of language semantics, not at runtime.
In relation to the nature of methods, differences are related to inheritance and class features, since it was introduced with the introduction of class syntax.

Babel transpiled version of code
// logs 'method 1'

var obj1 = { method1:()=>console.log('method 1') }

var obj2 = {
  method2() {
    super.method1();
  }
}
Object.setPrototypeOf(obj2, obj1);
obj2.method2();

This throws a syntax error and will not work, because super does not have meaning here:

var obj1 = { method1:()=>console.log('method 1') }

var obj2 = {
  method2: function() {
    super.method1(); // throws syntax erro
  }
}
Object.setPrototypeOf(obj2, obj1);
obj2.method2();
user120242
  • 13,070
  • 3
  • 32
  • 48
  • Is there any specific term for methods defined like o.y so I can research more about it? – ethtrhaef May 25 '20 at 01:37
  • I've provided a link with a short description from the guys who are on the bleeding edge of supporting the newest ES features that will hopefully help. CertainPerformance's reference to `ES2015 methods` is a good search term. `shorthand object methods` may also be helpful. – user120242 May 25 '20 at 01:47
  • `Javascript super` may also help, as that was one of the major features introduced with object methods. – user120242 May 25 '20 at 01:54