Why would I use the call() method in this case?

Question

So I am kind of having a hard time understanding when the appropriate time to use the call() method would be.

I found this example online:

var person1 = { name: 'Chris' };
var sayName = function() { console.log(this.name) };

// How to use call method
sayName.call(person1)

I understand that the example above allows you to set the context for "this", but why not just pass the person as a param instead, like so:

var sayName = function(person) { console.log(person.name) };
sayName(person1);

Could someone help me understand why you would use the call() method as opposed to just passing the person as a param?

Answer 1

If it is just the name of the person you will have to output in your app, then, of course, using call instead of passing the name as an argument doesn't make any sense.

But, imagine a situation where you have a context with 25 different fields. Would you pass all 25 fields as arguments?

Also, imagine a function which adds the name property to a context:

function person(firstName) {
   this.name = firstName;
}

me = {}
teacher = {}

person.call(me, 'Charlie');
person.call(teacher, 'John')

Besides, the person function can now be used as a constructor.

   var someone = new person('Mary')

The usage of call and apply methods really transcends simple scenarios such as name printing. The best way to explore the usefulness of these function is to learn JS OOP.

Answer 2

When we speak about prototypes and classes, you can always think that calling function always passing left part of calling expression (before dot) to "hidden" this argument:

1. myObj.someFunc() -- myObj
2. someFunc() // strict -- undefined
3. someFunc() // unstrict -- window/global

But in your case, sayName function is not associated to project, so probably you want to achieve this:

var person1 = { name: 'Chris' };
var sayName = function() { console.log(this.name) };

// you can imagine this as very simplified version of "call fn" do internally
person1.sayName = sayName; 
person1.sayName(); // logs 'Chris'

It's just a programmer choice how to implement your code. At your case function is not binded to object, so you should specify how to pass context, implicit or explicit, and passing it implicit (via left part of dot) doesn't make language less or more functional.

If you use ES6+ env. you should probably forget about the call and apply methods at most cases.

class Person {
  constructor(name) {
    this.name = name;
  }

  someFunc() {
    console.log(this.name);
  }
}

let person1 = new Person('Chris');
person1.someFunc(); // logs 'Chris'

let refToFn = person1.someFunc;
refToFn(); // error, because no implicit (via dot) or explicit (via arg) context passing

For example "Python" has opposite paradigm, you should always pass "this" ("self" at args) context to the method:

def someFunc(self):
  print self.name;

The real question maybe you want to ask is why "this" context is exist in javascript.

Answer 3

Answer is: At first tell me why you need if you pass direct object reference then use call() function?

See below, you can do that easily even no need any .call() when you passing direct any object:

var person1 = { name: 'Chris' };
var sayName = function(obj) { console.log(obj.name) };
sayName(person1);

You should know the purpose why we using .apply(), .call() etc. One of the purpose of borrowing the mathod from one object to another.