Переменные: var, let, const

1. Введение

Переменная в JavaScript — это, по сути, “коробка” для хранения данных. Хотите сохранить возраст пользователя? Имя? Результат вычислений? Для всего этого нужны переменные. Представьте себе: у вас есть шкаф с ящиками, и на каждом написано, что внутри. Вот так работает переменная: вы кладёте в неё значение, а потом достаёте по имени.

В JS переменные позволяют:

• хранить значения (числа, строки, объекты, что угодно!),
• обращаться к этим значениям по имени,
• изменять их в процессе работы программы.

Пример самой простой переменной

let name = "Вася";
console.log(name); // Выведет: Вася

2. Способы объявления переменных: var, let, const

В JavaScript есть целых три способа объявить переменную: var, let и const. Звучит как выбор между кофе, чаем и энергетиком — вроде все бодрят, но последствия разные.

var (старичок-дедушка)

var — это самый старый способ объявлять переменные, который появился более 30(!) лет назад. Он до сих пор работает, но у него есть свои “особенности” и баги, о которых мы поговорим чуть позже.

var age = 25;
console.log(age); // 25

let (современный стандарт)

let — появился в стандарте ES6 (2015 год) и стал стандартом для большинства случаев. Он решает многие проблемы var и делает код более предсказуемым.

let city = "Київ";
console.log(city); // Київ

const (константа, не изменяется)

const — тоже появился в ES6. Его используют для переменных, которые не должны изменяться (например, настройки, ключи, магические числа).

const PI = 3.14;
console.log(PI); // 3.14

3. var, let, const — в чем разница?

Давайте разберёмся, чем отличаются эти три способа и почему современные разработчики уже почти не используют var.

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

Переменная, объявленная с помощью var, видна во всей функции, в которой она объявлена (или в глобальной области, если не в функции). Это называется функциональная область видимости.

function testVar() {
    if (true) {
        var message = "Привет из if!";
    }
    console.log(message); // Работает! Выведет: Привет из if!
}
testVar();

Здесь переменная message доступна вне блока if, потому что var не “видит” блоки, только функции. Это может привести к неожиданным ошибкам!

Подробнее про if, функции и блоки кода вы узнаете в следующих лекциях. Просто хотелось собрать всю информацию о переменных в одном месте.

let и const: область видимости — блок

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

function testLet() {
    if (true) {
        let message = "Привет из if!";
        console.log(message); // Работает
    }
    console.log(message); // Ошибка! message не видна вне if
}
testLet();

То же самое с const:

if (true) {
    const secret = 42;
    console.log(secret); // 42
}
console.log(secret); // Ошибка! secret не виден вне блока

const: нельзя менять значение

Переменная, объявленная через const, должна быть инициализирована сразу и нельзя изменить её значение (но можно менять содержимое объекта, если это объект — подробнее ниже).

const planet = "Земля";
planet = "Марс"; // Ошибка: Assignment to constant variable

4. Примеры: let vs const vs var

Давайте разберём на простых примерах.

var

var greeting = "Привет";
greeting = "Здравствуйте";
console.log(greeting); // Здравствуйте

let

let count = 10;
count = count + 5;
console.log(count); // 15

const

const year = 2024;
year = 2025; // Ошибка!
console.log(year); // 2024

5. Область видимости (scope): где “живёт” переменная

В программировании очень важно понимать, где именно “видна” переменная. Это называется областью видимости.

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

Пример с вложенными блоками

if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
}
console.log(a); // 1 — работает, var виден везде
console.log(b); // Ошибка! let не виден вне блока
console.log(c); // Ошибка! const не виден вне блока

Пример с функцией

function foo() {
    var x = 10;
    let y = 20;
    const z = 30;
    console.log(x, y, z); // 10 20 30
}
foo();
console.log(x, y, z); // Ошибка! Всё объявлено внутри функции

6. Hoisting — “всплытие” переменных

В JS есть забавная штука — hoisting (всплытие). Это когда объявления переменных “поднимаются” в начало области видимости, но инициализация — нет.

var: всплывает полностью

console.log(msg); // undefined, а не ошибка!
var msg = "Hello";

В этом примере переменная msg как бы объявляется в начале функции, но значение присваивается только на строке с =.

let и const: всплывают, но не инициализируются

console.log(name); // ReferenceError!
let name = "Вася";

С let и const переменная существует в так называемой “временной мёртвой зоне” (TDZ) — до строки объявления к ней нельзя обратиться.

7. Best practices: как правильно объявлять переменные

• Используйте const по умолчанию.
  Если переменная не должна меняться — объявляйте её через const. Это защищает от случайных изменений и делает код понятнее.
• Используйте let, если переменная будет меняться.
  Например, счётчик в цикле, временные значения и т.п.
• Не используйте var.
  Почти никогда. Только если вы пишете код для очень старых браузеров или хотите удивить коллег.
• Давайте переменным осмысленные имена.
  Не пишите a, b, c, если только это не математика. Лучше userName, totalPrice, isLoggedIn.
• Область видимости — ваш друг.
  Объявляйте переменные как можно ближе к месту использования, чтобы не было “загрязнения” глобального пространства.

8. Практика: объявляем переменные в вашем приложении

Давайте добавим переменные в ваше учебное приложение. Пусть у нас есть файл script.js, который подключён к HTML через <script src="script.js"></script>.

Пример 1: let

let userName = "Алиса";
console.log("Имя пользователя:", userName);

userName = "Боб";
console.log("Новое имя пользователя:", userName);

Пример 2: const

const appName = "Моё первое приложение";
console.log("Название приложения:", appName);
appName = "Новое имя"; // Ошибка!

Пример 3: var (только для истории)

var oldSchool = "Старый способ";
console.log(oldSchool);

Пример 4: область видимости

let score = 0;

function addPoints(points) {
    let message = "Добавляем очки!";
    score += points;
    console.log(message, "Текущий счёт:", score);
}

addPoints(5);
console.log(message); // Ошибка! message видна только внутри функции

9. Типичные ошибки при работе с переменными

Ошибка №1: Использование var вместо let/const.
var может привести к путанице с областями видимости, особенно в больших программах. Например, если вы объявили переменную внутри блока с помощью var, она “просочится” наружу, что часто вызывает баги.

Ошибка №2: Забыл объявить переменную.
Если вы просто пишете x = 5; без let, const или var, переменная становится глобальной (в браузере — свойством window). Это очень плохая практика и может привести к конфликтам и труднопоисковым ошибкам.

Ошибка №3: Переопределение const.
Попытка присвоить новое значение переменной, объявленной через const, вызовет ошибку. Если переменная должна меняться — используйте let.

Ошибка №4: Использование переменной до объявления.
С let и const это вызовет ошибку ReferenceError. С var — получите undefined, что может привести к трудноуловимым багам.

Ошибка №5: Дублирование имён переменных.
В одной области видимости нельзя объявлять две переменные с одним именем через let или const. С var это возможно, но не рекомендуется.