Are there any real differences/specificities between these function method forms?

Question

About methods to be "called" from outside of objects, can I say these three ways below act the same inside of my code?

Example:

var boat = 
{
  peter: () => {console.log("a")},
  james: function() {console.log("b")},
  john() {console.log("c")}
}

These are the ways I know how to apply functions inside of objects/variables, anyway...

I'd like to know if there is any major difference in each form, since all three would be called the same way:

boat.peter();
boat.james();
boat.john();

See [the Method definition section of the object initializer documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions) for names. See [Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?](https://stackoverflow.com/q/34361379/215552) for the difference between the first two. — Heretic Monkey, Sep 15 '20 at 14:11

score 0 · Answer 1 · answered Sep 15 '20 at 14:51

In your example there is no difference, but if you'll watch this example

const obj = {
  someVar: 100,
  
  // this = obj here => the log will print '100' because obj have someVar
  functionLog: function () {
    console.log(this.someVar);
  },

  // this = global (widnow) here => the log will print undefined because doesn't have someVar
  // this is the same as writing varName: function () {console.log(this.someVar);}.bind(window) or
  // function () {console.log(this.someVar);}.bind(this) while this = global (window)
  arrowLog: () => console.log(this.someVar), 
  
  // this = obj here => the log will print '100' because obj have someVar
  // this is a prettier way to write a regular function in es6, when compiled to es5, it'll look just like functionLog
  memberFunctionLog() {
    console.log(this.someVar); // this = obj here
  }
}

obj.arrowLog();
obj.functionLog();
obj.memberFunctionLog();

arrow function is just like a regular function that you bind to specific scope, the scope will be the scope of where you declare it, it's useful mostly in classes

class A {
  constructor() {
    this.someVar = 100;
    this.arrowLog = () => console.log(this.someVar);
  }
  
  memberLog() {
    console.log(this.someVar);
  }
}

const a = new A();

const arrowLog = a.arrowLog;
const unbindedLog = a.memberLog;
const bindedLog = a.memberLog.bind(a); // Just like an arrow function, keeps it's scope

arrowLog(); // will print 100, because the arrow function was declared where this = specific instance of A, and arrow function keeps it's scope

// unbindedLog(); // will print undefined, because unbindedLog was declared where this = global (window) and memberLog is not an arrow function

bindedLog(); // Will print 100, because it was binded with a, so this = a

Are there any real differences/specificities between these function method forms?

1 Answers1