CODEWITHSUNDEEP
javascriptjquery
Akash Rao
Akash Rao

Reputation: 928

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

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))

Upvotes: 1

Views: 157

Answers (1)

Jonas Wilms
Jonas Wilms

Reputation: 138537

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);

Upvotes: 1

Related Questions