Типы данных в JavaScript

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

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

Дальше: Работа с объектами и прототипами · Справочник JavaScript · Преобразования типов (ниже в этой статье)

---

Типы данных в JS

Типы данных и типизация

Общие определения — типы данных и типизация в базовом разделе энциклопедии.

Переменные и константы в процессе использования получают значение. Для возраста (age) ожидают число; для имени (name) — последовательность символов. Тип подсказывает среде выполнения, как интерпретировать байты в памяти и какие операции допустимы.

★ JavaScript — язык с динамической и слабой типизацией: тип связывается со значением в момент присваивания, а не при объявлении имени; одно имя в разных местах программы может указывать на значения разных типов. Неявные преобразования (coercion) допускают, например, "5" + 2 → "52" и "5" - 2 → 3. Для сравнения значения и типа используют === (см. таблицу =, ==, ===). Статическая проверка возможна поверх JS через TypeScript (постепенная типизация).

Объявление без аннотации типа: let x; при x = 10 объект имеет тип Number, при x = "текст" — String.

Типы в JS делятся на примитивные (одно значение) и ссылочные (объекты, массивы, функции).

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

---

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

---

Примитивные типы

Тип	Описание	Пример
Number	Числа (целые и дробные)	let age = 25;
String	Строки (текст)	let name = "Анна";
Boolean	Логический (true / false)	let isStudent = true;
Undefined	Значение не присвоено	let x;
Null	Пустое значение	let y = null;
Symbol	Уникальный идентификатор	const id = Symbol("id");

Как можно понять, примитивные используются для простых данных, когда это какое-то имя, число, текст, или просто "флажок" вроде "истина" или "ложь".

---

Число

Число (Number). Тип Number представляет как целые, так и вещественные числа. Внутренне используется формат IEEE 754 (64-битное число с плавающей точкой). Поддерживает специальные значения — Infinity, -Infinity, NaN.

<переменная> = <числовое_значение>;
<переменная> = <арифметическое_выражение>;
<переменная> = parseFloat(<строка>);
<переменная> = parseInt(<строка>, <основание>);
<переменная> = Math.<функция>(<аргументы>);

Разбор:

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

Простой пример:

let age = 30;

Разбор:

• let объявляет переменную с блочной областью видимости.
• age получает числовое значение 30, то есть тип number определяется автоматически.
• В JavaScript не требуется явно писать тип переменной, это делает движок во время выполнения.
• Значение можно позже изменить, потому что используется let, а не const.
• Такая форма подходит для простых скалярных данных, которые участвуют в арифметике и сравнениях.
• Сам фрагмент минимален, но демонстрирует базовую идею динамической типизации.

Разбор:

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

Сложный пример:

const totalPrice = items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
    .toFixed(2);
const finalPrice = parseFloat(totalPrice) + (hasDiscount ? -totalPrice * 0.1 : 0);

Разбор:

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

Здесь значение переменной finalPrice формируется через цепочку операций — агрегация массива объектов (reduce), округление до двух знаков после запятой (toFixed — возвращает строку), преобразование строки обратно в число (parseFloat) и условная скидка. Результат — число, но его получение требует нескольких этапов обработки.

---

Булево

Булево (Boolean) принимает два значения: true и false. Также может быть получен неявно через приведение типов (например, !!"text" → true).

<переменная> = true | false;
<переменная> = <логическое_выражение>;
<переменная> = Boolean(<значение>);
<переменная> = !<значение>;

Разбор:

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

Простой пример:

let isActive = true;

Разбор:

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

Сложный пример:

const isEligible = user.age >= 18 && 
                   user.hasVerifiedEmail &&
                   (user.permissions.includes('read') || user.role === 'admin');

Разбор:

• Объявляется константа isEligible, в которой сохраняется итог логической проверки доступа.
• Оператор >= проверяет возрастной порог, затем && объединяет обязательные условия.
• user.permissions.includes('read') проверяет наличие права в массиве разрешений.
• Через || задаётся альтернативный путь: роль admin также даёт доступ.
• Круглые скобки фиксируют приоритет вычисления для прав и роли, делая выражение читаемым.
• Результат всей цепочки всегда булев — true, если все требования выполнены, иначе false.
• Это типичный паттерн guard-условия для авторизации в приложениях.

Разбор:

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

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

---

Строки

Строка (String). Тип String представляет собой последовательность символов UTF-16. Может создаваться как строковый литерал или через конструктор String(). Строки неизменяемы: любая "правка" возвращает новую строку, исходный литерал остаётся прежним. Частые методы (includes, slice, replace, split, trim и др.) — в разделе методы строк ниже; полный перечень — в встроенных функциях и справочнике.

<переменная> = "<текст>";
<переменная> = `<шаблонная_строка с ${выражением}>`;
<переменная> = String(<значение>);
<переменная> = <строка>.<метод>(<аргументы>);

