JavaScript - local variables example

Просто особенность, которая иногда забывается.

by russianpenguin

HTML

<button onclick="simple_define()">simple_define</button>
<button onclick="define_inside_if()">define_inside_if</button>
<button onclick="define_inside_while()">define_inside_while</button>
<button onclick="define_inside_for()">define_inside_for</button>
<button onclick="real_define()">real_define</button>

JavaScript

// глобальная переменная, которую мы попытаемся дальше получить
var bar = 42;

// Мозг предполагает, что до объявления bar в теле функциии глобальный bar будет доступен
function simple_define() {
    alert(bar);
    var bar = 10;
    alert(bar);
}

// Но это не так. Функция выше на самом деле выглядит вот так
function real_define() {
    var bar;
    alert(bar);
    bar = 10;
    alert(bar);
}

// А что же с условиями? Разве они не создают локальные области видимости?
function define_inside_if() {
    if (true) {
        var bar = -10;
    }
    
    alert(bar);
}

// Ну а циклы?
function define_inside_while() {
    do {
        var bar = 10;
    } while (false);
    alert(bar);
}

// И переменные из for?
function define_inside_for() {
    for (var bar = 0; bar < 10; bar++);
    alert(bar);
}

/* 
 * Да. Это особенность js - компилятор собирает все объявления переменных текущей области видимости
 * и выделяет под них все требуемые ресурсы сразу при входе в функцию.
 */