Function returning function issue kindly help

1

I was working on the concept of functions calling functions and was making something like below —

function testBind(fn, a) {
    return function (b) {
     return fn(a,b) 
   }
}

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

var tesAdd = testBind(add, 1);
testAdd(10)
output 11

Now up till this point everything seems okay to me , but from below onwards i have no clue as to what is happening -

So for example -

var testAdder = testBind(testBind, add);

I call the function itself as the first argument , now

var addNow = testAdder(1);

addNow(2); // 3

My biggest confusion is how the “add” passed as an argument worked, i can see that testAdder will return something like below

  return function (b) {
     return fn(a,b) 
   }

But from where does it find out to add or multiply from this

var testAdder = testBind(testBind, add);

Kindly guide , thanks …

2

What implemented there is a Curry; in functional programming currying is a technique used to apply partial application of function arguments, so you can make them reusable.

Basically the function will return something when all the arguments that is expecting to receive is reached, until that point it will return a function with partial application of it.

So when you write:

var testAdder = testBind(testBind, add);
var addNow = testAdder(1)

You are telling that testAdder is now a function, that is expecting another function, and will “apply” add to the arguments provided.

addNow, is now a function that is expecting a new value, and will always add 1 to it.

As for now addNow is not returning anything, but it’s ready to add (1) to every new function argument you will be passing.

So later on you can call addNow with any argument and you will finally have your return value since we have reached the amount of arguments required to all the subset of functions to run:

console.log(addNow(7)) // 8
console.log(addNow(2)) // 3
console.log(addNow(5)) // 6

Hope it makes sense :+1:

3

@Marmiz - Thanks but my question is when i pass a function in to a function as an argument -

var testAdder = testBind(testBind, add);

function testBind(fn, a) {
    return function (b) {
     return fn(a,b) 
   }
}

So testbind is passed as an argument itself , how does the argument as a function find out that it needs to use add as fn here and why it does not lead to an endless iteration as the argument function will then require values and so it will keep repeating …

I mean how does var testAdder = testBind(testBind, add); resolve what to do with which value

Note - My biggest confusion is how can a function itself be called as an argument in itself …and how this is resolved by JS, especially if that function in itself needs more values as arguments

4

My biggest confusion is how can a function itself be called as an argument in itself …and how this is resolved by JS,

Let’s start understanding this :slight_smile:
A function that calls itself is called a recursion.
( generally a proper recursion example is a function that factorialize a number)

Here’s the dumbest example I can think of:

function recursion(n) {
  while (n > 0) {
    console.log(n)
    return recursion(n-1)
  }
  
  return n;
}

recursion(4)

How does the above function is executed in JS?
Basically the function start calling with a value of 4, and then call itself with a value of 3, and so on, each time adding a new function to the pile of function (the stack) to execute. until we reach a return point.
(no return == maximum stack exceeded error :wink: )

So this is our call stack.

recursion(4) 
  --> console.log(4) 
     --> recursion(3) 
       --> console.log(3) 
         --> recursion(3) 
          [....]
            --> n == 0  RETURN n.

In your example everything is way more complicated since each function is waiting for a new argument to be called before reaching a return point, thus you have different function in your stack waiting for another function to resolve first.

As per your example, is really convoluted, but remember that contrary to my example where you keep on calling itself until you reach a return, your function immediately return something.

So when dealing with this:

testBind(testBind, add);

You are not dealing with a function that call itself, since testBind, once called is

return function (b) {
     return fn(a,b) 
   }

a new function that is waiting for a new argument, that knows you want to:

return a + b;

but is still missing 2 arguments to do so.

As per the complete execution I’m afraid it’s quite hard to do it on paper :frowning:
I suggest you heading to http://pythontutor.com/ and try it in a step-by-step execution.

Hope that I’ve cleared that up even just a little :slight_smile:

1 Like
5

JavaScript is a little odd in that respect. In JS, a function is just a special kind of object, so it can be passed around. I think you just have to accept this. Unless you want to get really deep into how compilers work and such, I think this is going to be hard to understand on a deep level. But we don’t really need that - we just need to understand what they can do and leave the how they do it up to the browser/operating system.

Just accept that JS can do this and move on. Write some test programs to see that it works. But truly to understand how this is done, you are going to have to get into some very deep CS stuff, basically learning how computer languages are built.

1 Like
6

@ksjazzguitar - Thanks , yes you are right whenever i come across a logic which i cannot understand properly i lose confidence in whatever i have learned so far, what is happening as i am trying to learn JS from tutorials , they seem to introduced new concepts and do not explain how …

@Marmiz - Thanks i now understand this point as @ksjazzguitar has suggested i just have to take function as an object and not to think too deep in its working …