Переменные: let, const, var и область действия
Объявляйте переменные с помощью let, const и var. Изучайте блочную и функциональную области действия и узнавайте, почему для большинства значений предпочтительнее const.
«Переменные: let, const, var и область действия» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Зачем нужны переменные?
Переменные хранят значения, чтобы Вы могли повторно использовать их, обновлять и давать им осмысленные имена. В JavaScript есть три способа объявить переменные: var (устаревший), let (современный, допускает переназначение) и const (современный, с постоянной привязкой).
const — выбор по умолчанию
Объявляйте переменную с помощью const, если не будете переназначать её. Это показывает намерение разработчика и предотвращает случайное переназначение. Обратите внимание: const запрещает изменить привязку, но не делает объекты или массивы неизменяемыми.
const name = 'Alice'; // can't reassign
const PI = 3.14159;
const user = { age: 25 }; // object is mutable
user.age = 26; // OK — property change, not rebinding
// user = {}; // Error — can't reassign constlet — когда требуется переназначение
Используйте let, если значение будет изменяться: для счётчиков циклов, накапливаемых сумм и переменных состояния. У let блочная область видимости — переменная существует только внутри ближайших внешних { }.
let score = 0;
score = score + 10; // OK
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
// console.log(i); // ReferenceError — i is out of scopevar — устаревшее объявление
У var область видимости функции (а не блока), и объявление поднимается в начало функции. Это приводит к трудноуловимым ошибкам. В современном JavaScript избегайте var; отдавайте предпочтение const и let.
function example() {
if (true) {
var x = 5; // function-scoped, not block-scoped
}
console.log(x); // 5 — still accessible here!
}Область видимости: где существуют переменные
Глобальная область видимости: переменная объявлена вне любой функции или блока и доступна везде. Область видимости функции: переменная объявлена внутри функции и доступна только внутри неё. Блочная область видимости: let/const внутри { }, доступны только внутри этого блока.
Поднятие объявлений
Поднятие объявлений перемещает объявления в начало их области видимости во время компиляции. Объявления var поднимаются и инициализируются значением undefined. Объявления let и const поднимаются, но не инициализируются — обращение к ним до объявления вызывает ошибку временной мёртвой зоны.
Именование переменных
Используйте описательные имена. Для переменных и функций применяйте camelCase (userName), для констант — UPPER_SNAKE_CASE (MAX_RETRIES), а для классов — PascalCase (UserProfile). Избегайте имён из одной буквы, кроме случаев с циклами (i, j).
Объявление нескольких переменных
Можно объявить несколько переменных в одном операторе, но обычно понятнее использовать отдельное объявление для каждой переменной. Избегайте формы с запятыми, поскольку она может скрывать область видимости и типы.
// Less clear:
let a = 1, b = 2, c = 3;
// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';Временная мёртвая зона (TDZ)
Обращение к переменной let или const до её объявления в коде вызывает ReferenceError. Этот промежуток между началом блока и объявлением называется TDZ.
console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;const с массивами и объектами
const запрещает переназначать переменную, но значение, на которое она ссылается, всё ещё можно изменять. Используйте Object.freeze() для поверхностно неизменяемого объекта или неизменяемые шаблоны для глубокой неизменяемости.
const items = [1, 2, 3];
items.push(4); // OK — mutates the array
items = []; // Error — can't reassign const
const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99; // Silently fails in non-strict modeПочему стоит предпочитать const вместо let?
Использование const по умолчанию упрощает понимание кода: Вы знаете, что переменная не будет переназначена в другом месте. Переходите на let только при реальной необходимости переназначения. Эта привычка уменьшает количество ошибок и повышает читаемость.
Быстрая проверка
В чём состоит ключевое различие между let и var?
Повторение: переменные и область видимости
Предпочитайте const для значений, которые не будут переназначаться. Используйте let для изменяемых значений. Избегайте var. Блочная область видимости (let/const) не позволяет переменным выходить за пределы блока. При поднятии объявлений var инициализируется значением undefined, а let/const вызывают ошибку TDZ при слишком раннем обращении.
Часто задаваемые вопросы
Урок «Переменные: let, const, var и область действия» бесплатный?
Да — полный текст урока «Переменные: let, const, var и область действия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переменные: let, const, var и область действия»?
Объявляйте переменные с помощью let, const и var. Изучайте блочную и функциональную области действия и узнавайте, почему для большинства значений предпочтительнее const. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Переменные: let, const, var и область действия»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Переменные: let, const, var и область действия
- Типы данных: string, number, boolean, null, undefined
- Функции: объявления, выражения и стрелочные функции
- Поток управления: if, else, switch, for, while