JavaScript executing function that returns function

Question

I have the following two counter functions which return different result when they run.

In the first snippet, counter function is assigned to variable letsCount and it looks like executing the function updates the var count in the counter function.

However in the second snippet, executing the function directly doesn't update the count variable.

Would you please explain why they have different results and what happens when the function that returns function is assigned to a variable?

Snippet 1

function counter() {
    var count = 0;
    return function() {
        console.log(count++);
    }
}
var letsCount = counter();
letsCount();    // 0
letsCount();    // 1
letsCount();    // 2

Snippet 2

function counter() {
    var count = 0;
    return function() {
        console.log(count++);
    }
}
counter()();  // 0
counter()();  // 0
counter()();  // 0

Whenever you call counter, you create a new function and set count to 0. — Felix Kling
– Felix Kling, Commented Nov 16, 2012 at 0:11

Maël Nison · Accepted Answer · 2012-11-16 00:10:51Z

2

Every time you call counter() you create a new anonymous function instance, with its own scoped variables. If you want to keep using the same function, you will have to do something like this :

var counter = (function () {
    var count = 0;

    var fn = function() {
        console.log(count++);
    };

    return function () {
        return fn;
    };
})();

counter()();  // 0
counter()();  // 1
counter()();  // 2

A single anonymous function will be created then stored in a scoped fn function, then we return a function which, when called, will returns the value kept by fn.

answered Nov 16, 2012 at 0:10

Maël Nison

7,3927 gold badges49 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alex · Accepted Answer · 2012-11-16 00:14:13Z

1

Snippet 1 and Snippet 2 differ in their invocation. Your first snippet has a reference to the one returned function, and that function holds onto its scope (is a closure, has a reference to count).

Your second snippet calls the outer function each time, always returning a reference to a new function, with a new closure to a fresh count.

answered Nov 16, 2012 at 0:14

alex

492k205 gold badges890 silver badges992 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-11-16 00:11:59Z

0

In the first case you are referencing it with a function pointer.. So the context is saved

Whereas in the second case you are calling the function , wherin the count is 0 . So the variable is out of context in here,, So you see the value as 0

answered Nov 16, 2012 at 0:11

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

David G · Accepted Answer · 2012-11-20 16:40:01Z

0

It actually makes perfect sense why you're getting that behavior. When you call counter()(), the first counter() call is executed, effectively resetting the variable count to 0. When you set a variable to counter(), you are actually setting it to the returned function:

var letsCount = // (function() {
    // var count = 0;
    return function() {
        console.log(count++);
    }

// })();

Then when you call letsCount, you're calling the returned function and not the outer function.

answered Nov 20, 2012 at 16:40

David G

97.6k41 gold badges173 silver badges258 bronze badges

Collectives™ on Stack Overflow

JavaScript executing function that returns function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related