Урок 1 · JavaScript · 15 минут

Переменные: где хранить данные

Переменная позволяет сохранить значение под понятным именем и использовать его позже. Это основа почти любой программы: от счётчика кликов до данных формы.

Зачем нужны переменные

Представь, что на странице нужно показать имя пользователя в трёх местах. Вместо того чтобы писать текст вручную каждый раз, сохрани его в переменную. Если имя изменится, достаточно обновить значение в одном месте.

const userName = 'Анна';

console.log(userName);
console.log(`Привет, ${userName}!`);

console.log() выводит значение в консоль браузера. Открой инструменты разработчика клавишей F12, перейди на вкладку Console и попробуй выполнить эти строки.

Начинай с const

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

const courseName = 'Основы JavaScript';
const lessonsDone = 3;

// courseName = 'React'; // будет ошибка

Когда использовать let

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

let count = 0;
count = count + 1;
count += 1;

console.log(count); // 2

Запись count += 1 означает «возьми текущее значение и прибавь один». Переменная после этого хранит новое число.

Как называть переменные

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

• userName, isMenuOpen, totalPrice — хорошие имена;
• x, data1, aaa — непонятные имена для обычного кода;
• нельзя начинать имя с цифры и использовать пробелы.

Частые ошибки

• Пытаться изменить переменную, объявленную через const.
• Забыть кавычки у текста: const city = Москва вызовет ошибку.
• Путать число 5 и строку '5'. Они выглядят похоже, но ведут себя по-разному.
• Объявлять переменную без понятного имени и потом не понимать свой код.

Переменная хранит ссылку на значение

Число и строку const не даст заменить целиком. Объект и массив, объявленные через const, нельзя заменить другим объектом, но поля и элементы внутри менять можно. Если нужно присвоить новое значение целиком, бери let.

var в новом коде не нужен. Он виден шире, чем блок с фигурными скобками, и из-за этого переменная внезапно находится там, где ты её не объявлял.

const course = { title: "HTML", hours: 4 };
course.hours = 6;

let seats = 8;
seats = seats - 1;

const message = `Осталось мест: ${seats}`;

Обратные кавычки собирают строку из текста и значений. Обычные кавычки так не умеют: туда пришлось бы склеивать куски через +.

Имя говорит, что лежит внутри

• price лучше, чем number или data.
• Логические значения начинай с вопроса: isOpen, hasSeats.
• Список называй множественным числом: lessons, а один элемент — lesson.
• Не сокращай до одной буквы всё, кроме короткого счётчика цикла.

Неявные пустые значения

undefined появляется, когда значение ещё не задали. null ставят сознательно: «здесь пусто, и это решение». Пустая строка и ноль — настоящие значения, их нельзя путать с отсутствием данных. Проверка if (value) отбросит и 0, и пустую строку, хотя для цены ноль может быть правильным ответом.

const userName = 'Анна';
const city = 'Москва';
let lessonsDone = 3;

console.log(`${userName} из ${city} прошла ${lessonsDone} урока`);
lessonsDone += 1;