Разбор:

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

Простой пример:

let name = "Тимур";

Разбор:

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

Сложный пример:

const greeting = `Добро пожаловать, ${user.name || 'Гость'}!
Вы вошли ${new Date().toLocaleDateString('ru-RU')} в ${new Date().getHours()}:${String(new Date().getMinutes()).padStart(2, '0')}.
Ваш баланс: ${(user.balance ?? 0).toFixed(2)} ₽.`;

Разбор:

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

Выше используется шаблонная строка с интерполяцией значений из объекта, операторами нулевого слияния (??) и логического ИЛИ (||), форматированием времени и числовым округлением. Результат — многострочная строка, собранная динамически.

Методы для работы со строками

У примитива string и объекта-обёртки String десятки методов на прототипе String.prototype. В повседневном коде чаще всего нужны поиск и сравнение, срезы и разбиение, замена, регистр и обрезка пробелов, дополнение длины. Вызов через точку: "Hello".includes("ell"). Методы возвращают новую строку (или число / булево / массив), оригинал не меняется.

Три метода на каждый день

charAt(4) — символ по индексу ("Hello".charAt(4) → "o"). includes("ell") — есть ли подстрока (true / false). slice(1, 3) — фрагмент без изменения исходной строки ("el"). Ниже — шпаргалка по группам задач; полный перечень — в встроенных функциях и справочнике String.

Для шаблонов с регулярными выражениями (match, search, replace с RegExp) — отдельно регулярные выражения.

Доступ по индексу

Индексация с нуля: "Hello"[0] → "H". Удобные методы:

Способ	Пример	Результат
charAt(index)	"Hello".charAt(4)	"o"
at(index)	"Hello".at(-1)	"o" (отрицательные индексы с конца, ES2022)
codePointAt(pos)	"Hello".codePointAt(1)	101 (код символа e)

charAt за пределами строки вернёт пустую строку; at — undefined.

Шпаргалка — частые методы (на "Hello")

Поиск и проверка

Метод	Назначение	Пример	Результат
includes(search)	Есть ли подстрока	"Hello".includes("x")	false
startsWith(search)	Начинается с…	"Hello".startsWith("H")	true
endsWith(search)	Заканчивается на…	"Hello".endsWith("o")	true
indexOf(search)	Индекс первого вхождения	"Hello".indexOf("l")	2
lastIndexOf(search)	Индекс последнего вхождения	"Hello".lastIndexOf("l")	3
search(regexp)	Индекс по шаблону	"Hello".search("e")	1
match(regexp)	Совпадения RegExp	"Hello".match(/[A-Z]/g)	["H"]

Изменение, регистр и склейка

Метод	Назначение	Пример	Результат
concat(...str)	Склеить строки	"Hello".concat(" ", "world")	"Hello world"
repeat(count)	Повторить N раз	"Hello".repeat(3)	"HelloHelloHello"
replace(search, new)	Замена первого совпадения	"Hello".replace("llo", "y")	"Hey"
replaceAll(search, new)	Замена всех совпадений	"Hello".replaceAll("l", "*")	"He**o"
toLowerCase()	Нижний регистр	"Hello".toLowerCase()	"hello"
toUpperCase()	Верхний регистр	"Hello".toUpperCase()	"HELLO"

Дополнение длины и обрезка пробелов

Метод	Назначение	Пример	Результат
padStart(len, pad)	Дополнить слева	"Hello".padStart(8, "*")	"***Hello"
padEnd(len, pad)	Дополнить справа	"Hello".padEnd(8, "*")	"Hello***"
trim()	Убрать пробелы с краёв	" Hello ".trim()	"Hello"
trimStart()	Убрать пробелы в начале	" Hello ".trimStart()	"Hello "
trimEnd()	Убрать пробелы в конце	" Hello ".trimEnd()	" Hello"

Срезы и разбиение

Метод	Назначение	Пример	Результат
slice(start, end)	Срез (конец не входит)	"Hello".slice(1, 3)	"el"
substring(start, end)	Подстрока между индексами	"Hello".substring(2, 4)	"ll"
split(separator)	Разбить в массив	"Hello".split("")	["H","e","l","l","o"]

Сравнение

Метод	Назначение	Пример	Результат
localeCompare(other)	Порядок с учётом локали	"Hello".localeCompare("Héllo")	-1

Оператор in для подстрок нет (он для ключей объектов). Проверка вхождения — includes или indexOf(...) !== -1.

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

const text = "Hello";

console.log(text.includes("ell"));     // true
console.log(text.startsWith("He"));    // true
console.log(text.indexOf("l"));        // 2
console.log(text.lastIndexOf("l"));    // 3
console.log(text.search("e"));         // 1 — как indexOf, но аргумент часто RegExp

