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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

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

Теория

Определение переменной, составные типы, динамическая типизация и типобезопасность — 4.03, типы данных, типизация.

Лексические области и замыкания — область видимости в JavaScript.

Переменные и константы

Для своей работы, функции используют какие-то данные. Эти данные являются по умолчанию чем-то неопределённым. Но, чтобы этот набор данных как-то "упаковать" в пригодной для работы оболочке, нужен "контейнер".

★ Переменная – это "контейнер" для хранения данных. Её значение можно менять. Переменная – это именно та самая "x" из математических примеров, где x=5+5.

★ Константа – тоже контейнер для данных, но её значение нельзя изменить после создания. Представим, что вам нужно объявить значение, и оно будет постоянным. Тогда и нужна константа.

В начальных примерах мы указывали именно константы, потому что подразумевали, что значение, указанное нами в коде, будет постоянным и неизменным.

Говоря о создании, поскольку фактически непосредственного "создания" не происходит, программирование использует термин "объявить". Переменную не создают, а объявляют.

let, var, const

Ключевые слова для объявления переменных

Ключевое слово	Описание	Пример
let	Переменная (значение можно менять)	`let age = 25`
const	Константа (значение нельзя менять)	`const PI = 3.14`
var	Устаревший вариант переменной	`var name = "Тимур"`

Сводная таблица

var имеет функциональную область видимости: переменная "просачивается" из блоков if, for и {} на уровень функции. let и const ограничены блоком — фигурными скобками, в которых объявлены. Ниже — сжатое сравнение; разбор с примерами кода — в разделе "Объявление переменных".

Свойство	`var`	`let`	`const`
Свойство глобального объекта (`window` в браузере)	Да, при объявлении на верхнем уровне скрипта	Нет	Нет
Функциональная область видимости	Да	Да	Да
Блочная область видимости	Нет	Да	Да
Можно переназначить (`=`)	Да	Да	Нет
Можно повторно объявить в той же области	Да	Нет (`SyntaxError`)	Нет (`SyntaxError`)
Доступ до строки объявления	`undefined` (хоистинг с инициализацией `undefined`)	`ReferenceError` (временная мёртвая зона, TDZ)	`ReferenceError` (TDZ)

Практический вывод: в новом коде — const по умолчанию, let, если значение меняется, var только при поддержке legacy. У const нельзя переназначить привязку (имя), но содержимое объекта или массива по-прежнему можно менять, если не заморозить его (Object.freeze).

Переменную можно объявить, и она уже будет в памяти. Потом ей можно изменить значение, допустим, x была равна 10, а потом можно её сделать равной 5. Константу, если мы указали как равной 10, уже значение не поменять.

В коде это выглядит так:

// Переменная (можно менять)
let userName = "Оскар";
userName = "Хан"; // OK

// Константа (нельзя менять)
const birthYear = 1990;
birthYear = 2000; // Ошибка! TypeError: Assignment to constant variable.

Разбор:

let userName = "Оскар" объявляет изменяемую переменную и сразу инициализирует её строкой.
Повторное присваивание userName = "Хан" показывает, что let допускает изменение значения после объявления.
const birthYear = 1990 создаёт константу: имя связывается со значением один раз в пределах текущей области видимости.
Строка birthYear = 2000 нарушает правило const, поэтому движок выбрасывает TypeError.
Важно различать ошибку времени выполнения и синтаксическую ошибку: здесь код парсится успешно, но падает в момент присваивания.
Этот фрагмент подчёркивает рабочий стандарт — const для неизменяемых ссылок, let для переменных, которые реально меняются.

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Поэтому, если какое-то значение менять в процессе не потребуется, и оно всегда будет стабильным – лучше использовать константы, это займёт меньше ресурсов.

У вас может возникнуть вопрос - а почему var устаревшее ключевое слово для объявления переменной?

Мы помним, что такое область видимости переменной - как правило, она ограничивается блоком кода, где она была объявлена. Но область видимости переменных var не ограничивается блоком кода - она создаёт глобальную переменную. Допустим, если напишем if(true) { let name; } то name будет видна только внутри фигурных скобок блока if, при попытке доступа из других блоков name будет undefined. Но если мы аналогично сделаем var - if(true) { var name } то name станет видима!

Кроме этого, var допускает повторное объявление, в отличие от let - если вы напишете let name; let name; то на втором экземпляре "let name;" будет ошибка синтаксиса, потому что переменная name уже объявлена. В случае с var name; var name система ругаться не будет.

Ещё интересное отличие - var технически считается объявленным в самом начале работы функции. То есть, даже если вы поместите var в конец блока функции, системе будет "плевать", она начнёт исполнение с var, "переместив" в начало кода. И что самое сложное - такое объявление "перемещается" без своего значения.

