Где будет видна переменная, объявленная через Let внутри функции?

Где будет видна переменная, объявленная через Let внутри функции?

Переменная, объявленная с помощью let внутри функции, будет видна только в области видимости (scope) этой функции и любых вложенных блоков. Это называется блочной областью видимости (block scope).

Область видимости let

Let имеет блочную область видимости, то есть переменная доступна:

• Внутри функции, где она объявлена
• Внутри вложенных блоков (if, for, while, {}, etc.)
• Не доступна вне этих блоков

function example() {
  let x = 10;
  
  console.log(x);  // 10 — видна внутри функции
  
  if (true) {
    let y = 20;
    console.log(x);  // 10 — видна из родительского скопа
    console.log(y);  // 20 — видна внутри блока if
  }
  
  console.log(x);  // 10 — видна
  console.log(y);  // ReferenceError! y не видна за пределами блока if
}

example();
console.log(x);  // ReferenceError! x не видна вне функции

Принцип цепочки областей видимости

Это называется Lexical Scope (лексическая область видимости). Когда код ищет переменную, он просматривает цепочку от внутренней области к внешней.

let global = 'глобальная';

function outer() {
  let outerVar = 'внешняя функция';
  
  function inner() {
    let innerVar = 'внутренняя функция';
    
    console.log(innerVar);  // ✅ видна
    console.log(outerVar);  // ✅ видна из родительской функции
    console.log(global);    // ✅ видна из глобальной области
  }
  
  inner();
  console.log(innerVar);  // ❌ ReferenceError
}

outer();
console.log(outerVar);  // ❌ ReferenceError

Let vs Var

Имеется принципиальное отличие от var, которая имеет функциональную область видимости:

function example() {
  if (true) {
    var x = 10;
    let y = 20;
  }
  
  console.log(x);  // 10 — var видна во всей функции
  console.log(y);  // ReferenceError — let видна только в блоке if
}

Блочная область видимости в разных конструкциях

В цикле for:

for (let i = 0; i < 3; i++) {
  console.log(i);  // 0, 1, 2 — видна внутри цикла
}

console.log(i);  // ReferenceError — i не видна вне цикла

// С var было бы иначе:
for (var j = 0; j < 3; j++) {}
console.log(j);  // 3 — видна вне цикла!

В блоке try-catch:

try {
  let error = new Error();
  throw error;
} catch (e) {  // e видна только в этом блоке
  console.log(e);  // ✅
}

console.log(e);  // ReferenceError

В обычном блоке {}:

{
  let x = 1;
  console.log(x);  // 1
}

console.log(x);  // ReferenceError

Temporal Dead Zone (TDZ)

Еще одна особенность let — Temporal Dead Zone. Переменная недоступна до момента её объявления в коде:

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

// С var был бы hoisting:
console.log(y);  // undefined (не ошибка)
var y = 10;

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

function createCounters() {
  const counters = [];
  
  for (let i = 0; i < 3; i++) {
    counters.push(() => {
      console.log(i);  // Каждая функция помнит свой i
    });
  }
  
  return counters;
}

const fns = createCounters();
fns[0]();  // 0
fns[1]();  // 1
fns[2]();  // 2

// С var было бы:
// 3
// 3
// 3
// Потому что var имеет функциональную область видимости

Итог

Let внутри функции видна:

• В самой функции
• Во всех вложенных блоках (if, for, while, {})
• НЕ видна вне функции и вне её блоков
• НЕ видна в коде, который идёт до её объявления (TDZ)

Это делает let предпочтительным выбором вместо var, так как обеспечивает более предсказуемое и безопасное поведение переменных в JavaScript.