In the code below please can someone explain to me why multiple calls to counter result in the value of i increasing each time it is called?

My understanding is that as we specifically set i = 0; in makeCounter, each time makeCounter is called through the counter variable, i should be reset to 0. I cannot understand why this is not the case.

function makeCounter() {
  // `i` is only accessible inside `makeCounter`.
  var i = 0;

  return function() {
    console.log( ++i );
  };
}

// Note that `counter` and `counter2` each have their own scoped `i`.

var counter = makeCounter();
counter(); // logs: 1
counter(); // logs: 2

In the code below please can someone explain to me why multiple calls to counter result in the value of i increasing each time it is called?

My understanding is that as we specifically set i = 0; in makeCounter, each time makeCounter is called through the counter variable, i should be reset to 0. I cannot understand why this is not the case.

function makeCounter() {
  // `i` is only accessible inside `makeCounter`.
  var i = 0;

  return function() {
    console.log( ++i );
  };
}

// Note that `counter` and `counter2` each have their own scoped `i`.

var counter = makeCounter();
counter(); // logs: 1
counter(); // logs: 2

• javascript
• closures
• scope

Share Improve this question Follow edited Jul 1, 2013 at 14:34 Ian 50.9k1313 gold badges104104 silver badges111111 bronze badges asked Jul 1, 2013 at 14:27 BenMBenM 4,26822 gold badges3333 silver badges5858 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

each time makeCounter is called through the "counter" variable

That is wrong.

You're only calling makeCounter() once – at var counter = makeCounter();.
counter is a reference to the returned function, which closes over the i variable.

Calling counter() will execute this returned function, just like any other function.

The behavior you're expecting would happen if you write makeCounter()() multiple times.

each time makeCounter is called […] i should be reset to 0

That's right.

makeCounter is called through the counter variable

No it's not. The anonymous function returned by makeCounter is called with counter(). makeCounter was only called once, its result was assigned to the counter variable.

Note that counter and counter2 each have their own scoped i

That would be the case, yes. However your example is inplete:

var counter = makeCounter();
counter(); // logs 1
var counter2 = makeCounter();
counter2(); // logs 1 again!
counter(); // still logs 2
counter2(); // logs 2