Как происходит всплытие переменной?

Question

[Kerrik Солнце]

У меня есть такая функция. В итоге в консоль выводит 10.

var foo = 1; 
function bar() { 
    if (!foo) { 
        var foo = 10; 
    } 
    console.log(foo); 
} 
bar(); //--> 10

Вопрос: каким образом в консоль выводится 10? Получается, что натыкаясь на foo в самом условии if, переменная foo объявляется в пределах функции, потом браузер ищет переменную foo в пределах функции, находит undefined, которое благодаря логическому оператору "не" переводится в true. Выводится 10. Или как?

Просто где-то еще читаю, что всплытие всегда объявляет глобальную переменную (то есть не в самой функции), ну если объявляется глобальная переменная, я не понимаю как тогда происходит вывод 10.

Answer 1

[Сергей Соколов]

Внутри функции наверх выплывает только объявление локальной переменной var foo;

var foo = 1; // можно стереть
function bar() { 
    var foo; // всплыло сюда. Этот foo – иной, чем верхний foo!
    if (!foo) { // тут foo undefined,  !foo === true
        foo = 10; // выполняется, назначается 10
    } 
    console.log(foo); // вывели 10
} 
bar(); //--> 10

Comments

[Kerrik Солнце]

Ага, понятно. А почему тогда если всплывает только объявление функции, в коде ниже всплывает и инициализация?

//var a;
function c() {
  a = 7;
}
c();
console.log(a); //--> 7

То есть... если бы глобальная переменная "а" объявлялась просто уровнем выше, то в консоль бы вывело undefined, потому что на глобальном уровне а = undefined. Почему выводится 7?

[Сергей Соколов]

Kerrik Солнце, семёркой a становится только после вызова c();
Наличие или отсутствие объявления var a; ничего не меняет.

Если внутри функции переменная a не объявлена, её разыскивают выше, в контексте. В этом примере это сразу в глобальной области видимости.

[Сергей Соколов]

Kerrik Солнце, ещё посмотрите неплохое объяснение про области видимости переменных.

[Kerrik Солнце]

Сергей Соколов, то есть получается, что идет вызов функции - c();, мы заходим в функцию, видим необъявленную "а", объявляем ее за пределами функции, снова возвращаемся в функцию, присваиваем "а" значение 7. JS это значение запоминает, идет вызов функции консоль, выводится 7.

Почему тогда здесь a is not defined?

//var a;
a;
a = 10;
console.log(a); //a is not defined

Должно же быть объявление, потом инициализация, а потом вывод в консоль...

[Сергей Соколов]

Сергей Соколов, А, я понял, что вас интересует! Когда переменную нигде не объявили через var, то нет никакого всплытия. Её ищут, сначала внутри функции, потом выше над ней – это в примере уже глобальный уровень. В JS всегда есть самый высший объект, корень, рут ) В браузере это объект window.

Так вот, когда без объявления обращаются к переменной, фактически используется свойство этого верхнего объекта:

function bar() {
  a = 17;
}
bar();

console.log(window.a) // выведет 17

[Сергей Соколов]

ну и обязательный P.S.:
Пожалуйста, не используйте больше var никогда. Он устарел. Теперь только let и const.

[Сергей Соколов]

Kerrik Солнце,

a; // вот эта строка вызывает ошибку: пытаемся использовать что-то несуществующее
a = 10;
console.log(a); // тут уже всё ок, выводится 10

[Kerrik Солнце]

Сергей Соколов,

Так вот, когда без объявления обращаются к переменной, фактически используется свойство этого верхнего объекта (window).

Получается что все необъявленные переменные объявляется на глобальном уровне? Но здесь же объявление происходит внутри этой функции.

var foo = 1; 
function bar() { 
    //var foo;
    if (!foo) { 
        var foo = 10; 
    } 
    console.log(foo); 
} 
bar();

Не догоняю как-то)))

[Сергей Соколов]

Kerrik Солнце, объявление переменной – это когда var. Оно всплывает. Наверх функции или глобального кода.

Выражение var foo = 10; при этом разорвёт как хомячка: объявление var foo; уплывёт в начало функции, а назначение foo = 10; останется на месте.

Без объявления можно назначить a = 10. Оно никуда не уплывает. Но вопрос, что за a при этом получит значение ) Если дело внутри функции и в ней же было объявление, то она. Если объявили выше - оно. Если вообще не объявляли, то выше уж некуда, глобус получит )

[Сергей Соколов]

1.

function bar() {
  var foo;
  // ...
  foo = 10; // свой, местный foo 
}

2.

var foo; // внешний
function bar() {
  foo = 10; // внешний назначился
}

3.

function bar() {
  function zee() {
    foo = 10;
  }
}

не в zee, и не в bar, а выше, глобальный foo.

4.

function bar() {
  
  function zee() {
    foo = 10;
  }

  var foo; // всплывёт в начало ф-ии bar
}

в bar!

[Kerrik Солнце]

Сергей Соколов, да, спасибо) я уже разобралась. Проблема была в том, что я не понимала где и какая область видимости - оказывается, что переменная var видна в пределах функции, то есть для переменной, которая была объявлена с помощью var, создает область видимости только функция, не if. Поэтому мне было непонятно почему объявление "прыгает" выше)))

Answer 2

[Дмитрий Беляев]

Объявления переменных и функций всплывают на верх области видимости, у var и function (та что declaration) - это внешняя функция или модуль (если на верхнем уровне дело происходит), у let и const - блок, то есть после всплытия, внутри движка Ваш код будет выглядеть так:

var foo; 
function bar() {
    var foo; // эта foo перекрывает foo из внешней области видимости, и поэтому в функции используется она
    if (!foo) { 
        foo = 10; 
    } 
    console.log(foo); 
}
foo = 1;
bar(); //--> 10

Так же важно знать, что хотя let и const всплывают наверх блока, но использовать их до фактического места объявления нельзя, так будет ошибка:

{
    console.log(x); // ReferenceError: Cannot access 'x' before initialization
    let x;
}

Это механизм защиты "от дурака" и называется он "мертвое всплытие". По этому всегда лучше использовать let или const, притом const предпочтительнее если переменная не меняется, так как дает больше гарантий.

Comments

[Kerrik Солнце]

Не совсем понятно "куда" происходит всплытие. То есть здесь всплытие переменной происходит "наружу", объявляется глобальная переменная.

//var a;
function c() {
  a = 7;
}
c();
console.log(a);

А вот в примере выше (который в самом вопросе) всплытие происходит "внутри".

var foo = 1; 
function bar() { 
    //var foo;
    if (!foo) { 
        var foo = 10; 
    } 
    console.log(foo); 
} 
bar();

Почему так?

[WbICHA]

Kerrik Солнце, потому что у var область видимости функции.
В первом случае у тебя "а" объявляется глобально, т.к. в функции ты не указал var.
Во втором случае объявление переменной идёт внутри функции.

Вообще, стоит знать, что интерпритатор в жс проходится по коду 2 раза. Первый раз для объявления переменных, поднятия и определения их области видимости, а уже во второй раз исполняя код.

Answer 3

[dollar]

Всплытие происходит в начало функции (т.е. bar), где бы внутри функции вы ни объявили переменную через var.