В какой области видимости var не видна снаружи

В какой области видимости var не видна снаружи

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

Функциональная область видимости var

var не видна снаружи функции — это её границ видимости:

function myFunction() {
  var x = 10;
  console.log(x); // 10
}

myFunction();
console.log(x); // ReferenceError: x is not defined

Вне функции myFunction переменная x не существует и вызывает ошибку.

var видна внутри блоков

Отличие var от let/const в том, что она игнорирует блочную область видимости. Она видна во всех вложенных блоках внутри функции:

function myFunction() {
  if (true) {
    var y = 20;
  }
  console.log(y); // 20 — видна снаружи блока if!
}

myFunction();
console.log(y); // ReferenceError — но не видна снаружи функции

Сравнение var, let, const

Важно понимать различие в областях видимости:

function test() {
  // var — видна в функции, но не в блоках
  if (true) {
    var varX = 1;
  }
  console.log(varX); // 1 — видна!
  
  // let — видна только в блоке
  if (true) {
    let letY = 2;
  }
  console.log(letY); // ReferenceError — не видна!
  
  // const — видна только в блоке
  if (true) {
    const constZ = 3;
  }
  console.log(constZ); // ReferenceError — не видна!
}

Hoisting (поднятие переменных)

var имеет hoisting — объявление поднимается в начало функции, но инициализация остаётся на месте:

function example() {
  console.log(a); // undefined (не ReferenceError!)
  var a = 5;
  console.log(a); // 5
}

// Интерпретируется как:
function example() {
  var a; // объявление поднято
  console.log(a); // undefined
  a = 5; // инициализация остаётся
  console.log(a); // 5
}

Это отличается от let/const, которые создают temporal dead zone (временно мёртвую зону) до их объявления.

Глобальная область видимости

var, объявленная в глобальной области, становится свойством объекта window (в браузере) или global (в Node.js):

var globalVar = 'visible';
console.log(window.globalVar); // 'visible' (в браузере)
console.log(globalVar); // 'visible'

// А let/const не становятся свойствами
let localLet = 'not visible';
console.log(window.localLet); // undefined

Практические примеры проблем с var

Проблема 1: Переповерхность области видимости

function processItems(items) {
  for (var i = 0; i < items.length; i++) {
    console.log(items[i]);
  }
  console.log(i); // Значение i доступно! (проблема)
}

Проблема 2: Замыкания в цикле

const functions = [];
for (var i = 0; i < 3; i++) {
  functions.push(() => console.log(i));
}
functions[0](); // 3 (не 0!)
functions[1](); // 3 (не 1!)

// Почему? Потому что все функции ссылаются на одну переменную i
// К моменту вызова i уже равна 3

Решение — использовать let вместо var:

const functions = [];
for (let i = 0; i < 3; i++) {
  functions.push(() => console.log(i));
}
functions[0](); // 0
functions[1](); // 1
functions[2](); // 2

Вывод

var не видна только снаружи функции, в которой она объявлена. Внутри функции она видна везде, включая вложенные блоки. Это делает var менее предсказуемой, чем let/const, которые имеют блочную область видимости и считаются лучшей практикой в современном JavaScript.