JavaScript Functions that return function

Question

I was solving a puzzle on JS and I found this code:

var xx = (function () {
    var e = 0;
    return function () { return e++ }
})();

It was asked what will be the value of xx.

I've googled about funcitons that return function, but could not find anything helpful, I'm not pretty familiar with functions that return function. Please help.

Is this the answer you look for? http://stackoverflow.com/questions/7629891/functions-that-return-a-function-javascript — DannyThunder, Oct 15 '13 at 11:26
@Eduardo help with explaining the functions that return function and what will be the value of xx — Bharat Soni, Oct 15 '13 at 11:27
[Functions in JavaScript are objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function), so you can return a function just like returning an object. — Passerby, Oct 15 '13 at 11:29
xx will have the reference of the function inside the main function including the referencing environment,that means the value of variable e will be retained — Arun Killu, Oct 15 '13 at 11:29
The value of `xx` will be a function which returns the value of `e` and increments it on every call. — deceze, Oct 15 '13 at 11:30

score 3 · Answer 1 · answered Oct 15 '13 at 11:29

3

yes, it is returning function, and every time you execute this function xx(); it will return an incremented value

alert( xx() ); //will alert 0

alert( xx() ); //will alert 1

alert( xx() ); //will alert 2

Hope this answers the question

answered Oct 15 '13 at 11:29

gurvinder372

66,980
10
72
94

Graham · Answer 2 · 2013-10-15T12:31:58.683

In JavaScript, functions are first-class objects; that is, they can be passed around and assigned to variables like anything else. So in your case xx is simply a reference to the inner function which can be called, passed around further etc.

One benefit of doing so means you can implement private variables like in your example. By defining e inside the outer function, and referencing it inside the inner function, the inner function retains that reference to e even after it is returned. This allows you to call

xx();
xx();
xx();

which will increment and return the value of e each time. You can't override this variable since there's no public reference to it.

score 2 · Accepted Answer · answered Oct 15 '13 at 12:04

Let's decompose the statements in its constituents:

var xx =(function(){var e = 0; return function(){return e++}})();

var e = 0; assign 0 to e
return function(){return e++;}

return a function f which:

2.1 return the value of e

2.2 increment e by 1
var xx = function(){var e = 0; return function(){return e++}})();

assign to xx the function f(){ return e++} with scope [e=0]
xx();

Exec the function f:

4.1 return the value of e // 0

4.2 increment e by one // e = 1

4.3 xx is now the function f(){ return e++;} with scope [e=1]

So, xx is the function which return the internal value of e (starting from 0) and increment e by one.

IF you call xx(); another time, you'll get:

xx(); // returns 1
xx = f(){ return e++;}[e=2] // returns 2 and increment e by one

thanks a lot for this detailed explanation. could you please refer any book or link so that I can see this in more depth. :) — Bharat Soni, Oct 15 '13 at 12:21
I used knowledge in *Computability* and *Semantic of Programming Languages* studied at uni. :) — user278064, Oct 15 '13 at 13:15

JavaScript Functions that return function

3 Answers3