Как работают области видимости JS?

Question

[FaTaLcheG]

Не могу понять что происходит на данном участке кода с var и без var (var x = 2; )

Мое понимае примерно такое, когда вызывается foo(); она вызывается из глобальной области видимости и после того как начнет отрабатывать тело функции function foo() он не найдет обьявленой переменной x в теле функции и сразу переключится на глобальную область где и найдет там обьявление var x = 10;

Далее следует вызов функции bar(); с var x = 2;, первым делом он обьявит переменную var x после чего присвоит ей значение 2, далее следует вызов функции return foo(); что важно из окружения function bar(), тело функции function foo() начнет выполнять выражение var y = x + 5; и опять тут не найдет переменную x, по логике он должен поискать ее из функции function bar() так как там ее вызывали return foo(); но по факту он обращается к глобальной области видимости и возвращает 10 var 15 = 10 + 5;

Но самое интересное так это если убрать обьявление var из функции function bar() { x = 2; return foo(); }; тогда функция function foo() ведет себя подругому и переменную x найдет не в глобальной области а в теле function bar(), так выражение в теле будет таким var 7 = 2 + 5;

var x = 10;

function foo() {
  var y = x + 5;
  console.log(y);
  return y;
}

function bar() {
  var x = 2;
  return foo();
}

foo();
bar();
console.log(x);

var x = 10;

function foo() {
  var y = x + 5;
  console.log(y);
  return y;
}

function bar() {
  x = 2;
  return foo();
}

foo();
bar();
console.log(x);

Answer 1

[dollar]

Область видимости переменной зависит только от того, где она объявлена, и не зависит от цепочки вызовов. Так что если хотите зависимость по цепочке, то объявляйте одну функцию в другой. И почитайте про замыкания в JavaScript.

Comments

[FaTaLcheG]

я вроде допер, я идиот)))

когда я вызываю без var

function bar() {
  x = 2;
  return foo();
}

я изменяю глобальную x = 10 на 2 и уже потом function foo() подтягивает значение 2 из глобальной видимости

Подтвердите пожалуйста что я правильно понял

[dollar]

FaTaLcheG, да, x = 2 изменение глобальной переменной. Если честно, я по диагонали прочёл вопрос, потому что много текста и вся суть в названии.

Answer 2

[Владимир Мальков]

Приветствую. Вы немного заблуждаетесь.

по логике он должен поискать ее из функции function bar() так как там ее вызывали return foo();

Обратите внимание в каком scope находе foo. Поэкспериментируйте с функцией и перенесите ее в scope bar. Примерно так:

var x = 10;

function bar() {
  var x = 2;
  return foo();

  function foo() {
    var y = x + 5;
    console.log(y);
    return y;
  }
}

foo();
bar();
console.log(x);

Т.к foo находится в глобальном scope (в вашем исходном примере), она всегда будет использовать глобальную переменную x.

Answer 3

[Евгений Самсонов]

foo() объявлена в глобальной области видимости, поэтому она всегда использует переменную x из глобальной области видимости, независимо от того, где её вызывают. Если в bar() убрать var, то поменяется глобальная переменная x, соответственно foo() выведет измененное значение глобальной переменной