Как использовать переменные?

Пример:

let name = "Анна";
let message = 'Привет, мир!';
let template = `Меня зовут ${name}`; // подстановка: ${имя_переменной}

Разбор:

В примере показаны три способа хранения строковых данных в переменных.
Шаблонная строка в обратных кавычках использует интерполяцию ${name} и подставляет текущее значение переменной.
Переменная template вычисляется в момент выполнения строки, а не заранее при парсинге файла.
Если name изменится позже, это не поменяет уже созданное значение template автоматически.
Такой синтаксис удобен для составления человекочитаемых сообщений без ручной конкатенации через +.
Ключевые элементы фрагмента: let (объявление), строковые литералы и выражение интерполяции.

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Здесь мы объявили три переменные:

name — значение "Анна";
message — "Привет, мир!";
template — шаблонная строка "Меня зовут ${name}".

Шаблонная строка подставляет текущее значение переменной: при name = "Анна" результат — "Меня зовут Анна".

Пример объекта:

const person = {
    name: "Рэй",
    age: 30,
    isStudent: false
  };

Разбор:

const person создаёт ссылку на объект, которую нельзя переназначить на другой объект.
Внутри фигурных скобок задан литерал объекта с тремя свойствами — name, age, isStudent.
Ключи объекта (name, age, isStudent) выступают как имена полей, значения могут быть разных типов.
Строка, число и булево значение в одном объекте демонстрируют динамическую типизацию JavaScript.
Доступ к данным выполняется через person.name, person.age, person.isStudent или через квадратные скобки.
Даже при const внутренние свойства объекта остаются изменяемыми, если не использовать Object.freeze.

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Здесь мы видим более сложный объект person, который включает в себя свойства, name, age, isStudent. Все эти три свойства друг от друга независимы, к примеру, isStudent может быть true. Следовательно, обратившись к person.name, person.age, person.isStudent – мы получим соответственно значения "Рэй", 30 и false. Так и работает объект.

Объявление переменных

★ Создание (объявление) переменной:

<ключевое_слово> <имя_переменной>;

let age; // Объявили переменную (значение = undefined)

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Объявить переменную можно через ключевое слово let или var. При объявлении значение можно не указывать. Логически это "пусть будет возраст".

Главное отличие между var и let в области видимости. Это главное отличие.

var: Обладает функцийной областью видимости. Переменная становится доступной во всей функции, где она объявлена, независимо от того, находится ли она внутри блоков if, for или while.
let: Обладает блочной областью видимости. Переменная видна только внутри блока { ... }, в котором она объявлена (например, внутри if, for или просто фигурных скобок).

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Play ITЗагрузка интерактивного демо…

При использовании var в цикле for переменная цикла остается доступной после завершения цикла и имеет значение последнего элемента. При использовании let переменная создается заново для каждой итерации и недоступна после цикла.

// --- С var ---
for (var i = 0; i < 3; i++) {
  console.log("Итерация:", i);
}
console.log("После цикла:", i); // Выведет: 3 (i доступна и равна 3)

// --- С let ---
for (let j = 0; j < 3; j++) {
  console.log("Итерация:", j);
}
// console.log("После цикла:", j); // ОШИБКА: ReferenceError: j is not defined
// Переменная j уничтожается после окончания блока цикла

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

var: Позволяет переобъявлять одну и ту же переменную в одной и той же области видимости без ошибок. Последнее объявление побеждает.
let: Запрещает повторное объявление переменной с тем же именем в той же области видимости. Это вызовет ошибку SyntaxError.

// --- С var ---
var name = "Тимур";
var name = "Новое имя"; // Разрешено, но может запутать логику
console.log(name); // "Новое имя"

// --- С let ---
let age = 31;
// let age = 32; // ОШИБКА: SyntaxError: Identifier 'age' has already been declared

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

var: Подвержен хоистингу (вынесению вверх). Переменная объявляется и инициализируется значением undefined в начале функции/блока. К ней можно обратиться до строки объявления, но она будет иметь значение undefined.
let: Также подвержен хоистингу, но не инициализируется. Между началом блока и строкой объявления переменная существует в зоне временной мертвой области (TDZ). Попытка обратиться к ней до объявления вызовет ошибку ReferenceError.

// --- С var ---
console.log(a); // Вывод: undefined (без ошибки)
var a = 5;

// --- С let ---
console.log(b); // ОШИБКА: ReferenceError: Cannot access 'b' before initialization
let b = 5;

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Если объявить переменную с var вне любой функции, она становится свойством глобального объекта (window в браузере). С let это невозможно — глобальная переменная с let не добавляется в объект window.

