CODEWITHSUNDEEP
javascript
vinit kumar
vinit kumar

Reputation: 13

Javascript Arrow Function

I am running both the code blocks in chrome tab console but I am not able to
understand why is the output of second block NaN.The values passed should in the second case doesn't include b, which should not matter is what I think.

var adder = {
  base: 1,

  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a,n) {
    var f = (v,n) => v + n + this.base;
    var b = {
      base: 2
    };         
   return f.call(b,a,n);
  }
};
console.log(adder.addThruCall(3,4)); // output: 8

But when I do

var adder = {
 base: 1,

 add: function(a) {
   var f = v => v + this.base;
   return f(a);
 },

 addThruCall: function(a,n) {
   var f = (v,n) => v + n + this.base;
   var b = {
     base: 2
   };         
   return f.call(a,n);
 }
};
console.log(adder.addThruCall(3,4)); //output: NaN

Upvotes: 1

Views: 114

Answers (3)

Bartek Fryzowicz
Bartek Fryzowicz

Reputation: 6674

call as first argument accepts value that will be used as this (called an context) in called function. So in second example (f.call(a,n)) a is considred to be context argument and n is considered to be f function first argument - so as a result your f function is actually called with only single argument so the second argument is undefined - it's equivalent of calling f(n) but f function expects two arguments. As a result inside function you're adding number to undefined which gives you NaN.

One more thing to clarify:

since this is not bound in arrow functions when calling call method on arrow function first argument (context) is ignored and it will not be used as this value inside arrow function but in your second example it is not cause of your probem and even if you used normal function problem would still exist

Upvotes: 1

Amresh Venugopal
Amresh Venugopal

Reputation: 9549

In the second part of your code:

var adder = {
 base: 1,

 add: function(a) {
   var f = v => v + this.base;
   return f(a);
 },

 addThruCall: function(a,n) {
   var f = (v,n) => v + n + this.base;
   var b = {
     base: 2
   };         
   return f.call(a,n);
 }
};
console.log(adder.addThruCall(3,4));

If you focus on the console.log(adder.addThruCall(3,4)) it does:

return f.call(3, 4) // where 3 is the context specified and 4 is the argument

which means you called,

f(4, undefined) // called with 4

Not just that, you are returning:

v + n + this.base

so now, 

4 + undefined + 1

That's NaN

For better visualisation use this:

addThruCall: function(a,n) {
 var f = (v,n) => {
   console.log(v, n, this.base)
   return v + n + this.base;
 }
 var b = {
   base: 2
 };         
 return f.call(a,n);
}

Solution:

addThruCall: function(a,n) {
  var f = (v=0,n=0) => v + n + this.base;

    var b = {
      base: 2
    };         
   return f.call(a,v,n);
  }

Upvotes: 1

Sanchay Kumar
Sanchay Kumar

Reputation: 566

call() method calls a function with a given this value and arguments provided individually.

Instead of using call, You can directly return f(a,n);

Upvotes: 0

Related Questions