JavaScript Why return function in a function?

Question

var favoriteColor = "blue";
function colorGenerator(color) {
    return function () { return color; };
}
var getColor = colorGenerator(favoriteColor);

Why getColor is not blue. getColor() is blue. getColor also becomes a function? Because we return a function in colorGenerator?

I am confused about these. Thank you for your help.

Answer 1

It's called making a closure. Basically for each call of that colorGenerator function the vars local to it will stay around and be represented in the call of the function it returns.

See this:

function colorGenerator(color) {
    return function () { return color; };
}

// remember these are functions to be called, not the actual color names
var getRed = colorGenerator('red');
var getBlue = colorGenerator('blue');

// now each time we call the returned function of
// each, it will say the color we want
alert( getRed() + " and " + getBlue() ); // -> "red and blue"

I don't know the context of this snippet of code, so why you'd basically need a factory for making functions that return a certain color name, I don't know. But that's essentially what it'll do.

For explaining why that would be useful in a certain context we'd probably have to know the context...

Answer 2

Javascript has first-class functions, meaning that functions can be passed around like any other argument or variable, you can even return functions - as per your example.

when you call getColor, you'll get back a function because that's what it is (colorGenerator returns a function).

When you call getColor() you're executing that function, and getting the string return value "blue";

Delving a little deeper, in your specific case, colorGenerator is in fact an identity generator. In functional programming, an identity is simply a function that returns it's original input. It is useful in functional-style programming, namely composition.

Whether you are trying to use a functional style or not isn't clear, so I'll stop by strongly recommending this free online book Mostly adequate guide to functional programming It is very easy to digest and covers the matter from newcomer to pro. If you want to go further, I'd follow-through with Javascript Allongé, another great free JavaScript book which covers functional programming.