var globalVar = "Я в window";
let globalLet = "Я не в window";

console.log(window.globalVar); // "Я в window"
console.log(window.globalLet); // undefined

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Сводка по трём ключевым словам — в таблице выше. Кратко по выбору:

Задача	Что использовать
Значение не меняется	`const`
Значение меняется внутри блока или функции	`let`
Поддержка старого кода без рефакторинга	`var` (осторожно с областью видимости и хоистингом)

Присваивание значений

Оператор = записывает значение; для сравнения в условиях нужны == или === — см. сводную таблицу.

★ Присваивание значения:

<имя_переменной> = <значение>;

age = 25; // Теперь age = 25

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Присваивание значение выполняется через символ равенства "=". Присваивание можно выполнить и при объявлении, но в нашем случае, это будет "Возраст равен 25".

Инициализация при объявлении:

<ключевое_слово> <имя_переменной> = <значение>;

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

★ Использование:

<имя_переменной>

console.log(age); // 25

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Поскольку ранее переменная age уже была объявлена – в памяти для неё выделено место, а после присвоения получено было и конкретное значение типа Number. Теперь можно просто указать имя переменной, чтобы использовать.

Обновление значения:

<имя_переменной> = <новое_значение>;

Деструктуризирующее присваивание:

\{ <свойство>: <имя_переменной> \} = <объект>;

[ <имя_переменной> ] = <массив>;

Эти шаблоны позволяют извлекать значения из объектов или массивов и одновременно объявлять новые переменные.

Объявление нескольких переменных:

<ключевое_слово> <имя1> = <значение1>, <имя2> = <значение2>, …;

Правила работы с переменными

★ Правила именования переменных:

имена чувствительны к регистру (user, USER, User – разные переменные);
можно использовать буквы, цифры, _ и $;
нельзя начинать с цифры: 1user – ошибка;
нельзя использовать зарезервированные ключевые слова (let, function).

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

JS - динамически типизированный, что позволяет писать просто "пусть будет переменная", а система сама решит, что за тип, на основе значения — это значительно упрощает код. И допустим можно сделать так:

let array = [1,2]

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Это массив, мы буквально сказали - пусть будет переменная по имени array, значением которой будет массив чисел из 1 и 2. И порой возникает задача, когда нужно распаковать такие массивы или объекты, раскидав их в несколько переменных. Это называется деструктирующее присваивание.

Мы просто объявляем, буквально в инверсии:

let [a, b] = array;

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Так мы указываем, что a и b это соответствующие значения массива array, что позволит нам использовать соответствующие значения - a будет 1, b будет 2 (a - первый элемент массива, b второй):

console.log(a); // 1
console.log(b); // 2

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Элементы массива можно пропускать, добавив ", ,":

let [x, , z] = [10, 20, 30];

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Можно указать …rest, чтобы выбрать массив оставшихся:

let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5] → массив оставшихся

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

И можно устанавливать значения по умолчанию:

let [name = "Аноним", age = 18] = ["Алиса"];
console.log(name); // "Алиса"
console.log(age);  // 18 → значение по умолчанию

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Деструктуризация массивов разобрана выше. Для объектов — в разделе Типы данных — объект и в операторах и выражениях.

Hoisting

Hoisting – это поведение JavaScript, при котором объявления переменных и функций перемещаются в начало своей области видимости во время компиляции кода. Это происходит до выполнения кода.

Переменные, объявленные с var, поднимаются в начало функции:

console.log(x); // undefined
var x = 5;
console.log(x); // 5

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

В этом примере переменная x объявлена в начале функции, но её значение undefined до присвоения.

Функции, объявленные через Function Declaration, полностью поднимаются:

sayHello(); // "Привет!"

