Урок 4: Переменные в JavaScript’e

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

Что такое переменные?

Представьте, что переменная это коробка, в которую вы кладете данные. Вы можете дать ей имя (например, userName), положить внутрь значение (например, "Максим"), а затем использовать это имя в коде вместо самого значения. Переменные позволяют хранить, изменять и повторно использовать данные, делая код гибким и удобным.

Типы переменных: let, const, var

В JavaScript есть три ключевых слова для объявления переменных. Разберем каждое.

1. var устаревший, но все еще встречается

Исторически var использовался во всех версиях JavaScript до 2015 года (ES6). Но у него есть недостатки:

• Область видимости: переменная var видна внутри всей функции, а не только в блоке {}, где объявлена.
• Поднятие (hoisting): переменная доступна до ее объявления (значение будет undefined).

Пример:

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

Почему не стоит использовать var сегодня?
Из-за неочевидного поведения в блоках и риска случайных перезаписей. Современные разработчики предпочитают let и const.

2. let для изменяемых значений

let появился в ES6 и решает проблемы var:

• Блочная область видимости: переменная существует только внутри блока {}.
• Нет поднятия: нельзя использовать до объявления.

Пример:

let name = "Максим";
name = "Анна"; // Можно изменить
console.log(name); // "Анна"

3. const для констант

const тоже появился в ES6 и предназначен для значений, которые не должны меняться:

• Нельзя перезаписать после объявления.
• Блочная область видимости.

Пример:

const PI = 3.14;
PI = 5; // Ошибка! Нельзя изменить константу.

Важно! Если const хранит объект или массив, их внутренние свойства можно менять:

const user = { name: "Максим" };
user.name = "Анна"; // Работает!

Правила объявления переменных

1. Имена переменных:
   • Могут содержать буквы, цифры, $, _.
   • Не должны начинаться с цифры.
   • Чувствительны к регистру: user ≠ User.
   • Нельзя использовать зарезервированные слова (if, function и т.д.).

   Примеры:

   let userName; // ✔️
   let 123price; // ❌ (начинается с цифры)
   let function; // ❌ (зарезервированное слово)

2. Объявление перед использованием:
   Всегда объявляйте переменные через let, const или var. Иначе переменная станет глобальной (что может привести к багам).
   age = 30; // ❌ Плохо (создает глобальную переменную)
   let age = 30; // ✔️

3. Одна переменная — одно объявление:
   Избегайте объявления нескольких переменных через запятую — это снижает читаемость.
   let a = 1, b = 2; // ❌ Неочевидно
   let a = 1; // ✔️
   let b = 2; // ✔️

Практические задачи

Задача 1: Объявление переменных

Создайте переменные для хранения:

• Вашего имени.
• Вашего возраста.
• Флага, есть ли у вас домашнее животное.

Решение:

const userName = "Максим";
let age = 30;
const hasPet = true;

Задача 2: Перезапись значений

Объявите переменную counter с начальным значением 0. Увеличьте ее на 1, затем уменьшите на 2.

Решение:

let counter = 0;
counter += 1; // 1
counter -= 2; // -1

Задача 3: Константы с объектами

Создайте константу car с полями:

• model (модель авто).
• year (год выпуска).

Измените год выпуска на следующий.

Решение:

const car = {
  model: "Lada X-Cross",
  year: 2025
};
car.year = 2026; // Работает, так как меняем свойство объекта, а не саму переменную.

Задача 4: Область видимости

Покажите разницу между var и let:

if (true) {
  var a = 10;
  let b = 20;
}
console.log(a); // 10 (var видна вне блока)
console.log(b); // Ошибка: b не определена

Заключение

Переменные это фундамент JavaScript. Помните:

• Используйте const для констант, let для изменяемых значений.
• Избегайте var.
• Следите за областью видимости и именованием.

Потренируйтесь на задачах, чтобы закрепить материал. Даже небольшая ошибка в объявлении переменной может сломать весь код!

Хотите продолжить обучение?
Полный курс «JavaScript для начинающих»