Как работает задачка с собеса?

Question

[lil_web]

Проходил собеседование в один банк, застрял на задачке. Пожалуйста, объясните по шагам, какой будет ответ.

var b = 1;
var a = 2;

(function() {
  var a = 3;
  b = 4;
})();

if (a == 2){
  var a = 5;
}

console.log(a, b);

Спойлер

Ответ: 5 4

В основном, не понятны следующие моменты:
1. Почему меняется значение в анонимной функции?
2. Почему var a = 3; не влияет на a, а var a = 5; — влияет?

Answer 1

[Дмитрий Гололобов]

var b = 1; //Это глобальная переменная b
var a = 2; //Это глобальная переменная a
console.log(a, b); // 2, 1
(function() {
  var a = 3; //тут объявляется переменная a внутри функции
  b = 4; // тут нет объявления переменной b, поиск переменной идет сначала внутри функции, если ее нет, то ищем ее вне границ функции и находим. Но если бы мы ее и там не нашли, то была бы ошибка "Переменная не объявлена"
})(); //Функция сразу запускается, результатом ее выполнения будет глобальная a =2 (не измен) и глобальная b = 4 (изм)

console.log(a, b); // 2, 4

if (a == 2){
  var a = 5; //так как глобальная a осталась равна 2, то условие сработает и a приравняется 5. Точнее она переопределится здесь. Условие выполняется в рамках глобальной области видимости.
}

console.log(a, b); // 5, 4

Comments

[lil_web]

Дмитрий Гололобов, хм, если убрать первую строку, нет ошибки, ответ не меняется. Почему переменную можно объявить без вспомогательного слова var?

[Дмитрий Гололобов]

lil_web, от среды исполнения зависит. Скорее всего у тебя браузер и он достаточно современный и умный, что автоматом при исполнении подставить туда var.

Такая ошибка была на сколько я помню только в старых ie.
А современные браузеры такое могут простить.

[Дмитрий Гололобов]

lil_web, или если объявить строгий режим 'use strict';
то и современные начнут ругаться

[Александр]

Дмитрий Гололобов, Это называется variable hoisting.

Answer 2

[Александр]

Потому что в IIFE (а точнее у функций) отдельный блок видимости. Но при этом видно глобальную область (b). Внутри блока if область видимости глобальная и var создает переменную в ней.

Comments

[lil_web]

Разве повторное создание a через var не ошибка?

[Александр]

lil_web, Для var - нет.

[Дмитрий Гололобов]

lil_web, именно для этого созданы const и let, чтобы не делать ненужных переопределений

[lil_web]

Спасибо, мужики.