function sayHello() {
    console.log("Привет!");
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Функция sayHello доступна до её объявления в коде.

Переменные let и const также поднимаются, но остаются в "временной мёртвой зоне":

console.log(y); // ReferenceError
let y = 10;

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Переменная y существует в памяти, но недоступна до её объявления.

Пример с несколькими объявлениями:

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Область действия

Область действия определяет, где в коде доступна переменная. JavaScript поддерживает функциональную и блочную области видимости.

Функциональная область видимости

Переменные, объявленные внутри функции, доступны только внутри этой функции:

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Переменные var имеют функциональную область видимости:

function testVar() {
    if (true) {
        var x = "var";
    }
    console.log(x); // "var" - доступна вне блока if
}

testVar();

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Блочная область видимости

Переменные let и const имеют блочную область видимости:

function testLet() {
    if (true) {
        let y = "let";
        const z = "const";
        console.log(y); // "let"
        console.log(z); // "const"
    }
    // console.log(y); // ReferenceError
    // console.log(z); // ReferenceError
}

testLet();

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Вложенные блоки создают вложенные области видимости:

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Циклы создают свою область видимости для let:

for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
// console.log(i); // ReferenceError

for (var j = 0; j < 3; j++) {
    console.log(j); // 0, 1, 2
}
console.log(j); // 3 - var доступен вне цикла

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Глобальное пространство имён

Глобальное пространство имён – это область, доступная во всём коде приложения. Переменные, объявленные вне функций и блоков, становятся глобальными.

В браузере глобальный объект – это window:

let globalVar = "глобальная";

function checkGlobal() {
    console.log(globalVar); // "глобальная"
    console.log(window.globalVar); // "глобальная"
}

checkGlobal();

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Переменные без ключевого слова становятся глобальными:

function createGlobal() {
    accidentalGlobal = "случайная глобальная";
}

createGlobal();
console.log(accidentalGlobal); // "случайная глобальная"
console.log(window.accidentalGlobal); // "случайная глобальная"

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Глобальные константы полезны для общих значений:

const API_URL = "https://api.example.com";
const MAX_RETRIES = 3;
const TIMEOUT_MS = 5000;

function fetchData() {
    console.log(`Запрос к ${API_URL}`);
    // Логика запроса
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Избегайте загрязнения глобального пространства имён:

// Плохо - много глобальных переменных
var userName = "Джон";
var userAge = 30;
var userEmail = "john@example.com";

// Хорошо - одна глобальная переменная
const user = {
    name: "Джон",
    age: 30,
    email: "john@example.com"
};

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Модульный подход изолирует глобальные переменные:

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

using, await using

Конструкции using и await using предоставляют механизм автоматического управления ресурсами. Эти конструкции гарантируют освобождение ресурсов после завершения блока кода.

using для синхронного управления

Конструкция using автоматически вызывает метод dispose при выходе из блока:

// using для файловых операций
using (const file = new File("data.txt")) {
    const content = file.read();
    console.log(content);
}
// Файл автоматически закрыт здесь

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Пример с базой данных:

using (const connection = new DatabaseConnection()) {
    const results = connection.query("SELECT * FROM users");
    processResults(results);
}
// Соединение автоматически закрыто

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

await using для асинхронного управления

Конструкция await using работает с асинхронными ресурсами:

async function processFile() {
    await using (const file = await File.openAsync("data.txt")) {
        const content = await file.readAsync();
        console.log(content);
    }
    // Файл автоматически закрыт здесь
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с асинхронным выполнением.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Пример с сетевыми ресурсами:

async function fetchData() {
    await using (const client = new HttpClient()) {
        const response = await client.getAsync("https://api.example.com");
        const data = await response.json();
        return data;
    }
    // Клиент автоматически освобождён
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с асинхронным выполнением, созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Создание собственных disposable объектов

Объекты могут реализовать интерфейс IDisposable:

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Асинхронная версия:

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с асинхронным выполнением, созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Преимущества конструкций using

Конструкции using и await using обеспечивают:

Автоматическое освобождение ресурсов
Защиту от утечек памяти
Чистый и понятный код
Гарантированное выполнение dispose даже при ошибках

Пример с обработкой ошибок:

try {
    using (const resource = new CriticalResource()) {
        resource.performOperation();
        // Если здесь возникнет ошибка, dispose всё равно вызовется
    }
} catch (error) {
    console.error("Ошибка:", error);
}
// Ресурс освобождён независимо от результата

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Асинхронный пример:

async function safeOperation() {
    try {
        await using (const resource = await CriticalResource.createAsync()) {
            await resource.performAsyncOperation();
        }
    } catch (error) {
        console.error("Асинхронная ошибка:", error);
    }
    // Ресурс освобождён даже при ошибке
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с асинхронным выполнением.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Практический стандарт по переменным

Чтобы код оставался читаемым в реальных проектах, удобно придерживаться простого стандарта:

по умолчанию использовать const;
переходить на let, только если значение действительно меняется;
не использовать var в новом коде;
давать переменным имя по смыслу (userAge, totalPrice, isReady), а не по форме (x1, tmp).

Типичные ошибки новичков:

переиспользование одной переменной для разных сущностей (data сначала объект, потом строка);
слишком широкий scope (переменная объявлена снаружи, хотя нужна только внутри блока);
неявные глобальные переменные из-за пропущенного let/const.

Надежный шаблон:

function createOrderSummary(order) {
  const basePrice = order.price * order.count;
  const discount = order.hasPromo ? basePrice * 0.1 : 0;
  const finalPrice = basePrice - discount;

  return {
    userName: order.userName,
    finalPrice,
    isDiscountApplied: discount > 0
  };
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Где продолжить:

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