What is the advantage of using call method instead of passing an object in the parameter

Question

In the below code, which one is the right and how these two are different

Using call method

var obj = {
  num: 10
 };

var add = function(a) {
  return this.num + a
}
console.log(add.call(obj,4))

Passing object in parameter

var obj = {
  num: 10
};
var add = function(obj,a) {
  return obj.num + a
}
console.log(add(obj,4))

This is quite opinion based, but i prefer the later one as i think that one should usually not change the context ( there are some really good but rare usecases for changing the context manually) — Jonas Wilms, Dec 06 '17 at 17:31
I was going to offer up the use case of a named function that is used in an event callback, that uses `this` for the element reference. The use of `call` allows other non-event based invocations to use the same method. — Taplar, Dec 06 '17 at 17:32
@rory McCrossan i admit that it is a slight duplicate, but in my opinion its not enough to close ( just saying ) — Jonas Wilms, Dec 06 '17 at 17:32

score 1 · Answer 1 · answered Dec 06 '17 at 18:38

Your second code block is just a regular function. The first one however is a bit more tricky. So the question is basically:

When to work with context in javascript?

In javascript, the term context basically means this. It is usually used when you call a method of an object, so that you can refer to the object. That's one of the core concepts of OOP, were we only define a function once inside the prototype, and every object of that class which inherits from it exposes this method, it won't work without context. So that's what this was invented for. However there are some cases, were context is useful without inheritance. E.g. Eventhandlers are usually contextless, as they are not part of any object:

window.addEventListener("load", function(evt){
  const el = evt.target;
};

However as it is an Eventhandler of window, wouldn't it make sense that it is executed in the context of window? If you now say "YES", then you (will) probably love JS:

window.addEventListener("load", function(){
 this.document.body.innerHTML = "Dynamic context can be cool!";
});

So in JS this is the way of refering to the object, the function refers to. Through Function.prototype.call we can make use of this everywhere. However that does not mean that we should use it everywhere. this should stay in the sense of context, as using it somewhere else will create confusion / uglify your code / make your code buggy.

var add = function(a) {
 return this.num + a;
}

In your codesnippet i think its unclear what thisrefers to. So its rather a misuse of this. However it could get a meaning if you make it a method of obj, so its context becomes clear from the code:

const num = {
  value:10,
  add(a){ return this.value + a }
};

It gets even more beautiful if you use inheritance to make it reusable:

class CustomNumber {
  constructor(n = 0){
    this.value = n;
  }

  add(a){ return this.value + a; }
}

const num = new CustomNumber(10);

What is the advantage of using call method instead of passing an object in the parameter

1 Answers1