Why do javascript variables in closure functions n

Question

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

Answer 1

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.

Answer 2

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 incomplete:

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