Какая область видимости у переменной в блоке цикла?

Область видимости переменной в блоке цикла в JavaScript

Этот вопрос затрагивает одну из ключевых концепций JavaScript — область видимости (scope). Ответ зависит от того, какое ключевое слово используется для объявления переменной (var, let или const) и в каком типе цикла.

Область видимости var в цикле

При использовании var переменная имеет функциональную область видимости или глобальную, если объявлена вне функции. Внутри цикла var "не видит" границ блоков {}.

for (var i = 0; i < 5; i++) {
    var insideVar = 'visible';
}
console.log(i);        // 5 - переменная i доступна
console.log(insideVar); // 'visible' - переменная insideVar также доступна

Здесь i и insideVar поднимаются (hoisting) в начало ближайшей функции (или глобальной области), делая их доступными после цикла.

Область видимости let и const в цикле

С появлением ES6 (2015) let и const ввели блочную область видимости. Переменная, объявленная с этими ключевыми словами внутри блока цикла (включая круглые скобки () в for), доступна только внутри этого блока {}.

for (let j = 0; j < 3; j++) {
    const message = 'Iteration ' + j;
    console.log(message); // Корректно работает в каждой итерации
}
console.log(j);        // ReferenceError: j is not defined
console.log(message);  // ReferenceError: message is not defined

Важный нюанс для for: Переменная, объявленная с помощью let в круглых скобках (let j = 0; ...), считается частью блока цикла. Для каждой итерации создаётся новая копия этой переменной. Это особенно важно при использовании замыканий внутри цикла.

Практический пример с замыканием

Разница между var и let в циклах ярко проявляется при создании функций внутри цикла:

// Проблема с var
var funcs = [];
for (var k = 0; k < 3; k++) {
    funcs.push(function() { console.log(k); });
}
funcs[0](); // 3 (все функции выводят 3)
funcs[1](); // 3
funcs[2](); // 3

// Решение с let
let funcs2 = [];
for (let l = 0; l < 3; l++) {
    funcs2.push(function() { console.log(l); });
}
funcs2[0](); // 0
funcs2[1](); // 1
funcs2[2](); // 2

В первом случае все функции захватывают одну и ту же переменную k из функциональной области. Ко времени вызова функций цикл завершён, и k = 3. Во втором случае для каждой итерации создаётся своя независимая переменная l.

Циклы for-in и for-of

Для циклов for...in и for...of правила аналогичны:

const obj = { a: 1, b: 2 };
for (let key in obj) {
    console.log(key); // 'a', затем 'b'
}
console.log(key); // ReferenceError: key is not defined

for (const value of [10, 20]) {
    console.log(value); // 10, затем 20
}
// value недоступна здесь

Выводы и рекомендации

1. Избегайте var в современных проектах. Использование var в циклах часто приводит к трудноуловимым ошибкам из-за функциональной области видимости и поднятия.
2. Используйте const по умолчанию для переменных внутри цикла, если их значение не меняется в итерациях. Это делает код более предсказуемым.
3. Используйте let только для переменных, которые должны быть переприсвоены внутри блока цикла.
4. Помните, что переменные, объявленные в условии цикла for (for (let i = 0; ...)), также подчиняются правилам блочной области видимости.

Понимание этих особенностей критически важно для написания предсказуемого, безопасного кода и корректной работы с асинхронными операциями и замыканиями внутри циклов. Всегда учитывайте область видимости при отладке, чтобы избежать классической ошибки "все колбэки используют последнее значение переменной цикла".