Lexical environment example explanation

Question

I am following a JS tutorial and have come across this example below, and the first one makes sense from what I have learned so far:

function makeCounter() {
  function counter() {
    return counter.count++;
  };
  counter.count = 0;

  return counter;
}

let counter = makeCounter();
let counter1 = makeCounter();
console.log(counter());  // 0
console.log(counter());  // 1
console.log(counter1()); // 0

So, that makes sense since the new lexical environments are created each time we assign the makeCounter function to a new variable. What I don't understand is if I am using the property of the function makeCounter I am still incrementing the makeCounter.count if I assign it to new variables:

function makeCounter() {
  function counter() {
    return makeCounter.count++;
  };
  makeCounter.count = 0;

  return counter;
}

let counter = makeCounter();
let counter1 = makeCounter();
console.log(counter());  // 0
console.log(counter());  // 1
console.log(counter1()); // 2

Possible duplicate of [Lexical environment and function scope](https://stackoverflow.com/questions/12599965/lexical-environment-and-function-scope) — Ajay Gaur, Nov 17 '17 at 14:18
in javascript, the syntax `makeCounter.count = 0;` (with the name of the function, not on an instance) is equivalent to a static property, compared to `this.count = 0;` which is non static — Kaddath, Nov 17 '17 at 14:22

score 1 · Answer 1 · answered Nov 17 '17 at 14:19

1

The function counter and counter.count are defined new in the function scope of makeCounter in each call. makeCounter.count is defined once only for the global scope.

answered Nov 17 '17 at 14:19

Joschi

2,874
1
18
23

Bergi · Accepted Answer · 2017-11-17T14:32:33.960

I think using a property of the function object is quite confusing here, especially if you want to learn about lexical environments. A better example might be the difference between

function makeCounter() {
  var count = 0;
  function counter() {
    return count++;
  }
  return counter;
}

and

var count = 0;
function makeCounter() {
  function counter() {
    return count++;
  }
  return counter;
}

where it is more obvious how many count variables there are, when they are created, and in which scope they live. Of course it works the same with the indirection through the counter vs makeCounter variables (that get initialised with function objects), which live in the same scopes as count does in my examples.

Admittedly, makeCounter.count = 0 should better be outside of makeCounter, as otherwise the behaviour of resetting the global count will get really confusing. The exact property-less code corresponding to yours would be

function makeCounter() {
  var count;
  function counter() {
    return count++;
  }
  count = 0;
  return counter;
}

vs

var count;
function makeCounter() {
  function counter() {
    return count++;
  }
  count = 0;
  return counter;
}

gurvinder372 · Answer 3 · 2017-11-17T14:25:12.450

What I don't understand is if I am using the property of the function makeCounter I am still incrementing the makeCounter.count if I assign it to new variables:

makeCounter is available in the scope in which it is defined and inside makeCounter definition as well.

So, since makeCounter.count is not scoped exclusively local to makeCounter function definition, so both counter and counter1 has access to the same reference of makeCounter.count.

score 0 · Answer 4 · answered Nov 17 '17 at 14:28

New lexical scope is created every time and when makeCounter() returns it remembers count value in clojure. In simple words, it's a language feature that allows functions to remember variables from scope where a function was defined.

It allows to make 'private' like variables in Javascript.

Lexical environment example explanation

4 Answers4

Linked