indexOf и lastIndexOf возвращают -1, если подстрока не найдена. Для сортировки массивов строк по алфавиту с учётом языка — localeCompare в функции сравнения: (a, b) => a.localeCompare(b, "ru").

Срезы и разбиение

slice(start, end) поддерживает отрицательные индексы; end не включается. substring при отрицательных аргументах ведёт себя иначе (их обнуляет) — для срезов чаще берут slice.

const word = "Hello";

console.log(word.slice(1, 3));       // "el"
console.log(word.slice(-2));         // "lo" — последние два символа
console.log(word.split(""));         // массив символов
console.log("a,b,c".split(","));     // ["a", "b", "c"]

Собрать массив обратно в строку — arr.join(separator): ["a", "b"].join("-") → "a-b".

Замена и склейка

replace с строкой в первом аргументе меняет только первое совпадение; для всех — replaceAll (ES2021) или replace с RegExp и флагом g.

console.log("Hello".replace("l", "L"));           // "HeLlo"
console.log("Hello".replaceAll("l", "L"));      // "HeLLo"
console.log("file.txt".replace(/\.txt$/, ".md")); // "file.md"

Для простой склейки удобнее шаблонные строки `${a}${b}`; concat остаётся в старом коде и цепочках вызовов.

Регистр, пробелы, длина

const raw = "  Hello World  ";

console.log(raw.trim());              // "Hello World"
console.log(raw.trimStart());         // "Hello World  "
console.log("42".padStart(5, "0"));   // "00042"
console.log("hi".repeat(3));          // "hihihi"

Свойство length — число кодовых единиц UTF-16, а не всегда "видимых" символов: эмодзи и некоторые буквы могут занимать два индекса. Для перебора по символам Unicode — for (const ch of str) или Array.from(str).

Регулярные выражения на строках

Метод	Назначение
match(regexp)	Первое совпадение или все при флаге g
matchAll(regexp)	Итератор всех совпадений (нужен флаг g)
search(regexp)	Индекс первого совпадения

console.log("Hello".match(/[A-Z]/g));   // ["H"]

Подробнее — RegExp в JavaScript.

---

Undefined, Null, Symbol

Отдельно важно выделить symbol - в JS они особые, и не относятся к "тексту" вроде строки. Это ярлык, который можно использовать как ключ для свойств объекта, как наклейка на шкаф. Каждый Symbol — уникален, даже если у них одинаковое описание. Даже если два символа называются "id", они не равны. Это как два разных браслета с одинаковой гравировкой — выглядят одинаково, но физически разные.

---

Undefined

<переменная>; // без присваивания
<переменная> = undefined;

Разбор:

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

---

Null

<переменная> = null;

Разбор:

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

---

Symbol

<переменная> = Symbol(<описание>);
<объект>[<символ>] = <значение>;

Разбор:

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

Представим наглядно.

У нас есть объект user, и мы ему решили добавить свойство, сразу в формате строки:

user.id = "12345";

Разбор:

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

И в дальнейшем, эту переменную id можно перезаписать, заменив значение - если кто-то укажет user.id = значение, то наше изначальное значение будет перезаписано:

user.id = 23456;

Разбор:

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

И если мы не хотим, чтобы другие скрипты перезаписали случайно наше значение, можно использовать отдельный ключ типа Symbol (не путать со строковым свойством "id"):

const id = Symbol("id");

const user = {};
user[id] = 12345;

// user.id = 999;        // это другое свойство (строка "id"), Symbol не затронет
// user[id] = 999;       // перезапишет только тот, кто знает ссылку id

console.log(user[id]); // 12345

Разбор:

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

Символ не появится в for...in и Object.keys(), но доступен по ссылке id. Его нельзя неявно привести к строке (String(id) выбросит ошибку).

---

Дата и время (Date)

Объект Date хранит момент времени (миллисекунды с 01.01.1970 UTC). Это ссылочный тип, хотя часто передают как значение через ISO-строки в JSON.

const now = new Date();
const birthday = new Date(2000, 4, 15); // месяц 4 = май (0-based)
const parsed = new Date('2026-05-30T12:00:00Z');

console.log(now.toISOString());           // UTC для API
console.log(now.toLocaleDateString('ru-RU')); // локальный вывод
console.log(now.getFullYear(), now.getMonth() + 1, now.getDate());

Задача	API
Текущий момент	new Date()
Компоненты (локальные)	getFullYear(), getMonth(), getDate(), getHours(), …
Изменить компонент	setFullYear(), setMonth(), …
Разница в мс	date2 - date1
Формат для API	toISOString()
Локальный формат	toLocaleString('ru-RU', options)

Таймеры (браузер и Node.js):

const timerId = setTimeout(() => console.log('раз'), 1000);
clearTimeout(timerId);

