Как изолировать var в функциональной области видимости?

Как изолировать var в функциональной области видимости?

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

Проблема с var

// var имеет функциональную область видимости
function example() {
  if (true) {
    var x = 5;
  }
  console.log(x);  // 5 — переменная видна за пределами блока if
}

// Это работает благодаря hoisting
function hoisting() {
  console.log(y);  // undefined (а не ошибка)
  var y = 10;
}

Способ 1: Использование let и const (рекомендуется)

Самый простой способ — просто заменить var на let или const:

// Плохо: использование var
if (true) {
  var x = 5;
}
console.log(x);  // 5 — утечка из блока

// Хорошо: использование let
if (true) {
  let x = 5;
}
console.log(x);  // ReferenceError — x не определена

Способ 2: IIFE (Immediately Invoked Function Expression)

Если вынуждены использовать var, можно обернуть код в IIFE для создания новой функциональной области видимости:

// Без изоляции — var "утекает"
var counter = 0;
for (var i = 0; i < 3; i++) {
  counter += i;
}
console.log(i);  // 3 — переменная видна глобально!

// С изоляцией через IIFE
(function() {
  var counter = 0;
  for (var i = 0; i < 3; i++) {
    counter += i;
  }
  console.log(i);  // ReferenceError — i недоступна снаружи
})();

Способ 3: Модульный паттерн (Module Pattern)

Используется IIFE для создания приватного scope:

// Модуль с приватными переменными
const calculator = (function() {
  var result = 0;  // приватная переменная
  
  return {
    add: function(x) {
      result += x;
      return result;
    },
    get: function() {
      return result;
    }
  };
})();

calculator.add(5);
console.log(calculator.get());  // 5
console.log(calculator.result);  // undefined — result приватна

Способ 4: Замыкания (Closures)

Функция создаёт собственную область видимости, изолируя var:

function createCounter() {
  var count = 0;  // изолирована в функции
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter.count);  // undefined — count недоступна

Проблема с var в циклах (классическая ошибка)

// Проблема: всем setTimeout будет одна переменная
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);  // 3, 3, 3 (вместо 0, 1, 2)
  }, 100);
}

// Решение 1: использовать let
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);  // 0, 1, 2 ✅
  }, 100);
}

// Решение 2: IIFE для каждой итерации
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);  // 0, 1, 2 ✅
    }, 100);
  })(i);
}

Способ 5: Function Scope с методом

var globalVar = 'global';

(function() {
  var localVar = 'local';
  
  console.log(globalVar);  // 'global' — доступна глобальная
  console.log(localVar);   // 'local' — доступна локальная
})();

console.log(localVar);  // ReferenceError — var localVar изолирована

Сравнение всех подходов

Best Practices

✅ В современном коде:

// Всегда используй let/const вместо var
function process() {
  let x = 5;    // ✅ Блочная область видимости
  const y = 10; // ✅ Неизменяемое, блочная область видимости
}

❌ Избегай:

// Старый стиль — не используй в новых проектах
function legacy() {
  var x = 5;  // ❌ Функциональная область видимости, hoisting
}

✅ Если всё же нужна изоляция var:

// Используй IIFE или замыкания
(function() {
  var isolated = 'only inside function';
})();

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