Переменные в JavaScript

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

Каждая переменная ассоциирована с определённым значением (число, строка, объект, функция и т.д.), которое может меняться во время работы приложения. Переменные позволяют сохранять промежуточные результаты, пользовательские данные, состояния интерфейса — всё, что требуется для динамического поведения приложения.

Пример:

let age = 25;
let userName = "Алексей";
let isActive = true;

Здесь:

  • age, userName, isActive — имена переменных.
  • 25, "Алексей", true — значения, которые они хранят.

Ключевые особенности:

  • Динамическая типизация — тип значения определяется автоматически при присваивании, и переменная может хранить значения разных типов в разное время. 
    let x = 10;     // число
x = "привет";   // теперь строка — допустимо
x = [1, 2, 3];  // теперь массив — тоже допустимо
  • Объявление и использование — переменную нужно объявить перед использованием (кроме случаев с var в нестрогом режиме, но это устаревшая практика).
  • Область видимости — определяет, где переменная доступна (блок, функция, глобально), зависит от ключевого слова (let, const, var).

Подробнее про эти особенности мы прочтём в следующих лекциях.

Названия переменных

При создании и использовании переменных необходимо следовать правилам наименования переменных.

Работа с переменными: объявление, инициализация и присваивание

Работа с переменными включает три ключевых действия: объявление, инициализация и присваивание. Эти понятия тесно связаны, но не тождественны — их различие критически важно для понимания поведения кода.

Объявление

Объявление переменной — это создание её имени в области видимости. Оно сообщает интерпретатору: «Я хочу использовать эту метку для хранения значения».

В JavaScript есть три ключевых слова для объявления:

Ключевое слово Особенности
var Функциональная область видимости, поднимается (hoisting), может быть переобъявлена. Устарел, не рекомендуется.
let Блочная область видимости, поднимается, но не инициализируется до строки объявления («временная мёртвая зона»). Можно переassign, но нельзя переобъявить в одной области.
const Блочная область видимости, поднимается, но не инициализируется до строки объявления. После инициализации нельзя изменить ссылку на значение.

Примеры:

var x;        // объявление через var
let y;        // объявление через let
const z;      // Ошибка: const требует инициализации при объявлении

Ключевое отличие: const обязывает сразу присвоить значение — без этого возникает синтаксическая ошибка.

💡 Рекомендация: Всегда используйте const по умолчанию. Если знаете, что значение будет меняться — замените на let. Никогда не используйте var в современных проектах — он вносит путаницу из-за hoisting и функциональной области видимости.

Инициализация

Инициализация — это первое присваивание значения переменной в момент её создания. Это когда переменная получает своё начальное значение и становится доступной для использования.

  • Инициализация может совпадать с объявлением.
  • Она обязательна для const, опциональна для let и var.

Примеры:

let age;            // объявление — без инициализации (значение undefined)
age = 25;           // присваивание — теперь переменная проинициализирована

let score = 100;    // объявление + инициализация в одной строке
const name = "Алекс"; // объявление + инициализация (обязательно!)

Инициализация = объявление + первое присваивание в одном действии.

Присваивание

Присваивание — это операция изменения значения уже существующей переменной. Оно происходит после объявления (и, если нужно, после инициализации).

  • Для let — можно присваивать сколько угодно раз.
  • Для const — присваивание разрешено только один раз (при инициализации); любое последующее присваивание вызовет ошибку.
  • Присваивание не обязательно должно происходить сразу после объявления.

Примеры:

let count;
count = 0;          // первое присваивание (и одновременно инициализация)
count = count + 1;  // второе присваивание — изменение значения
count = null;       // присваивание — можно менять

const PI = 3.14;
PI = 3.14159;       // Ошибка: присваивание const после инициализации запрещено

// Но! Если значение — объект или массив:
const user = { name: "Иван" };
user.name = "Петр"; // Разрешено — меняется содержимое объекта, а не ссылка
user = {};          // Ошибка — попытка изменить ссылку

Важно: const защищает ссылку, а не содержимое. Для объектов и массивов можно менять свойства — это не нарушает константность.

Рекомендация: не жалеть создавать лишнюю переменную

В JavaScript, как и в любом языке программирования, читаемость и поддерживаемость кода важнее минимального количества строк. Создание дополнительной переменной для хранения промежуточного результата — это не расточительство, а практика, повышающая ясность кода.

Почему это полезно:

  • Упрощает чтение: имя переменной может объяснять смысл действия, вместо того чтобы оставлять сложное выражение без контекста.
  • Облегчает отладку: можно легко поставить точку останова на конкретной переменной и увидеть её значение.
  • Снижает когнитивную нагрузку: другие разработчики (и вы сами через неделю) быстрее поймут логику.
  • Повышает переиспользуемость: если значение используется несколько раз — нет нужды повторять вычисление.

Пример до и после:

Без лишней переменной (менее читаемо):

if (user.age >= 18 && user.status === 'active' && user.country !== 'restricted') {
  enableAccess();
}

С лишней переменной (более понятно):

const isAdult = user.age >= 18;
const isActive = user.status === 'active';
const isAllowedCountry = user.country !== 'restricted';

if (isAdult && isActive && isAllowedCountry) {
  enableAccess();
}

Здесь имена переменных выполняют роль документации — они сразу говорят, что проверяется, а не как.

Важно:

Не стоит создавать переменные ради создания — только если они действительно улучшают понимание. Не нужно оборачивать простые литералы или очевидные значения, например:

const five = 5; // Избыточно
return x + five;

// Лучше:
return x + 5;

Но если значение получено в результате вычисления, преобразования или запроса — лучше сохранить его с осмысленным именем.

Использование переменных в коде

Переменные используются для хранения данных, которые могут изменяться во время выполнения программы. Они позволяют:

  • Сохранять результаты вычислений;
  • Передавать данные между частями кода;
  • Управлять состоянием приложения (например, флаги, счётчики, пользовательские данные).

Правила использования:

  • Обращайтесь к переменной только после её объявления и инициализации. Попытка использовать let или const до объявления вызовет ошибку ReferenceError.
  • Не используйте переменные с неопределённым значением (undefined) без проверки — это источник багов.
  • Избегайте глобальных переменных. Всегда ограничивайте область видимости блоками ({}), функциями или модулями.
  • Используйте переменные для повторяющихся значений — это упрощает изменение параметров в будущем (например, таймауты, цвета, константы конфигурации).

Пример правильного использования:

const apiUrl = 'https://api.example.com/data';
const timeoutMs = 5000;

fetch(apiUrl, { timeout: timeoutMs })
  .then(response => response.json())
  .then(data => {
    const processedData = data.map(item => item.toUpperCase());
    displayResults(processedData);
  });

Здесь каждая переменная имеет чёткую роль:

  • apiUrl — централизованное управление адресом API;
  • timeoutMs — легко изменяемый параметр;
  • processedData — промежуточный результат, понятный по имени.

Ошибки, которых следует избегать:

  • Переиспользование одной переменной для разных целей: 
    let user = getUserById(123);
user = calculateDiscount(user); // Теперь user — не объект пользователя, а число. Путаница!
  • Использование переменных без инициализации: 
    let result;
console.log(result + 10); // NaN — непредсказуемое поведение