const intervalId = setInterval(() => console.log('тик'), 500);
clearInterval(intervalId);

Замер длительности — console.time('label') / console.timeEnd('label') или performance.now() (высокая точность, браузер и Node.js).

Temporal API

У Date есть исторические огрехи (месяцы с нуля, мутабельность, часовые пояса). Стандарт Temporal — будущая замена

обзор — в ES-модули и Temporal.

Практика форматирования дат в CLI — простые приложения.

Но в ряде случаев можно ссылаться к каким-то сложным объектам, как мы ранее уже упоминали – это ссылочные типы.

---

Ссылочные типы

Тип	Описание	Пример
Object	Объект (ключ: значение). JSON (JavaScript Object Notation) — текстовый формат обмена, синтаксически похожий на литералы объектов JS, но это не "тот же язык" (нет функций, undefined и т.д.).	const user = { name: "Анна" };
Map	Коллекция пар "ключ–значение"; ключ любого типа, порядок вставки сохраняется	const m = new Map([["a", 1]]);
Array	Массив (список значений)	const nums = [1, 2, 3];
Function	Функция	function greet() { ... }

Объект имеет какие-то свойства и значения, допустим name – свойство объекта user. Объект, как мы ранее выяснили, может иметь и свои функции – это будут методы.

---

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

---

Объект

Объект — это коллекция пар "ключ-значение". Является ссылочным типом. Все не-примитивы в JS являются объектами (включая массивы и функции). Свойства можно добавлять динамически — после создания объекта в него допускается записывать новые пары ключ-значение.

<переменная> = { <ключ>: <значение>, ... };
<переменная> = new Object();
<переменная> = Object.<статический_метод>(<аргументы>);
<переменная>.<свойство> = <значение>;
<переменная>.<метод>(<аргументы>);

Разбор:

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

Простой пример — создание объекта с вложенным объектом и методом:

const person = {
  name: "Иван",
  age: 30,
  address: {
    city: "Москва",
    zip: "101000"
  },
  sayHello: function() {
    console.log("Привет!");
  }
};

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

Сложный пример:

const config = Object.freeze({
    apiUrl: process.env.API_URL || 'https://api.example.com',
    timeout: parseInt(process.env.TIMEOUT || '5000', 10),
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${authToken}`
    },
    retryCount: maxRetries > 0 ? Math.min(maxRetries, 5) : 0
});

Разбор:

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

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

Операции с обычным объектом (литерал / Object):

Действие	Синтаксис
Добавить или заменить свойство	obj[key] = value, Object.assign(obj, { ... })
Прочитать	obj.key, obj[key]
Удалить	delete obj.key
Проверить ключ	key in obj, Object.hasOwn(obj, key)
Ключи / значения	Object.keys(obj), Object.values(obj), Object.entries(obj)

Для частых операций "добавить / прочитать / удалить по ключу" с произвольными ключами и предсказуемым порядком перебора удобнее встроенный Map — см. раздел Map ниже.

Доступ к свойствам

Существуют две основные нотации чтения и записи.

Точечная нотация (dot notation) — когда имя свойства известно заранее и является валидным идентификатором:

console.log(person.name);   // "Иван"
console.log(person.address.city); // "Москва"

Скобочная нотация (bracket notation) — когда ключ хранится в переменной, содержит пробелы или спецсимволы:

console.log(person["age"]); // 30

const field = "name";
console.log(person[field]); // "Иван"

Скобочная форма обязательна для динамических ключей; точечная короче для фиксированных имён.

Изменение и добавление свойств

Существующее значение перезаписывается присваиванием:

person.age = 31;

Новое поле добавляется тем же синтаксисом — если ключа ещё нет, он создаётся:

person.job = "Разработчик";

Деструктуризация объекта

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

const { name, age } = person;
console.log(name); // "Иван"
console.log(age);  // 31

Переименование и значения по умолчанию:

const { name: userName, country = "Россия" } = person;

Методы объекта

Функция, записанная как свойство объекта, — метод. Внутри обычной функции-метода ключевое слово this ссылается на сам объект:

const greeter = {
  name: "Иван",
  sayHello: function() {
    console.log("Привет, " + this.name + "!");
  }
};

greeter.sayHello(); // "Привет, Иван!"

Для создания метода (функции, являющейся свойством объекта) в JavaScript существует несколько стандартных синтаксических конструкций.

Object Literal:

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

Разбор:

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

Важно про this: Внутри методов, объявленных как function() или через короткую запись name(), значение this динамически привязывается к вызывающему объекту (user). Это позволяет обращаться к другим свойствам того же объекта.

Если объект был создан ранее, метод можно добавить, присвоив ему функцию.

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

Разбор:

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

Использование конструктора (Function Constructor) - ещё один способ добавления методов к объектам. Этот подход используется при создании множества одинаковых объектов. Методы определяются внутри конструктора или на прототипе.

function Car(brand) {
  this.brand = brand;
  
  // Метод, созданный внутри конструктора (неэффективно для больших объемов, 
  // так как создается новая копия функции для каждого экземпляра)
  this.start = function() {
    console.log(`${this.brand} едет`);
  };
}

const myCar = new Car("BMW");
myCar.start();

Разбор:

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

Лучшая практика: Для оптимизации памяти методы следует добавлять в прототип объекта, а не внутрь конструктора. Тогда один экземпляр функции будет использоваться всеми объектами.

function Animal(name) {
  this.name = name;
}

// Добавляем метод в прототип
Animal.prototype.speak = function() {
  console.log(`${this.name} говорит`);
};

const dog = new Animal("Собачка");
dog.speak(); // Собачка говорит

Разбор:

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

Использование классов (ES6 Classes) - синтаксический сахар над прототипами, обеспечивающий более чистый и понятный код для объектно-ориентированного программирования.

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

Разбор:

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

Объекты могут быть базовыми, DOM, пользовательскими и глобальным.

---

Map

Map — встроенная структура данных для хранения пар "ключ–значение". Ключом может быть что угодно (число, объект, Symbol), порядок элементов совпадает с порядком добавления. Теория словаря и хеш-таблиц — в структурах данных; здесь — практика в JavaScript.

Когда выбирать Map

• ключи — объекты, DOM-узлы, массивы или другие ссылочные значения;
• важен порядок вставки при обходе;
• нужен быстрый доступ к количеству записей через map.size;
• одни и те же ключи многократно добавляются и удаляются (кэш, индексы, метаданные сущностей).

Для JSON-подобных записей с фиксированным набором строковых полей достаточно литерала { ... } из раздела Объект.

Создание

const empty = new Map();
const fromPairs = new Map([
  ["host", "api.example.com"],
  [443, "https"],
]);

const cacheKey = { id: 1001 };
const cache = new Map();
cache.set(cacheKey, { name: "Анна", role: "admin" });

Конструктор принимает итерируемое из пар [ключ, значение]. Литерал { a: 1 } в new Map(...) передать нельзя — нужен массив пар или Object.entries(obj).

Операции

Действие	API
Добавить или заменить	map.set(key, value) — возвращает map (цепочка вызовов)
Прочитать	map.get(key) — undefined, если ключа нет
Проверить ключ	map.has(key)
Удалить	map.delete(key) — true, если запись была
Очистить всё	map.clear()
Число записей	map.size (свойство, не метод)

Методы перебора

Метод	Описание
keys()	итератор ключей в порядке вставки
values()	итератор значений
entries()	итератор пар [ключ, значение] — то же, что [Symbol.iterator]()
forEach(callback)	обход; аргументы колбэка: (value, key, map)

const roles = new Map([
  ["admin", "full"],
  ["guest", "read"],
]);

for (const [role, level] of roles) {
  console.log(role, level);
}

roles.forEach((level, role) => {
  console.log(`${role}: ${level}`);
});

Map итерируем: его можно передать в for...of, развернуть через [...map] или собрать массив ключей через Array.from(map.keys()).

Справочник в энциклопедии

Сравнение ключей (NaN, +0 / -0), отличия от Object, статический Map.groupBy и родственный Set — в справочнике JavaScript.

---

Глобальный объект

Глобальный объект - это объект, который существует в любом окружении выполнения JavaScript и доступен всегда, везде. Все глобальные переменные, функции, встроенные константы на самом деле являются свойствами этого объекта.

<глобальное_свойство> = <значение>; // без объявления (не рекомендуется)
window.<свойство> = <значение>;     // в браузере
global.<свойство> = <значение>;     // в Node.js
globalThis.<свойство> = <значение>; // универсально

Разбор:

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

Какой именно объект является глобальным, зависит от окружения:

Окружение	Глобальный объект
Браузер	window
Node.js	global
Современный JS (в любом окружении)	globalThis

Как это работает? Такой глобальный объект содержит встроенные глобальные переменные, функции и объекты:

Свойства:

• Infinity - бесконечность;
• NaN - "не число";
• undefined - значение undefined;
• globalThis - ссылка на самого себя.

Встроенные функции:

• isNaN() - проверяет, является ли значение NaN;
• isFinite() - проверяет, является ли значение конечным числом;
• parseFloat(), parseInt() - парсинг чисел;
• encodeURI(), decodeURI() - кодировка URL;
• eval() - выполнение строки как кода.

Встроенные конструкторы (которые на самом деле - функции):

• Object - объект;
• Array - массив;
• String - строка;
• Number - число;
• Boolean - булево значение;
• Function - функция;
• Date - дата;
• RegExp - регулярное выражение;
• Symbol - уникальный идентификатор;
• Error, TypeError, SyntaxError - ошибки.

Встроенные объекты:

• Math - математические функции;
• JSON - работа с JSON;
• Promise - промисы (позже их изучим);
• console - консоль.

Если объявить переменную без var, let, const в глобальной области - она станет свойством глобального объекта. То есть не пишите вроде x = 42, если не хотите создавать глобальное свойство - добавляйте ключевое слово let или const.

Важно — let, const, class не создают свойства в глобальном объекте, а var создаёт, как и вышеприведённый пример с x = 42. Полное сравнение трёх способов объявления — в переменных в JavaScript.

---

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

---

Массив

Массив же используется как набор данных, когда мы хотим расширить набор данных. К примеру, nums – набор чисел, включающий три значения – 1, 2 и 3. Каждый из этих элементов массива имеет индекс, что позволяет обращаться к конкретному значению, допустим, 2.

Массив (Array) — упорядоченная коллекция элементов. Является подтипом объекта, но имеет специфические методы (map, filter, reduce и т.д.).

<переменная> = [ <элемент>, ... ];
<переменная> = new Array(<размер> | <элементы>);
<переменная> = Array.<статический_метод>(<аргументы>);
<переменная>.<метод_массива>(<аргументы>);
<переменная>[<индекс>] = <значение>;

Разбор:

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

Простой пример:

let numbers = [1, 2, 3];

Разбор:

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

Сложный пример:

const filteredUsers = users
    .filter(user => user.active)
    .map(user => ({
        ...user,
        fullName: `${user.firstName} ${user.lastName}`.trim(),
        roleLabel: roleMap[user.role] || 'Неизвестно'
    }))
    .sort((a, b) => a.fullName.localeCompare(b.fullName));

Разбор:

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

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

Операции Array:

Действие	Синтаксис / метод
Добавить в конец	push(value), arr[arr.length] = value
Вставить по индексу	splice(index, 0, value)
Прочитать	arr[index]
Заменить	arr[index] = value
Удалить по индексу	splice(index, 1), pop(), shift()
Длина	arr.length

Методы в таблице выше (push, splice, присваивание по индексу) меняют тот же массив. В React, Redux и при передаче массива в дочерние функции это даёт неожиданные побочные эффекты: все ссылки на массив видят одно и то же изменение. Ниже — привычные иммутабельные варианты: исходный массив остаётся прежним, результат — новый.

Иммутабельные альтернативы мутирующим методам

Девять частых операций и их безопасные аналоги. Слева — метод, который мутирует array; справа — выражение, которое возвращает новый массив (или копию для дальнейшей цепочки).

Задача	Мутирует исходный массив	Иммутабельная альтернатива
Добавить в конец	array.push(item)	[...array, item]
Удалить с конца	array.pop()	array.slice(0, -1)
Удалить с начала	array.shift()	array.slice(1)
Добавить в начало	array.unshift(item)	[item, ...array]
Заполнить диапазон	array.fill(value, start?, end?)	[...array].fill(value, start?, end?)
Вставить / удалить в середине	array.splice(start, deleteCount?, ...items)	array.toSpliced(start, deleteCount?, ...items) (ES2023)
Развернуть порядок	array.reverse()	array.toReversed() (ES2023)
Сортировать	array.sort(compareFn?)	array.toSorted(compareFn?) (ES2023)
Скопировать участок внутри массива	array.copyWithin(target, start, end?)	[...array].copyWithin(target, start, end?)

Замена одного элемента по индексу без мутации — array.with(index, value) (ES2023) вместо array[index] = value:

const nums = [1, 2, 3];
const next = nums.with(1, 99); // [1, 99, 3]
// nums по-прежнему [1, 2, 3]

Поверхностная копия

Spread ([...array]) и slice копируют уровень массива: если внутри лежат объекты, ссылки на них общие. Для глубокого клонирования — ниже в статье или structuredClone в справочнике.

Методы map, filter, reduce, concat, slice изначально не меняют исходный массив — их удобно сочетать с иммутабельным обновлением state. Подробный разбор итерации и сортировки — в массивах и коллекциях; сравнение мутирующих и немутирующих API — в справочнике JavaScript.

Группировка по ключу

Частая задача — разложить массив объектов по общему полю — задачи по проекту, заказы по статусу, пользователи по роли. Раньше для этого писали цикл или reduce. С ES2024 в стандарте есть Object.groupBy() — статический метод, который принимает любой итерируемый набор (массив, Set, генератор) и функцию-ключ.

const tasks = [
  { description: 'Task 1', tag: 'Tag 1', project: 'Project A' },
  { description: 'Task 2', tag: 'Tag 1', project: 'Project B' },
  { description: 'Task 3', tag: 'Tag 2', project: 'Project A' },
];

const tasksByProject = Object.groupBy(tasks, (task) => task.project);
console.log(tasksByProject);

Результат — обычный объект — ключ — строка (значение, которое вернула функция), значение — массив элементов этой группы:

{
  'Project A': [
    { description: 'Task 1', tag: 'Tag 1', project: 'Project A' },
    { description: 'Task 3', tag: 'Tag 2', project: 'Project A' },
  ],
  'Project B': [
    { description: 'Task 2', tag: 'Tag 1', project: 'Project B' },
  ],
}

Исходный tasks не меняется. Порядок групп совпадает с порядком первого появления ключа при обходе.

Сигнатура: Object.groupBy(items, callbackFn). Для каждого элемента вызывается callbackFn(element, index), возвращаемое значение приводится к строковому ключу свойства объекта (Symbol тоже допустим, но на практике чаще строки и числа, которые становятся строками "42").

Когда нужен не строковый ключ

Если ключ группы — объект, Map или что-то, что нельзя надёжно положить в обычный объект, используйте Map.groupBy() — тот же callback, но результат Map, где ключи сохраняют исходный тип. Подробнее — в справочнике (Object.groupBy, Map.groupBy).

Эквивалент на reduce (для старых сред или когда groupBy недоступен):

const tasksByProject = tasks.reduce((groups, task) => {
  const key = task.project;
  (groups[key] ??= []).push(task);
  return groups;
}, {});

Object.groupBy и Map.groupBy поддерживаются в актуальных браузерах и в Node.js 21+; для legacy-сред есть полифилл в core-js.

---

Если нужно получить разницу между двумя массивами (что добавилось, что удалилось, что осталось), удобнее перевести их в Set:

function syncTags(oldTags, newTags) {
    const prev = new Set(oldTags);
    const curr = new Set(newTags);

    return {
        added: [...curr.difference(prev)],
        removed: [...prev.difference(curr)],
        unchanged: [...prev.intersection(curr)],
    };
}

Разбор:

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

Такой подход лучше отражает логику множеств. Для старых окружений без Set.prototype.difference/intersection можно оставить тот же подход через filter и includes.

---

Функция

Функция – это та сама функция, которые мы изучили ранее. Она тоже представляет собой тип данных.

Функция (Function) — это объект первого класса. Может быть передана как аргумент, возвращена из другой функции, храниться в переменной.

function <имя>(<параметры>) { <тело> }
<переменная> = function(<параметры>) { <тело> };
<переменная> = (<параметры>) => { <тело> };
<переменная> = new Function(<строковые_параметры>, <тело_в_виде_строки>);
<результат> = <функция>(<аргументы>);

Разбор:

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

Простой пример:

function greet(name) {
    return `Привет, ${name}!`;
}

Разбор:

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

Сложный пример:

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

Разбор:

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

Здесь реализован паттерн каррирования: функция высшего порядка возвращает другую функцию. createValidator абстрагирует логику валидации, позволяя генерировать конкретные валидаторы. Это мощный инструмент функционального программирования.

---

Автоматические преобразования (coercion)

JavaScript автоматически преобразует типы данных при выполнении операций. Это поведение называется приведением типов или автоматическим преобразованием.

---

Явное преобразование типов

Явное преобразование происходит, когда программист намеренно меняет тип данных с помощью встроенных функций.

Преобразование в число:

let str = "123";
let num = Number(str); // 123

let bool = true;
let numFromBool = Number(bool); // 1

let empty = "";
let numFromEmpty = Number(empty); // 0

Разбор:

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

Преобразование в строку:

let num = 456;
let str = String(num); // "456"

let bool = false;
let strFromBool = String(bool); // "false"

let obj = { name: "Джон" };
let strFromObj = String(obj); // "[object Object]"

Разбор:

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

Преобразование в булево значение:

let str = "текст";
let bool = Boolean(str); // true

let empty = "";
let boolEmpty = Boolean(empty); // false

let num = 0;
let boolNum = Boolean(num); // false

let obj = { name: "Джон" };
let boolObj = Boolean(obj); // true

Разбор:

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

---

Неявное преобразование типов

Неявное преобразование происходит автоматически при выполнении операций.

Преобразование при сложении:

let result = 5 + "5"; // "55" - число преобразуется в строку
let another = "Цена: " + 100; // "Цена: 100"

Разбор:

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

Преобразование при сравнении (сводная таблица =, ==, === — выражения и операторы):

let isEqual = 5 == "5"; // true - неявное преобразование
let isStrictEqual = 5 === "5"; // false - строгое сравнение без преобразования

let isTrue = 0 == false; // true
let isFalse = 1 == true; // true

Разбор:

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

Преобразование при логических операциях:

let value = "привет" && 42; // 42 - первое истинное значение
let another = "" || "значение"; // "значение" - первое истинное значение

let result = 0 || null || undefined || "ок"; // "ок"

Разбор:

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

---

Таблица преобразований

Значение	В число	В строку	В булево
"" (пустая строка)	0	""	false
"0"	0	"0"	true
"123"	123	"123"	true
0	0	"0"	false
1	1	"1"	true
NaN	NaN	"NaN"	false
null	0	"null"	false
undefined	NaN	"undefined"	false
true	1	"true"	true
false	0	"false"	false
{}	NaN	"[object Object]"	true
[]	0	""	true

---

Ложные значения (falsy values)

В JavaScript существует шесть значений, которые преобразуются в false при булевом преобразовании:

• false
• 0
• "" (пустая строка)
• null
• undefined
• NaN

Все остальные значения преобразуются в true.

Примеры:

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

Разбор:

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

---

Практические примеры преобразований

Проверка ввода пользователя:

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

Разбор:

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

Работа с формами:

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

Разбор:

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

---

Объекты как ссылочные типы

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

---

Разница между примитивными и ссылочными типами

Примитивные типы хранят значение напрямую:

let a = 10;
let b = a;
b = 20;

console.log(a); // 10 - значение не изменилось
console.log(b); // 20

Разбор:

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

Ссылочные типы хранят ссылку на объект:

let obj1 = { name: "Джон" };
let obj2 = obj1;
obj2.name = "Мария";

console.log(obj1.name); // "Мария" - объект изменился
console.log(obj2.name); // "Мария"

Разбор:

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

---

Передача по ссылке

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

function updateName(person) {
    person.name = "Алекс";
}

const user = { name: "Джон" };
updateName(user);

console.log(user.name); // "Алекс" - объект изменился

Разбор:

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

---

Поверхностное копирование

Поверхностное копирование создаёт новый объект, но вложенные объекты копируются по ссылке:

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

Разбор:

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

---

Глубокое копирование

Глубокое копирование создаёт полностью независимую копию объекта со всеми вложенными объектами.

В современном JavaScript для обычных данных (объекты, массивы, Map, Set, Date) удобнее всего встроенный structuredClone (ES2022; Node.js 17+, актуальные браузеры). Подробный список поддерживаемых типов и опций — в справочнике JavaScript.

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

Разбор:

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

structuredClone копирует циклические ссылки и вложенные Map/Set, в отличие от JSON.parse(JSON.stringify(...)). Функции, Symbol, WeakMap/WeakSet и DOM-узлы через него клонировать нельзя — для таких случаев остаётся своя рекурсивная логика или поверхностное копирование отдельных полей.

---

Сравнение объектов

Объекты сравниваются по ссылке, а не по содержимому:

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

Разбор:

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

---

Изменяемость объектов

Объекты в JavaScript являются изменяемыми (mutable):

const user = {
    name: "Джон",
    age: 30
};

user.age = 31; // Можно изменить свойство
user.email = "john@example.com"; // Можно добавить новое свойство
delete user.age; // Можно удалить свойство

console.log(user);
// { name: "Джон", email: "john@example.com" }

Разбор:

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

Для создания неизменяемых объектов используется Object.freeze:

const frozenUser = Object.freeze({
    name: "Джон",
    age: 30
});

frozenUser.age = 31; // Не сработает в строгом режиме
frozenUser.email = "john@example.com"; // Не сработает

console.log(frozenUser.age); // 30 - значение не изменилось

Разбор:

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

---

Практические примеры работы со ссылками

Клонирование массива объектов:

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

Разбор:

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

Функция, которая не изменяет исходный объект:

function updateUser(user, updates) {
    return {
        ...user,
        ...updates
    };
}

const originalUser = { id: 1, name: "Джон", age: 30 };
const updatedUser = updateUser(originalUser, { age: 31 });

console.log(originalUser.age); // 30 - оригинал не изменился
console.log(updatedUser.age); // 31 - новая версия с изменениями

Разбор:

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

Работа с вложенными структурами:

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

Разбор:

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

---

Как не путаться в типах на практике

В учебных примерах типы выглядят очевидно, но в продукте значения часто приходят из формы, URL, localStorage и API. Там почти все сначала строка, и тип нужно привести явно.

Рабочий подход:

1. Приняли данные.
2. Привели типы в одном месте.
3. Дальше в коде работаем уже с нормализованной структурой.

function normalizeUserInput(raw) {
  return {
    name: String(raw.name || "").trim(),
    age: Number(raw.age),
    isStudent: raw.isStudent === "true"
  };
}

Разбор:

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

Почему это важно:

• меньше скрытых багов из-за неявного coercion;
• проще отлаживать и тестировать;
• понятнее контракт между слоями приложения.

Читать дальше:

• Выражения и операторы в JavaScript
• Условные конструкции в JavaScript
• Работа с объектами и прототипами