Как работают переменные JavaScript?

В Javascript ES5 и более ранних версиях нет области блока, только область действия. Кроме того, объявления всех переменных javascript, объявленных в области действия функции, автоматически "поднимаются" в начало функции.

Таким образом, объявление переменной в цикле ничем не отличается от объявления ее в начале функции, а затем ссылки на нее в цикле.

См. эти две ссылки для некоторых полезных пояснений: .com/2010/2/JavaScript-Scoping-and-Hoisting и http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/.

Примечание: присваивание переменной не поднимается, а только объявление переменной. Итак, если вы сделаете это:

function a() {
    for (var i=0; i<100; i++){
        var myvar = i;
    }
}

Это работает следующим образом:

function a() {
    var myvar;
    for (var i=0; i<100; i++){
        myvar = i;
    }
}

Если вы хотите создать новую область видимости внутри цикла for, вы можете использовать IIFE (немедленно вызываемое функциональное выражение) следующим образом:

function a() {
    for (var i=0; i<100; i++){
        (function() {
            var myvar = i;
            // myvar is now a separate variable for each time through the for loop
        })();
    }
}

Обновление в 2015 году. ES6 (или иногда называемый ES2015) предлагает объявление let, которое предлагает область действия блока. В этом случае объявление переменной let поднимается только наверх текущей области блока. По состоянию на середину 2015 года это еще не широко реализовано в браузерах, но скоро появится и будет доступно в серверных средах, таких как node.js, или через транспилеры.

Итак, в ES6, если вы сделали это:

for (let i=0; i<100; i++){
    let someVar = i;
}

И i, и someVar будут локальными только для цикла.

Нет, нет никакой разницы; в JavaScript переменные ограничены на уровне функций, а не на уровне блоков.

Такие инструменты, как JSLint, рекомендуют размещать все операторы var в начале функций. Это потому, что JavaScript, по сути, делает это за вас, если вы этого не делаете, так что это менее запутанно, если вы это сделаете. В вашем примере не имеет значения, где вы поместите var, если оно встречается перед одним определением myvar. Точно так же вы можете также объявить i в верхней части функции.

Что более интересно, так это иерархическая цепочка областей действия, в которой JavaScript ищет имена, когда хочет их найти. Он просматривает цепочку областей действия от local до global, пока не найдет первый экземпляр указанного имени.

Вот почему вы можете играть в такие игры, чтобы раздражать своих друзей:

function foofinder() {
    var bar = function () { return foo; },
        foo="beers";
    return bar();
}

foofinder();
>>> "beers"

Как сказал @icktoofay, в javascript нет никакой разницы. В некоторых языках на каждой итерации создается экземпляр переменной, затем она выходит за пределы области видимости и остается для сборки мусора.

Чтобы имитировать это в javascript, вы можете сделать:

for (var i=0; i<100; i++){
    (function(){
        var myvar = i;
    })();
}

В этом случае myvar существует только в рамках анонимной функции, поэтому на каждой итерации создается новый экземпляр myvar.

Постоянно объявляя var перед именем переменной, вы можете указать движку JavaScript или интерпретатору повторно инициализировать переменную с неопределенным значением (undefined в отличие от числа, строки/текста, логического значения или null) перед назначением, что были бы дополнительные инструкции, замедляющие скорость выполнения цикла. Вы также увеличиваете размер кода и снижаете скорость, с которой код анализируется/интерпретируется/компилируется.

Практически для любого приложения нет функциональной разницы, но она все же есть, и разница может быть заметна после сотен тысяч или миллиардов циклов. Однако повторяющиеся объявления VAR с одним и тем же именем в функции приводят к фатальным исключениям в Chrome/V8.

ОБНОВЛЕНИЕ: использование var перед именем переменной доказуемо медленнее, чем отсутствие var, как показано в следующем тесте производительности в Chrome / v8 с помощью консоли JavaScript.

var startTime = new Date().getTime();
var myvar;
for (var i=0; i<100000; i++){
    myvar = i;
}
console.log(new Date().getTime() - startTime);

var startTimx = new Date().getTime();
var myvax;
for (var j=0; j<100000; j++){
var myvax = j;
}
console.log(new Date().getTime() - startTimx);
161
169

Первый тест был выполнен за 161 мс, а второй тест (с var) занял 169 мс. Это разница в 7 мс, стабильная после нескольких прогонов теста.

Весь тест был вставлен в консоль Chrome JavaScript, а затем скомпилирован перед его выполнением, поэтому первый вывод не отображается после первого вызова console.log().

Попробуй сам!