Trying to understand this function as value

Question

I got this code from the Headfirst Javascript book. I changed the function names to be clearer. I'm trying to wrap my head around this.

I assigned add to the function outer with a number. That number remains for some reason - returns a reference to inner with n = num (which returns the added values?

Anytime I change outers n value, the inner will use that new value? I believe I'm right on that. Is there anywhere I can read more about it? See better examples? Or can anyone explain this better?

function outer(n) {
 var inner = function(x) { //or x = 0
   return n + (x || 0); //added default 0 for testing to prevent NaN
  }
  return inner;
}
var num = 2;
var add = outer(num);
console.log(`Adding 2 to num(${num}): ${add(2)}`);

add = outer(5);
console.log(add());
console.log(add(2));

What is your **actual** question? **Re-define** your **real** question and try again. Aswell you're example is **flawed** - theres no function called `add2()` — Xatenev, Nov 20 '16 at 20:08
I think the words you are looking for are *partial application* and *currying*. Using these terms you should be able to find explanations online — UnholySheep, Nov 20 '16 at 20:13

score 1 · Answer 1 · answered Nov 20 '16 at 20:12

1

Let's rename the functions to make it even clearer. The outer function takes a parameter and uses it to create a new function. This new function is returned for future use.

function createFunctionThatAdds(n){
  var adds_n = function(x) { return n + (x || 0); };
  return adds_n;
}

var adds_2 = createFunctionThatAdds(2);
var adds_5 = createFunctionThatAdds(5);

console.log(adds_2(10));
console.log(adds_5(10));

answered Nov 20 '16 at 20:12

JonSG

10,542
2
25
36

So, this 'technique' pretty much creates functions. Is there a word for it (so i could read about it)? – Tinkle Pooplebottham Nov 20 '16 at 20:16
Thats no real `technique` you simply return a function for further use to prevent having **redundant** code (because you would have to define `add2()` and `add5()` and the plus operation twice.) – Xatenev Nov 20 '16 at 20:17
@noisypixy Good resource! And I thought closures were simply functions within functions. – Tinkle Pooplebottham Nov 20 '16 at 20:39

drinchev · Answer 2 · 2016-11-20T20:33:08.333

1

The technique used is called currying. It's part of functional javascript.

You can read more about it here.

The idea behind it is that you can use a function to generate another function, which you can use further in your code.

Currying is made possible, because of a closure.

There are a lot of libraries that are built based on that principe, for example Ramda.

edited Nov 20 '16 at 20:33

answered Nov 20 '16 at 20:22

drinchev

19,201
4
67
93

Scott Marcus · Accepted Answer · 2016-11-20T20:30:29.680

In JavaScript, functions can act as regular data. If you are OK with the idea of passing a number or string around, then passing a function around is no different. This allows you the ability to do some very cool and powerful things.

Here, instead of the add function simply giving you your numeric answer, it's giving you back a function with your number embedded into it. This means that add doesn't really add anything, add is a function for creating functions (similar to the idea of a "Factory" in class based programming).

Changing the names may make things easier:

function createAddFunction(numberThatWillBeHardWiredIntoReturnedFunction) {
    var resultingFunction= function(x) { //or x = 0
    return numberThatWillBeHardWiredIntoReturnedFunction + (x || 0); 
  }
  return resultingFunction;
}
var num = 2;

// This will cause add to be a function that is hard-wired to add 2 to another number
var add = createAddFunction(num);  
console.log(`Adding 2 to num(${num}): ${add(2)}`);

// This will cause add to be a function that is hard-wired to add 5 to another number
add = createAddFunction(5);
console.log(add());
console.log(add(2));

Yup the names totally make a difference. In the book it was simply a challenge. As I typed it out it started to make sense. So I renamed the functions to outer/inner. Also, with the advice from a few others here, I'll read up on currying. I like your answer though! — Tinkle Pooplebottham, Nov 20 '16 at 20:26

Trying to understand this function as value

3 Answers3