Почему значение переменной изменилось до вызова функции?

Question

[anvaslist]

Всем привет. Дано:

function outerFunc() {
  let counter = 0;
  return function innerFunc() {
    return counter++;
  }
}
const innerFunc = outerFunc();
console.dir(innerFunc); // 1-ый вывод
innerFunc();
innerFunc();
console.dir(innerFunc); // 2-ой вывод

Почему при первом выводе в консоль отображается, что переменная counter во внешнем лексическом окружении innerFunc уже со значением 2? Если ДО первого вывода в консоль я НЕ вызывал innerFunc и, как следствие, не повышал значение переменной? Со вторым выводом вопросов нет, всё, как надо, потому что я два раза вызвал innerFunc.

Comments

[WbICHA]

Потому что консоль вывела ссылку на функцию, а не скопировала всю её "суть", поэтому когда ты раскрыл инфу о ней, тебе показало текущее её состояние.

[MrColdCoffee]

Наглядно можно понять что происходит

console.dir(innerFunc); // 1-ый вывод
console.log(innerFunc());
console.dir(innerFunc); // 2-ой вывод
console.log(innerFunc());
console.dir(innerFunc); // 2-ий вывод
console.log(innerFunc());

[twobomb]

Выводи в консоль значение, а не объект.

[Dima Polos]

Да, выше верно написали, вы не значение выводите, а функцию как объект со всем ее окружением, и там и там окружение уже изменилось, попробуйте вывод в консоль именно значения сделать и будет как надо.

Answer 1

[dollar]

Потому что консоль получает значение counter и кеширует его в тот момент, когда вы кликаете на [[Scopes]].

Проведите простой эксперимент:

1. Вручную console.dir(innerFunc); Но не раскрывайте пока что.
   
2. Несколько раз вручную innerFunc();
   
3. Раскройте [[Scopes]] и посмотрите значение. Закройте.
   
4. Ещё несколько раз вручную innerFunc();
   
5. Снова раскройте [[Scopes]] и посмотрите значение.