Переменные: var, let, const — различия и области видимости

Кто такие переменные и зачем они нужны?

Переменные — это контейнеры для данных. Представьте коробки с подписями: userName, isLoggedIn, cartItems. JavaScript хранит в них значения, чтобы мы могли:

1. Переиспользовать данные без дублирования
2. Изменять значения в процессе работы программы
3. Упрощать чтение кода (имя age понятнее, чем магическое число 25)

// Без переменных
console.log(25);
console.log(25);
console.log(25);

// С переменной
const age = 25;
console.log(age);
console.log(age);
console.log(age);

Эволюция переменных: от хаоса к порядку

В JavaScript есть три способа объявления переменных:

*Для const нельзя переприсвоить значение, но если это объект/массив — изменять содержимое можно!

Подробный разбор каждого типа

1. var — старый добрый друг

Особенности:

• Видна во всей функции (или глобально, если объявлена вне функции)
• Поднимается (hoisting) в начало области видимости
• Можно переобъявлять (хотя это плохая практика)

function varExample() {
  console.log(price); // undefined (но не ошибка!)
  var price = 100;
  if (true) {
    var price = 200; // Та же переменная!
  }
  console.log(price); // 200
}
varExample();

⚠️ var часто приводит к неожиданностям. В современном JS почти не используется.

2. let — разумная альтернатива

Особенности:

• Блочная область видимости (видна только в {...})
• Нельзя переобъявлять в той же области
• Поднимается, но недоступна до объявления (временная мёртвая зона)

function letExample() {
  let count = 5;

  if (true) {
    let count = 10; // Новая переменная!
    console.log(count); // 10
  }

  console.log(count); // 5
}
letExample();

3. const — защита от невнимательности

Особенности:

• Все особенности let
• Нельзя переприсваивать
• Обязательно инициализировать при объявлении

const MAX_USERS = 10;
MAX_USERS = 20; // TypeError!

const user = { name: 'Alex' };
user.name = 'Max'; // Можно! (изменение свойства)
user = {}; // Ошибка! (переприсвоение)

Лайфхаки выбора между let и const

1. Сначала const — если значение не должно меняться
2. Потом let — если значение будет изменяться
3. Никогда var — если только не поддерживаете legacy-код

// Хороший стиль:
const PI = 3.14;
let attempts = 0;

// Плохой стиль:
var oldSchool = 'не надо так';

Сравнение областей видимости

Рассмотрим наглядный пример:

function scopeShowdown() {
  var fruit = 'Яблоко';
  let vegetable = 'Морковь';
  const protein = 'Курица';

  if (true) {
    var fruit = 'Банан'; // Перезаписали!
    let vegetable = 'Огурец'; // Другая переменная
    const protein = 'Рыба'; // Другая переменная

    console.log(fruit, vegetable, protein); // Банан Огурец Рыба
  }

  console.log(fruit, vegetable, protein); // Банан Морковь Курица
}
scopeShowdown();

Итоговые рекомендации

1. 90% случаев — используйте const
2. 9% случаев — let для изменяемых переменных
3. 1% случаев — var (только если пишете для древних браузеров)
4. Имена констант в UPPER_CASE только для реально неизменных значений (настройки, конфиги)

// Идеальный современный код:
const API_URL = 'https://api.example.com';
let isLoading = true;

function fetchData() {
  const response = await fetch(API_URL);
  // ...
}

Теперь вы вооружены знаниями, которые помогут избежать тонких багов и писать более предсказуемый код! 🎉