function example in text does not make sense to me

Question

Reading through eloquent javascript in an attempt to wrap my head around functions, I read this example code:

function makeAddFunction(amount) {
  function add(number) {
    return number + amount;
  }
  return add;
}

var addTwo = makeAddFunction(2);
var addFive = makeAddFunction(5);
show(addTwo(1) + addFive(1));

I get the gist of it, but having examined the code and read the accompanying text several times over a few hours, this just hasn't clicked for me: What exacly is this code doing? Where does the add function acquire the number parameter? Does it come from the show command? If so, how does it get passed around? I just don't see it...

Google "closures". In short: local variables (which include parameters) that were available when a function is defined are also available inside that function later when it is executed, even if those local variables are no longer in scope. — Phrogz, Sep 24 '13 at 18:48
See [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work/111200#111200) — bfavaretto, Sep 24 '13 at 19:00
@Phrogz for the record, the question is about the number parameter, not closures... — Christophe, Sep 24 '13 at 19:03

score 1 · Answer 1 · answered Sep 24 '13 at 18:58

1

First off, I think there some code missing in your snippets because as it stands now, show would throw undefined.

But, there is enough here to answer the core of your questions.

1) var addTwo passes the value of 2 to makeAddFunction. This is "amount". addTwo gets returned an instance of add which has value of amount of 2.

2) var addFive passes the value of 5 to makeAddFunction. This is "amount". addFive gets returned an instance of add which has value of amount of 5.

3) addTwo is called with a number of 1. This is added to previous config value of 2 and returns 3.

4) addFive is called with a number of 5. This is added to previous config value of 5 and returns 6.

5) If a show function were defined, it would add 3+6 and show 9.

answered Sep 24 '13 at 18:58

the code is fine, i copied and pasted it into this fiddle http://jsfiddle.net/Eh4LK/1/ – Jason Sep 24 '13 at 19:57
The code, as posted by the question asker is NOT fine. It makes a call to a method called "show". I was not referring to any of the other answers posted. – Sep 24 '13 at 20:18
oh oh, yeah, agreed. i thought you meant the `makeAddFunction`. – Jason Sep 24 '13 at 20:21

score 1 · Answer 2 · answered Sep 24 '13 at 19:02

Where does the add function acquire the number parameter?

=> number is passed as an argument of add. When you write addTwo(1), 1 will be the number parameter.

Where does the addTwo function acquire the amount parameter?

=> this is called a closure. When you run makeAddFunction(2), the value 2 is passed as amount and gets captured by the add function.

Jason · Accepted Answer · 2013-09-24T19:56:24.573

1

The function makeAddFunction takes a number (amount) and returns a function that adds a number passed in as a paramter to the number passed into the outer function.

function makeAddFunction(amount) {
   function add(number) {
     return number + amount;
   }

    return add;
}

calling var addTwo = makeAddFunction(2); is equivalent to writing the following function:

   var addTwo = function(number) {
     return number + 2;  // this function is actually returned by makeAddFunction
   }

you can call it with a parameter addTwo(5);

Here's a fiddle: http://jsfiddle.net/Eh4LK/1/ press the run button to execute

edited Sep 24 '13 at 19:56

answered Sep 24 '13 at 19:04

Jason

15,915
3
48
72

Okay this makes sense. I appreciate all the answers, but this is where the disconnect was -- I did not realize that because `var addTwo` and `var addFive` were variables which a had function for values they could each pass along arguments to an instance of that function. You helped me out by writing out the equivalent, thanks! – ridthyself Sep 24 '13 at 19:45

function example in text does not make sense to me

3 Answers3