Базовый курс по JS on JSFlow

Custom Elements

Mon, 01 Jan 0001 00:00:00 +0000

Custom Elements #

Custom Elements — часть стандарта веб-компонентов: вы регистрируете новый HTML-тег и связываете его с классом JavaScript. Браузер создаёт экземпляр при разборе разметки <track-card> или через document.createElement('track-card'). Так оформляют переиспользуемые блоки UI — карточку трека, счётчик корзины, бейдж статуса заказа.

Регистрация элемента #

class TrackCard extends HTMLElement {
 connectedCallback() {
 if (this.dataset.rendered) return
 this.dataset.rendered = 'true'

 const title = this.getAttribute('title') ?? 'Без названия'
 const artist = this.getAttribute('artist') ?? ''

 this.innerHTML = `
 <article class="track-card">
 <h3>${title}</h3>
 <p>${artist}</p>
 <button type="button" data-action="play">Слушать</button>
 </article>
 `
 }
}

customElements.define('track-card', TrackCard)

Имя тега обязательно содержит дефис (track-card), чтобы не пересечься со встроенными элементами. Повторный define с тем же именем выбросит ошибку.

Fetch API

Mon, 01 Jan 0001 00:00:00 +0000

Fetch API #

Fetch — современный способ отправить HTTP-запрос из браузера и получить Response. Метод возвращает Promise, поэтому его удобно сочетать с async/await.

Простой GET-запрос #

const response = await fetch('/api/tracks?limit=5')
const tracks = await response.json()
console.log(tracks.length)

По умолчанию fetch делает GET без тела. URL может быть относительным (/api/...) — браузер подставит origin текущей страницы.

Если сервер отвечает не JSON, а текстом или файлом:

const response = await fetch('/api/export.csv')
const csv = await response.text()

Разбор JSON #

response.json() тоже возвращает Promise: тело читается асинхронно.

localStorage и sessionStorage

Mon, 01 Jan 0001 00:00:00 +0000

localStorage и sessionStorage #

Web Storage — два связанных хранилища в браузере: localStorage (данные живут, пока их не удалят) и sessionStorage (данные привязаны к вкладке и сессии). Оба хранят только строки; объекты нужно сериализовать.

Базовые операции #

API одинаков для обоих объектов:

localStorage.setItem('theme', 'dark')
localStorage.getItem('theme') // "dark"
localStorage.removeItem('theme')
localStorage.clear() // осторожно: удаляет всё для origin

Ключи уникальны в пределах origin. Значение 'undefined' и отсутствие ключа — разные вещи: getItem вернёт null, если ключа нет.

Proxy

Mon, 01 Jan 0001 00:00:00 +0000

Proxy #

Proxy оборачивает целевой объект и перенаправляет к нему операции через ловушки (traps) — функции-перехватчики. Приложение работает с proxy так же, как с обычным объектом, но чтение, запись и проверка 'key' in obj можно контролировать централизованно. Типичные сценарии JSFlow: валидация полей корзины, журнал доступа к заказу, запрет мутации после оплаты.

Создание #

const target = { sku: 'KB-01', qty: 1 }
const proxy = new Proxy(target, {})

proxy.sku // "KB-01" — без ловушек поведение как у target

Второй аргумент — объект с ловушками; отсутствующая ловушка делегирует операцию target по умолчанию.

try/catch и Error

Mon, 01 Jan 0001 00:00:00 +0000

try/catch и Error #

Ошибка в JavaScript прерывает нормальный поток выполнения. Конструкция try/catch/finally перехватывает исключение, даёт обработать его и при необходимости гарантировать завершающий код в finally.

try, catch, finally #

function parseQuantity(raw) {
 try {
 const value = Number(raw)
 if (!Number.isInteger(value) || value < 1) {
 throw new Error('Количество должно быть целым числом ≥ 1')
 }
 return value
 } catch (err) {
 console.error('Некорректный ввод:', err.message)
 return 1
 } finally {
 // выполнится всегда — и при успехе, и при throw
 }
}

parseQuantity('3') // 3
parseQuantity('0.5') // 1, в консоли сообщение об ошибке

try — блок, где ошибка может возникнуть.
catch (err) — обработчик; err обычно экземпляр Error или его подкласса.
finally — код, который выполняется после try/catch независимо от исхода (кроме фатальных сбоев процесса).

return внутри try или catch откладывает выполнение finally до выхода из функции, но finally всё равно отработает перед фактическим возвратом.

Браузерное окружение

Mon, 01 Jan 0001 00:00:00 +0000

Браузерное окружение #

Браузерное окружение — это набор объектов, которые JavaScript получает при выполнении на странице. Глобальный объект window представляет вкладку; document — загруженный HTML-документ. Вместе они образуют точку входа для любого UI-кода в JSFlow: от виджета «Активные сессии» до плеера плейлиста.

window — глобальная область вкладки #

В браузере глобальные переменные и функции становятся свойствами window:

window.JSFlow = { version: '1.0' }

function pingDashboard() {
 console.log('dashboard alive')
}

window.pingDashboard === pingDashboard // true

window также даёт доступ к размерам области просмотра и прокрутке:

Введение в регулярные выражения

Mon, 01 Jan 0001 00:00:00 +0000

Введение в регулярные выражения #

Регулярное выражение (RegExp) — объект, описывающий шаблон поиска в тексте. В JavaScript regex применяют для валидации ввода, извлечения полей из API-ответов и нормализации пользовательских данных. Для простой замены одной подстроки достаточно методов строки; regex оправдан, когда правило повторяется или зависит от структуры текста.

Литерал `/шаблон/флаги` #

Самый частый способ — слэшевый литерал:

const skuPattern = /^[A-Z]{2}-\d{2}-[A-Z0-9]+$/

skuPattern.test('KB-01-XL') // true
skuPattern.test('kb-01') // false

Литерал удобен, когда шаблон известен на этапе написания кода. Обратные слэши внутри литерала экранируют спецсимволы regex (не путать с экранированием в обычных строках).

Замыкания и область видимости

Mon, 01 Jan 0001 00:00:00 +0000

Замыкания и область видимости #

Замыкание — функция, которая «помнит» переменные из внешней области видимости даже после того, как внешняя функция уже завершилась. В JavaScript это обычное поведение: каждая функция создаётся вместе со ссылкой на окружение, в котором она была объявлена.

Лексическая область видимости #

JavaScript ищет переменные снаружи внутрь — от текущего блока к родительским:

const courseTag = 'jsflow'

function describeLesson(title) {
 const prefix = '[урок]'
 return function format() {
 return `${prefix} ${courseTag}: ${title}`
 }
}

const formatIntro = describeLesson('Введение')
formatIntro() // "[урок] jsflow: Введение"

Внутренняя format видит prefix из describeLesson и courseTag из глобальной области. Это и есть лексическая (статическая) видимость: она определяется местом объявления, а не местом вызова.

Итерируемые объекты и протокол итерации

Mon, 01 Jan 0001 00:00:00 +0000

Итерируемые объекты и протокол итерации #

Итерируемый объект (iterable) предоставляет метод [Symbol.iterator](), возвращающий итератор — объект с методом next(), который выдаёт значения { value, done }. Протокол итерации лежит в основе for...of, spread и части API коллекций; понимание его нужно до генераторов и async-итераторов.

Итератор вручную #

Минимальный итератор для трёх кодов статуса доставки:

function createStatusIterator(statuses) {
 let index = 0
 return {
 next() {
 if (index < statuses.length) {
 return { value: statuses[index++], done: false }
 }
 return { value: undefined, done: true }
 },
 }
}

const it = createStatusIterator(['pending', 'shipped', 'delivered'])
it.next() // { value: 'pending', done: false }
it.next() // { value: 'shipped', done: false }
it.next() // { value: 'delivered', done: false }
it.next() // { value: undefined, done: true }

Когда done: true, value обычно undefined и дальнейшие вызовы next() не обязаны менять состояние.

Модель событий

Mon, 01 Jan 0001 00:00:00 +0000

Модель событий #

Событие — сигнал браузера о действии пользователя или изменении среды (клик, ввод, загрузка, изменение размера). Подписка через addEventListener связывает DOM-узел с функцией-обработчиком. Это базовый механизм кнопок плеера, переключателей виджетов и любых интерактивных элементов JSFlow.

addEventListener #

const playBtn = document.querySelector('.player__play')

function onPlayClick(event) {
 console.log('воспроизведение', event.type)
}

playBtn.addEventListener('click', onPlayClick)

Третий аргумент — опции или boolean useCapture:

document.querySelector('.modal').addEventListener(
 'keydown',
 (event) => {
 if (event.key === 'Escape') closeModal()
 },
 { once: true } // снять после первого срабатывания
)

Полезные опции:

Модули: введение

Mon, 01 Jan 0001 00:00:00 +0000

Модули: введение #

Модуль — отдельный файл JavaScript со своей областью видимости. Другие файлы подключают его через import и получают только то, что модуль явно экспортировал. Так код делят на независимые части без глобальных конфликтов имён.

Зачем модули #

Без модулей	С модулями
Всё в глобальной области `window`	Переменные по умолчанию локальны для файла
Порядок `<script>` критичен	Зависимости описаны в `import`
Сложно переиспользовать в проекте	Файл = единица публикации API
Риск коллизий `utils`, `config`	Имена экспорта контролируются явно

// cart.js — только экспорт виден снаружи
const taxRate = 0.2

export function lineTotal(price, qty) {
 return price * qty * (1 + taxRate)
}

taxRate снаружи cart.js недоступен — не засоряет глобальную область.

Объекты: основы

Mon, 01 Jan 0001 00:00:00 +0000

Объекты: основы #

Объект в JavaScript — составное значение: набор пар «ключ — значение», где ключ — строка или Symbol, а значение — любой тип данных. Объекты описывают сущности предметной области: корзину покупок, профиль пользователя, элемент плейлиста или тело HTTP-запроса.

Литерал объекта #

Самый частый способ создать объект — литерал в фигурных скобках:

const cart = {
 id: 'cart-7a2',
 currency: 'RUB',
 items: [],
 updatedAt: null,
}

Ключи без кавычек — это идентификаторы; значения разделяются запятыми. Последняя запятая после последнего свойства допустима (trailing comma).

Переменные и типы данных

Mon, 01 Jan 0001 00:00:00 +0000

Переменные и типы данных в JavaScript #

Переменная — именованная привязка к значению: через имя можно читать данные и записывать новые (если объявление это допускает). В JavaScript у каждого значения есть тип; сама переменная не «закрепляет» тип навсегда — в let можно положить другое значение позже.

Как объявить переменную #

Современный JavaScript поддерживает три способа объявления:

let cartTotal = 0
const playlistId = 'focus-tracks'
var legacyCounter = 1 // устаревший способ

var — устаревший, может быть переобъявлен в той же области видимости.
let и const — блочные привязки: область видимости ограничена блоком { ... }.
let допускает повторное присваивание, const — нет (но мутабельные объекты и массивы можно изменять по содержимому).

Прототипное наследование

Mon, 01 Jan 0001 00:00:00 +0000

Прототипное наследование #

Прототип — скрытая ссылка, по которой движок ищет свойства и методы, если их нет на самом объекте. Наследование в JavaScript прототипное: объекты делегируют доступ к другому объекту-прототипу, а не копируют поля класса как в классических ООП-языках.

[[Prototype]] и поиск свойств #

У каждого объекта есть внутренняя ссылка [[Prototype]] (в консоли часто видна как __proto__, но в коде так не пишут):

const lesson = {
 title: 'Прототипы',
 level: 'middle',
}

lesson.toString() // "[object Object]"

Метода toString на lesson нет — движок поднимается по цепочке к Object.prototype и находит его там.

Числа и Math в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Числа и Math в JavaScript #

Число в JavaScript — значение типа number: целые, дробные, NaN и бесконечности хранятся в одном типе по стандарту IEEE 754 (64-битное с плавающей точкой). Для цен, скидок, ETA доставки и игровых очков этого достаточно; для очень больших целых есть отдельный тип bigint.

Литералы и базовые операции #

const itemPrice = 490
const quantity = 3
const lineTotal = itemPrice * quantity // 1470

const discountRate = 0.15
const discounted = lineTotal * (1 - discountRate) // 1249.5

const hexColor = 0xff6600 // 16737792 — шестнадцатеричная запись
const binaryFlag = 0b1010 // 10

Деление всегда даёт число с плавающей точкой:

CORS и ошибки запросов

Mon, 01 Jan 0001 00:00:00 +0000

CORS и ошибки запросов #

CORS (Cross-Origin Resource Sharing) — механизм браузера, который ограничивает чтение ответов на запросы к другому origin (другой домен, порт или протокол). JavaScript на https://shop.example не может свободно читать ответ от https://api.other.com, пока сервер явно не разрешит это заголовками.

Origin и «тот же сайт» #

Origin = протокол + хост + порт:

URL страницы	URL API	Кросс-домен?
`https://jsflow.dev/app`	`https://jsflow.dev/api`	Нет
`https://jsflow.dev/app`	`http://jsflow.dev/api`	Да (протокол)
`https://jsflow.dev/app`	`https://api.jsflow.dev`	Да (хост)

// same-origin — CORS не мешает читать ответ
const home = await fetch('/api/config')
const config = await home.json()

Запрос уходит на другой origin, но если сервер не прислал разрешающие заголовки, скрипт не увидит тело ответа — в консоли типичная ошибка про CORS policy.

DOM-дерево и навигация

Mon, 01 Jan 0001 00:00:00 +0000

DOM-дерево и навигация #

DOM-дерево — иерархическое представление HTML-документа, где каждый тег, текст и комментарий становится узлом (node). JavaScript может перемещаться по связям «родитель — потомок — сосед» и так находить нужные части интерфейса без повторного поиска по всей странице.

Типы узлов #

Основные типы, с которыми работает UI-код:

Тип	Константа	Пример
Элемент	`Node.ELEMENT_NODE` (1)	`<section class="widget">`
Текст	`Node.TEXT_NODE` (3)	`"3 трека в очереди"`
Комментарий	`Node.COMMENT_NODE` (8)	`<!-- skeleton -->`
Документ	`Node.DOCUMENT_NODE` (9)	`#document`

const trackTitle = document.querySelector('.track-title')
trackTitle.nodeType // 1
trackTitle.nodeName // "H3"
trackTitle.textContent // текст внутри, включая вложенные элементы

Родители и предки #

Подняться от элемента к контейнеру:

export и import

Mon, 01 Jan 0001 00:00:00 +0000

export и import #

export публикует привязки (переменные, функции, классы) из модуля. import подключает их в другой файл. Связь статическая: анализатор знает зависимости до выполнения кода.

Именованный экспорт #

Несколько сущностей из одного файла — каждая со своим именем:

// pricing.js
export const currency = 'RUB'

export function formatMoney(amount) {
 return `${amount.toFixed(2)} ${currency}`
}

export class PriceError extends Error {
 constructor(message) {
 super(message)
 this.name = 'PriceError'
 }
}

Импорт с теми же именами или с переименованием:

import { currency, formatMoney } from './pricing.js'
import { formatMoney as fmt } from './pricing.js'

fmt(1990) // "1990.00 RUB"

Фигурные скобки обязательны для именованного импорта — это не деструктуризация объекта, а статический список привязок модуля.

Reflect

Mon, 01 Jan 0001 00:00:00 +0000

Reflect #

Reflect — встроенный объект с методами, дублирующими низкоуровневые операции над объектами: доступ к свойствам, присваивание, in, дескрипторы, прототип. Методы возвращают предсказуемые результаты (boolean или значение) вместо смешения return/throw у старых API. В ловушках Proxy Reflect — стандартный способ передать вызов target.

Зачем Reflect, если есть операторы #

Операция	Оператор / старый API	Reflect
Чтение	`obj[key]`	`Reflect.get(obj, key, receiver)`
Запись	`obj[key] = v`	`Reflect.set(obj, key, v, receiver)`
`in`	`key in obj`	`Reflect.has(obj, key)`
Удаление	`delete obj[key]`	`Reflect.deleteProperty(obj, key)`
Ключи	`Object.keys` (отдельно)	`Reflect.ownKeys(obj)`

Преимущества в метапрограммировании:

Rest и spread

Mon, 01 Jan 0001 00:00:00 +0000

Rest и spread #

Rest (...) собирает оставшиеся элементы в массив; spread разворачивает итерируемое значение в отдельные элементы. Один и тот же синтаксис ..., но роль зависит от позиции: в объявлении параметров — rest, в выражении — spread.

Rest-параметры #

Rest заменяет устаревший arguments и всегда даёт настоящий массив:

function logTags(primary, ...extra) {
 console.log('главный:', primary)
 console.log('остальные:', extra)
}

logTags('javascript', 'замыкания', 'async', 'dom')
// главный: javascript
// остальные: ['замыкания', 'async', 'dom']

Правила:

rest-параметр только один и только последний в списке;
до него можно ставить обычные параметры и значения по умолчанию.

function buildSearchUrl(base, page = 1, ...filters) {
 const query = filters.map(encodeURIComponent).join(',')
 return query ? `${base}?page=${page}&q=${query}` : `${base}?page=${page}`
}

buildSearchUrl('/docs', 2, 'функции', 'замыкания')
// "/docs?page=2&q=%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B8,%D0%B7%D0%B0%D0%BC%D1%8B%D0%BA%D0%B0%D0%BD%D0%B8%D1%8F"

Spread в массивах #

Разворачивает элементы при создании массива, передаче аргументов или конкатенации:

Shadow DOM

Mon, 01 Jan 0001 00:00:00 +0000

Shadow DOM #

Shadow DOM — отдельное поддерево узлов, прикреплённое к хост-элементу через attachShadow. Стили и разметка внутри shadow root не смешиваются с остальной страницей: глобальный CSS не протекает внутрь, а внутренние селекторы не «выстреливают» наружу. Это основа инкапсуляции в Custom Elements.

attachShadow #

class DashboardTile extends HTMLElement {
 connectedCallback() {
 const shadow = this.attachShadow({ mode: 'open' })

 shadow.innerHTML = `
 <style>
 :host {
 display: block;
 border-radius: 8px;
 padding: 12px;
 background: var(--tile-bg, #1a1a2e);
 }
 h2 { margin: 0 0 8px; font-size: 1rem; }
 .metric { font-size: 1.5rem; font-weight: 600; }
 </style>
 <h2><slot name="title">Виджет</slot></h2>
 <p class="metric"><slot name="value">—</slot></p>
 `
 }
}

customElements.define('dashboard-tile', DashboardTile)

<dashboard-tile>
 <span slot="title">Активные заказы</span>
 <span slot="value">128</span>
</dashboard-tile>

mode: 'open' даёт доступ к shadow root через element.shadowRoot. В closed снаружи root не виден — только для жёсткой инкапсуляции; отладка сложнее.

Всплытие и делегирование

Mon, 01 Jan 0001 00:00:00 +0000

Всплытие и делегирование #

Всплытие (bubbling) — распространение события от целевого элемента вверх по DOM к document. Делегирование — один обработчик на родителе вместо сотен на строках списка. Для динамического плейлиста и таблицы заказов JSFlow это основной паттерн производительности и простоты.

Три фазы #

Capture — от window к цели (если capture: true).
Target — на элементе, где произошло действие.
Bubble — от цели вверх к document.

document.querySelector('.dashboard').addEventListener(
 'click',
 () => console.log('capture: dashboard'),
 true
)

document.querySelector('.widget').addEventListener('click', () => {
 console.log('bubble: widget')
})

Клик по кнопке внутри виджета: сначала capture на предках, затем target, затем bubble. Большинство UI-сценариев слушают фазу bubble (значение по умолчанию).

Где выполняется JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Где выполняется JavaScript #

JavaScript выполняется в среде (runtime), которая предоставляет движок языка и набор встроенных API. Один и тот же синтаксис ES работает в разных местах, но доступные объекты — window, document, fs, fetch — зависят от среды, а не от самого языка.

Браузер #

В браузере JavaScript управляет страницей: реагирует на клики, меняет DOM, отправляет запросы, хранит данные в localStorage.

const button = document.querySelector('#notify')
button.addEventListener('click', () => {
 button.textContent = 'Отправлено'
})

Браузерная среда включает:

Генераторы

Mon, 01 Jan 0001 00:00:00 +0000

Генераторы #

Генератор — особая разновидность итератора: функция function* при вызове возвращает объект-генератор с методами next, return и throw. Ключевое слово yield приостанавливает выполнение и отдаёт значение наружу. Генераторы удобны для ленивых потоков данных — постраничная загрузка товаров, обход вложенных категорий, пошаговая сборка чекаута.

Объявление и первый `next()` #

function* orderIdSequence(prefix) {
 let n = 1
 while (true) {
 yield `${prefix}-${String(n).padStart(4, '0')}`
 n++
 }
}

const ids = orderIdSequence('ord')
ids.next() // { value: 'ord-0001', done: false }
ids.next() // { value: 'ord-0002', done: false }

Тело генератора не выполняется при вызове orderIdSequence('ord') — только при первом next().

Классы: базовый синтаксис

Mon, 01 Jan 0001 00:00:00 +0000

Классы: базовый синтаксис #

class — объявление «типа» объекта с конструктором и методами. Синтаксис похож на классы в других языках, но в JavaScript это обёртка над прототипами: методы попадают на prototype, наследование строится через цепочку прототипов.

Объявление класса #

class Lesson {
 constructor(title, durationMin) {
 this.title = title
 this.durationMin = durationMin
 this.done = false
 }

 complete() {
 this.done = true
 return this
 }

 summary() {
 const status = this.done ? 'пройден' : 'в процессе'
 return `${this.title} (${this.durationMin} мин) — ${status}`
 }
}

const lesson = new Lesson('Замыкания', 25)
lesson.complete().summary()
// "Замыкания (25 мин) — пройден"

new обязателен — вызов Lesson() без new в классах выбросит ошибку.

Колбэки

Mon, 01 Jan 0001 00:00:00 +0000

Колбэки #

Колбэк (callback) — функция, которую передают другой функции, чтобы та вызвала её позже: после события, таймера или ответа сети. До появления промисов колбэки были основным способом описывать асинхронность в JavaScript.

Синхронный и асинхронный колбэк #

Синхронный колбэк выполняется сразу внутри вызывающего кода:

const playlist = ['Neon Drive', 'Static Bloom', 'Low Tide']

playlist.forEach((track, index) => {
 console.log(`${index + 1}. ${track}`)
})

Асинхронный колбэк откладывается — типичный пример setTimeout:

function showToast(message, onHidden) {
 console.log(message)
 setTimeout(() => {
 onHidden?.()
 }, 2000)
}

showToast('Трек добавлен в плейлист', () => {
 console.log('Тост скрыт')
})

Вызывающий код не ждёт завершения колбэка: выполнение идёт дальше, а результат приходит позже.

Копирование и ссылки

Mon, 01 Jan 0001 00:00:00 +0000

Копирование и ссылки #

Присваивание объекта не клонирует данные — обе переменные указывают на один экземпляр в памяти. Чтобы изменить копию, не затрагивая оригинал, нужно явное копирование: поверхностное для плоских структур или глубокое для вложенных объектов и массивов.

Ссылка и мутация #

const cartA = { id: 'cart-7a2', total: 1490 }
const cartB = cartA

cartB.total = 0
cartA.total // 0 — изменился тот же объект

Сравнение объектов через === проверяет идентичность ссылки, а не равенство содержимого:

const left = { sku: 'kb-01' }
const right = { sku: 'kb-01' }

left === right // false — разные объекты
left === left // true

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

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

Куки обзор

Mon, 01 Jan 0001 00:00:00 +0000

Куки обзор #

Cookie (куки) — небольшие пары «имя=значение», которые браузер прикрепляет к запросам на тот же сайт. Сервер выставляет их заголовком Set-Cookie; JavaScript может читать и записывать часть кук через document.cookie, но с важными ограничениями.

Сервер отвечает, например:

Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Lax

Браузер сохраняет cookie и отправляет её обратно:

Cookie: sessionId=abc123

Так поддерживают сессии входа, корзины на сервере, A/B-тесты и аналитику — в зависимости от настроек.

Символьные классы и квантификаторы

Mon, 01 Jan 0001 00:00:00 +0000

Символьные классы и квантификаторы #

Символьный класс в regex задаёт множество допустимых символов в одной позиции; квантификатор указывает, сколько раз элемент может повторяться. Вместе они описывают форматы SKU, телефонов, почтовых индексов и полей чекаута без перечисления каждого варианта вручную.

Один символ: `.` и экранирование #

Точка . совпадает с любым символом, кроме перевода строки (без флага s):

'KB-01'.match(/K./) // ['K-']

Спецсимволы regex экранируют обратным слэшем: \. \* \+ \? \^ \$ \|  \[ \] \{ \}

Строки в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Строки в JavaScript #

Строка — последовательность символов Unicode в типе string. В JS строки неизменяемы: любой «изменяющий» метод возвращает новую строку. Имена товаров, slug плейлиста, адрес доставки и сообщения чекаута почти всегда проходят через строковые операции.

Литералы и экранирование #

const productName = 'Клавиатура MX'
const playlistTitle = "Focus — Deep Work"
const legalNote = 'Строка с \'кавычками\' внутри'

const multiline = `Строка
на нескольких
строках`

Обратный слэш экранирует спецсимволы:

const path = 'C:\\projects\\jsflow'
const tabbed = 'колонка1\tколонка2'
const newline = 'первая\nвторая'

Шаблонные строки (template literals) #

Обратные кавычки позволяют вставлять выражения через ${...}:

Структура кода и строгий режим

Mon, 01 Jan 0001 00:00:00 +0000

Структура кода и строгий режим в JavaScript #

Программа на JavaScript состоит из инструкций (statements), которые движок выполняет сверху вниз. Понятная структура кода снижает число скрытых ошибок; режим "use strict" отключает опасные устаревшие послабления языка.

Инструкции и блоки #

Инструкция — законченное действие: объявление, присваивание, вызов, условие, цикл.

const queueSize = 3
const label = 'intake'

console.log(label, queueSize)

Блок { ... } группирует инструкции. У let / const внутри блока своя область видимости:

{
 const step = 'validate'
 // step виден только здесь
}

// console.log(step) // ReferenceError

Блоки используют в if, циклах, try/catch и просто для ограничения области переменных.

IndexedDB

Mon, 01 Jan 0001 00:00:00 +0000

IndexedDB #

IndexedDB — встроенная в браузер объектная база данных для структурированных записей, файлов и больших массивов. В отличие от localStorage, API асинхронный, лимиты выше, а данные индексируются по ключам. Подходит для офлайн-черновиков, кэша плейлистов и очереди синхронизации — когда Web Storage уже тесен.

Открытие базы #

Работа идёт через indexedDB.open. Имя и версия задают схему; при повышении версии срабатывает upgradeneeded:

const request = indexedDB.open('jsflow-app', 1)

request.onupgradeneeded = (event) => {
 const db = event.target.result
 if (!db.objectStoreNames.contains('tracks')) {
 db.createObjectStore('tracks', { keyPath: 'id' })
 }
}

request.onsuccess = (event) => {
 const db = event.target.result
 console.log('База готова', db.name, db.version)
}

request.onerror = () => {
 console.error('Не удалось открыть IndexedDB')
}

В upgradeneeded создают object store (аналог таблицы) и индексы. Вне этой фазы схему менять нельзя — только bump версии.

setTimeout и setInterval

Mon, 01 Jan 0001 00:00:00 +0000

setTimeout и setInterval #

setTimeout откладывает однократный вызов функции; setInterval повторяет её через заданный интервал. Оба планируют колбэк в очереди задач браузера или Node.js — код после вызова таймера выполняется сразу, не дожидаясь колбэка.

setTimeout #

Синтаксис: setTimeout(callback, delayMs, ...args). Возвращает числовой id для отмены:

function showHint(message) {
 console.log(message)
}

const timerId = setTimeout(showHint, 1500, 'Продолжайте урок — вы на верном пути')

// отмена до срабатывания
clearTimeout(timerId)

delay — минимальная задержка, не гарантия точного времени: при загруженной вкладке или длинной синхронной задаче колбэк сработает позже.

template и slots

Mon, 01 Jan 0001 00:00:00 +0000

template и slots #

<template> хранит фрагмент HTML без отображения на странице; slot — место в Shadow DOM, куда проецируется контент из light DOM родителя. Вместе они дают декларативный каркас веб-компонента: один шаблон — много экземпляров с разным наполнением.

Элемент template #

Содержимое <template> лежит в DocumentFragment и не рендерится, пока вы его не клонируете:

<template id="order-row-template">
 <tr>
 <td class="id"></td>
 <td class="status"></td>
 <td class="total"></td>
 </tr>
</template>

const tpl = document.getElementById('order-row-template')

function appendOrderRow(tableBody, order) {
 const row = tpl.content.cloneNode(true)
 row.querySelector('.id').textContent = order.id
 row.querySelector('.status').textContent = order.status
 row.querySelector('.total').textContent = `${order.total} ₽`
 tableBody.append(row)
}

cloneNode(true) копирует всё дерево; исходный template остаётся нетронутым — удобно для списков заказов и строк плейлиста.

WebSocket

Mon, 01 Jan 0001 00:00:00 +0000

WebSocket #

WebSocket — протокол поверх TCP, который держит постоянное двустороннее соединение между браузером и сервером. В отличие от Fetch, сервер может сам отправить данные клиенту без нового HTTP-запроса — удобно для чатов, живых дашбордов и уведомлений о статусе заказа.

Создание соединения #

Клиентский API — глобальный конструктор WebSocket. URL начинается с ws:// или wss:// (защищённый вариант, аналог HTTPS):

const socket = new WebSocket('wss://jsflow.dev/ws/playlist')

socket.addEventListener('open', () => {
 console.log('Канал открыт')
})

socket.addEventListener('message', (event) => {
 const payload = JSON.parse(event.data)
 console.log('Новый трек:', payload.title)
})

После успешного handshake соединение остаётся открытым, пока одна из сторон не закроет его или не оборвётся сеть.

Асинхронные итераторы

Mon, 01 Jan 0001 00:00:00 +0000

Асинхронные итераторы #

Асинхронный итератор реализует [Symbol.asyncIterator]() и возвращает объект, у которого next() отдаёт Promise на { value, done }. Цикл for await...of и async-генераторы async function* — основной способ последовательно обрабатывать данные из промисов и fetch без ручной цепочки then.

`for await...of` #

Перебирает async iterable — каждый шаг ждёт разрешения Promise:

async function loadOrderStatuses(ids) {
 const results = []
 for (const id of ids) {
 const res = await fetch(`/api/orders/${id}`)
 results.push(await res.json())
 }
 return results
}

Когда источник уже async iterable:

Группы, альтернация и lookahead

Mon, 01 Jan 0001 00:00:00 +0000

Группы, альтернация и lookahead #

Группы в regex изолируют фрагмент шаблона и сохраняют совпавший текст для последующего использования. Альтернация | выбирает один из вариантов; lookahead и lookbehind проверяют контекст без включения его в результат совпадения. Эти приёмы нужны при разборе статусов заказа, составных адресов и метаданных плейлиста.

Захватывающие группы `(...)` #

Скобки группируют часть шаблона и нумеруют захваты слева направо:

const line = 'ord-2026-7f3a | delivered'
const re = /^(ord-\d{4}-[a-f0-9]{4})\s*\|\s*(\w+)$/

const m = line.match(re)
m[0] // полное совпадение
m[1] // "ord-2026-7f3a"
m[2] // "delivered"

В replace группы доступны как $1, $2 или через функцию:

Динамический import()

Mon, 01 Jan 0001 00:00:00 +0000

Динамический import() #

import() — функция, возвращающая промис с модулем. В отличие от статического import, её можно вызывать в runtime: по условию, по событию, после задержки. Это основа ленивой загрузки и разбиения бандла на чанки.

Синтаксис и результат #

const spec = './admin/reports.js'

import(spec).then((module) => {
 module.renderSalesChart()
})

Выражение в скобках — строка с URL модуля (часто переменная). Результат — промис, который fulfilled с namespace object модуля:

именованные экспорты — свойства объекта (module.formatMoney);
default — module.default.

import('./playlist-editor.js').then((mod) => {
 const Editor = mod.default
 const { MAX_TRACKS } = mod
 new Editor({ limit: MAX_TRACKS })
})

С await:

Массивы в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Массивы в JavaScript #

Массив — упорядоченная коллекция значений с числовыми индексами от нуля. В JavaScript массив — особый вид объекта: длина length, методы вроде push и возможность хранить элементы любых типов в одном списке. Корзина, треклист и таблица очков естественно моделируются массивом.

Создание массива #

const cart = []
const playlist = ['Night Drive', 'Soft Code', 'Buffer']
const scores = new Array(3) // [empty × 3] — редко нужно на практике

const fromString = Array.from('abc') // ["a", "b", "c"]
const filled = Array.from({ length: 3 }, (_, i) => i + 1) // [1, 2, 3]

Литерал [] — самый читаемый способ.

Методы и this

Mon, 01 Jan 0001 00:00:00 +0000

Методы и this #

Метод — свойство объекта, значением которого служит функция. При вызове через точку или скобки this внутри метода указывает на объект, через который произошёл вызов. Понимание this критично для методов корзины, плейлиста и любых объектов с поведением, а не только с данными.

Метод в литерале объекта #

const cart = {
 id: 'cart-7a2',
 currency: 'RUB',
 items: [],

 addItem(product, qty = 1) {
 this.items.push({ sku: product.sku, qty, price: product.price })
 return this
 },

 itemCount() {
 return this.items.reduce((sum, line) => sum + line.qty, 0)
 },
}

cart.addItem({ sku: 'kb-01', price: 1490 }, 2)
cart.itemCount() // 2

Сокращённая запись addItem() { } эквивалентна addItem: function() { } — для методов это предпочтительный синтаксис.

Мышь, клавиатура, pointer

Mon, 01 Jan 0001 00:00:00 +0000

Мышь, клавиатура, pointer #

События ввода переводят действия пользователя в вызовы JavaScript. Мышь и pointer покрывают указатель и тач; клавиатура — фокус и shortcuts. В JSFlow они управляют плеером, перетаскиванием виджетов дашборда и навигацией по checkout без лишних кликов.

Мышь: основные типы #

Событие	Когда срабатывает
`click`	полный цикл нажатия и отпускания на том же элементе
`dblclick`	двойной клик
`mousedown` / `mouseup`	нажатие / отпускание кнопки
`mousemove`	движение с зажатой или без кнопки
`mouseenter` / `mouseleave`	курсор вошёл / вышел из элемента (не всплывают)
`contextmenu`	правый клик

const volumeSlider = document.querySelector('.player__volume')

volumeSlider.addEventListener('click', (event) => {
 const rect = volumeSlider.getBoundingClientRect()
 const ratio = (event.clientX - rect.left) / rect.width
 setVolume(Math.min(1, Math.max(0, ratio)))
})

clientX / clientY — координаты относительно viewport; pageX / pageY учитывают прокрутку документа.

Наследование классов

Mon, 01 Jan 0001 00:00:00 +0000

Наследование классов #

extends связывает дочерний класс с родительским: экземпляры подкласса получают методы базового класса и могут переопределять их. super вызывает реализацию родителя — в constructor обязательно до использования this.

Базовый extends #

class ContentUnit {
 constructor(title) {
 this.title = title
 this.createdAt = Date.now()
 }

 label() {
 return this.title
 }
}

class VideoLesson extends ContentUnit {
 constructor(title, durationSec) {
 super(title)
 this.durationSec = durationSec
 }

 label() {
 return `${super.label()} (${this.durationSec} с)`
 }
}

const clip = new VideoLesson('Event loop', 480)
clip.label() // "Event loop (480 с)"
clip instanceof ContentUnit // true
clip instanceof VideoLesson // true

VideoLesson.prototype наследует от ContentUnit.prototype — та же прототипная модель, что и без class.

Операторы в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Операторы в JavaScript #

Оператор комбинирует значения (операнды) и даёт новый результат или меняет переменную. Ниже — базовый набор, достаточный для условий, циклов и повседневных вычислений.

Арифметика и присваивание #

const base = 1200
const fee = 90

const gross = base + fee // 1290
const net = gross - 200 // 1090
const parts = net / 2 // 545
const rem = 17 % 5 // 2
const squared = 3 ** 2 // 9

Сокращённое присваивание обновляет ту же переменную:

let stock = 40
stock += 5 // 45
stock *= 2 // 90
stock--" // 89, затем выражение даёт 89 (постфикс)

Инкремент ++ / декремент -- меняют число на месте. В сложных выражениях поведение префикса и постфикса различается — в учебном коде чаще пишите stock += 1.

Поиск элементов

Mon, 01 Jan 0001 00:00:00 +0000

Поиск элементов #

Поиск в DOM — первый шаг почти любого браузерного модуля: скрипт получает ссылку на узел и дальше читает данные или вешает обработчики. Современный код опирается на CSS-селекторы через querySelector и querySelectorAll; getElementById остаётся самым быстрым способом для уникальных якорей.

getElementById #

Ищет элемент по значению атрибута id. ID должен быть уникален в документе:

const checkoutForm = document.getElementById('checkout-form')
const playlistRoot = document.getElementById('playlist-root')

Эквивалент через селектор (кавычки в ID экранируйте при необходимости):

Промисы: основы

Mon, 01 Jan 0001 00:00:00 +0000

Промисы: основы #

Промис (Promise) — объект, представляющий результат асинхронной операции, который может быть доступен сейчас, позже или никогда. Вместо вложенных колбэков вы получаете значение (или ошибку) через методы .then, .catch и .finally.

Три состояния #

Состояние	Значение
`pending`	операция ещё не завершена
`fulfilled`	успех, есть результат
`rejected`	сбой, есть причина (обычно `Error`)

Переход из pending однократный: либо fulfilled, либо rejected, без возврата назад.

const pending = new Promise(() => {})
// pending остаётся pending, пока не вызовут resolve/reject

new Promise #

Низкоуровневое создание — функция-исполнитель с resolve и reject:

Спецификация и справочники

Mon, 01 Jan 0001 00:00:00 +0000

Спецификация и справочники #

ECMAScript — официальный стандарт языка JavaScript: синтаксис, типы, встроенные объекты (Array, Promise, Map). Всё остальное — DOM, fetch, localStorage — описывают отдельные спецификации Web-платформы и документация сред выполнения.

ECMAScript и TC39 #

Стандарт развивает комитет TC39 (Ecma International). Версии с ES2015 выходят ежегодно: ES2020, ES2024 и т.д. Номер «ES6» и «ES2015» — одно и то же обновление.

Спецификация ECMA-262 написана для implementers: формулировки точные, но сухие. Пример из практики — проверить, как именно работает Array.prototype.sort:

call, apply, bind

Mon, 01 Jan 0001 00:00:00 +0000

call, apply, bind #

call, apply и bind — методы функций для явного выбора значения this и управления аргументами. Они не меняют определение функции, а задают контекст на момент вызова или возвращают новую функцию с «приклеенным» this.

Зачем это нужно #

this в обычной функции зависит от способа вызова, а не от места объявления:

const counter = {
 value: 0,
 increment() {
 this.value += 1
 return this.value
 },
}

const fn = counter.increment
fn() // NaN или ошибка в strict — this не counter

Передача метода как колбэка «отрывает» объект от this. call/apply/bind возвращают контроль.

Server-Sent Events (EventSource)

Mon, 01 Jan 0001 00:00:00 +0000

Server-Sent Events (EventSource) #

Server-Sent Events (SSE) — способ получать от сервера поток текстовых событий по одному HTTP-соединению. Клиентский API — класс EventSource: браузер сам переподключается и парсит формат text/event-stream. Подходит для ленты активности, счётчиков на дашборде и статусов сборки — когда клиенту нужно только слушать, без частых ответов серверу.

Базовое подключение #

const feed = new EventSource('/api/dashboard/activity')

feed.onmessage = (event) => {
 const row = JSON.parse(event.data)
 appendActivityRow(row.user, row.action)
}

feed.onerror = () => {
 console.warn('Поток активности прерван, EventSource переподключится')
}

Первый аргумент — URL (обычно same-origin). В отличие от fetch, соединение остаётся открытым: сервер периодически дописывает строки в тело ответа.

static и private #

Mon, 01 Jan 0001 00:00:00 +0000

static и private #

Статические члены принадлежат самому классу, а не экземпляру. Приватные поля и методы с префиксом # доступны только внутри тела класса — движок запрещает обращение снаружи.

static методы #

Вызываются на классе, не на экземпляре:

class Lesson {
 constructor(title, slug) {
 this.title = title
 this.slug = slug
 }

 static fromSlug(slug) {
 const title = slug.replace(/-/g, ' ')
 return new Lesson(title, slug)
 }

 static isValidSlug(slug) {
 return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug)
 }
}

Lesson.isValidSlug('event-loop') // true
const lesson = Lesson.fromSlug('event-loop')
lesson.title // "event loop"

Фабрики, валидация и утилиты без состояния экземпляра — типичные кейсы для static.

Конструкторы и new

Mon, 01 Jan 0001 00:00:00 +0000

Конструкторы и new #

Конструктор — функция, вызываемая с new, которая создаёт и инициализирует новый объект. Внутри такой функции this ссылается на свежий экземпляр. Паттерн предшествует синтаксису class и по-прежнему встречается в legacy-коде и встроенных типах (Date, Map, Error).

Вызов с new #

function Cart(id, currency = 'RUB') {
 this.id = id
 this.currency = currency
 this.items = []
 this.updatedAt = null
}

const cart = new Cart('cart-7a2')
cart.id // "cart-7a2"
cart.items // []

Оператор new выполняет примерно следующее:

Создаёт пустой объект и связывает его с prototype функции-конструктора.
Вызывает функцию с this, указывающим на этот объект.
Если функция не вернула собственный объект, возвращает созданный экземпляр.

Без new обычный вызов конструктора в strict mode бросит ошибку или испортит глобальные привязки — всегда используйте new с функциями-конструкторами.

Методы RegExp и String

Mon, 01 Jan 0001 00:00:00 +0000

Методы RegExp и String #

Методы RegExp (test, exec) и методы String с аргументом regex (match, matchAll, replace, split) — основной API поиска и преобразования текста. Выбор метода зависит от того, нужна ли только проверка, первое совпадение, все совпадения или замена с группами.

`RegExp.prototype.test(str)` #

Возвращает boolean — есть ли совпадение. С флагом g или y обновляет lastIndex:

const ORDER = /^ord-\d{4}-[a-f0-9]{4}$/

ORDER.test('ord-2026-7f3a') // true
ORDER.test('invalid') // false

Для глобального regex повторные вызовы продолжают с lastIndex:

Методы массивов в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Методы массивов в JavaScript #

Методы массивов — встроенные функции для перебора, преобразования и агрегации без ручных циклов с индексами. map, filter и reduce — основа обработки корзины, рейтингов и плейлистов в современном JS; важно понимать, какие методы мутируют исходный массив, а какие возвращают новый.

forEach: побочные эффекты #

forEach ничего не возвращает (undefined); подходит для логирования или вызова API:

const cart = [
 { sku: 'kb-01', qty: 1 },
 { sku: 'ms-02', qty: 3 },
]

cart.forEach((line) => {
 console.log(line.sku, line.qty)
})

Если нужен новый массив — map, не forEach с push.

Преобразование типов в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Преобразование типов в JavaScript #

JavaScript часто приводит значения от одного типа к другому: явно (вы вызвали Number(...)) или неявно (оператор сам решил, что делать). Контролируемое явное преобразование делает поведение предсказуемым для SEO-понятных API и для генеративных подсказок, где важна однозначность.

Три целевых типа #

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

В строку #

String(42) // "42"
String(true) // "true"
String(null) // "null"
String(undefined) // "undefined"

const id = 904
const url = '/items/' + id // "/items/904" — конкатенация через +

Шаблонные строки тоже приводят вложенные выражения к строке:

Свойства и атрибуты

Mon, 01 Jan 0001 00:00:00 +0000

Свойства и атрибуты #

Атрибуты — то, что записано в HTML (disabled, data-track-id). Свойства — поля JavaScript-объекта элемента; они могут расходиться с разметкой (например, value у <input>). Для UI JSFlow атрибуты data-* и классы часто хранят состояние, а свойства — отражают интерактивность формы.

Чтение и запись атрибутов #

const emailInput = document.querySelector('#checkout-email')

emailInput.getAttribute('type') // "email"
emailInput.setAttribute('aria-invalid', 'true')
emailInput.removeAttribute('readonly')
emailInput.hasAttribute('required') // true

getAttribute всегда возвращает строку или null. Булевы атрибуты в HTML (disabled, checked) присутствуют как пустая строка или имя атрибута:

Формы и submit

Mon, 01 Jan 0001 00:00:00 +0000

Формы и submit #

Форма группирует поля ввода и отправляет их на сервер через HTTP или обрабатывает локально в JavaScript. Событие submit — точка перехвата оформления заказа: можно проверить данные, показать ошибки и отправить fetch без перезагрузки вкладки.

submit и preventDefault #

const checkoutForm = document.querySelector('#checkout-form')

checkoutForm.addEventListener('submit', async (event) => {
 event.preventDefault()

 if (!checkoutForm.reportValidity()) return

 const payload = new FormData(checkoutForm)
 await placeOrder(payload)
})

Без preventDefault браузер выполнит нативную отправку: страница перезагрузится или уйдёт на action формы.

Цепочки промисов и ошибки

Mon, 01 Jan 0001 00:00:00 +0000

Цепочки промисов и ошибки #

Цепочка промисов — последовательность вызовов .then (и при необходимости .catch / .finally), где каждый шаг получает результат предыдущего. Ошибка в любом звене «скатывается» вниз до ближайшего .catch, если её не обработали.

Линейный сценарий оформления заказа #

function validateCart(cart) {
 if (!cart.items?.length) throw new Error('Пустая корзина')
 return cart
}

function reserveItems(cart) {
 return Promise.resolve({ ...cart, reserved: true })
}

function chargePayment(cart) {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 if (cart.total > 50_000) reject(new Error('Нужно подтверждение банка'))
 else resolve({ ...cart, paid: true })
 }, 200)
 })
}

function sendReceipt(order) {
 return Promise.resolve({ ...order, receiptSent: true })
}

const cart = { items: [{ sku: 'bag-01' }], total: 1200 }

Promise.resolve(cart)
 .then(validateCart)
 .then(reserveItems)
 .then(chargePayment)
 .then(sendReceipt)
 .then((order) => console.log('Готово:', order.receiptSent))
 .catch((err) => console.error('Оформление сорвалось:', err.message))

Каждый .then возвращает новое значение или промис — цепочка остаётся плоской, без вложенности колбэков.

DOMContentLoaded и загрузка

Mon, 01 Jan 0001 00:00:00 +0000

DOMContentLoaded и загрузка #

Жизненный цикл страницы определяет, когда DOM готов к поиску элементов и когда доступны изображения и subresources. Скрипты JSFlow должны инициализировать виджеты после построения дерева, но не обязаны ждать каждую картинку — для этого служат DOMContentLoaded, load и атрибуты defer / async.

DOMContentLoaded #

Срабатывает, когда HTML разобран и DOM построен, до полной загрузки стилей, изображений и iframe:

function bootDashboard() {
 mountWidgets()
 bindGlobalShortcuts()
 hydratePlaylist()
}

if (document.readyState === 'loading') {
 document.addEventListener('DOMContentLoaded', bootDashboard)
} else {
 bootDashboard()
}

Проверка readyState покрывает случай, когда скрипт подключён в конце <body> и DOM уже готов.

instanceof и примеси

Mon, 01 Jan 0001 00:00:00 +0000

instanceof и примеси #

instanceof проверяет, есть ли в цепочке прототипов объекта prototype указанного конструктора (или класса). Примеси (mixins) — способ добавить нескольким классам общее поведение через копирование методов, когда единственное наследование extends не хватает.

Как работает instanceof #

class Lesson {
 constructor(title) {
 this.title = title
 }
}

class VideoLesson extends Lesson {
 constructor(title, sec) {
 super(title)
 this.sec = sec
 }
}

const v = new VideoLesson('Таймеры', 900)

v instanceof VideoLesson // true
v instanceof Lesson // true
v instanceof Object // true
v instanceof Array // false

Выражение obj instanceof C ищет C.prototype в цепочке [[Prototype]] объекта obj.

Map и Set в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Map и Set в JavaScript #

Map и Set — встроенные коллекции ES2015: Map хранит пары ключ–значение с ключами любого типа, Set — только уникальные значения. Они дополняют обычные объекты {} и массивы, когда важны частые добавления/удаления, предсказуемый размер или гарантия уникальности (теги трека, id курьеров, кэш ETA).

Set: уникальные значения #

const tags = new Set(['focus', 'work', 'focus', 'instrumental'])

tags.size // 3
tags.has('work') // true
tags.add('night')
tags.delete('work')

Порядок итерации — порядок вставки.

Преобразование массива в уникальный список:

Promise.all, allSettled, race, any

Mon, 01 Jan 0001 00:00:00 +0000

Promise.all, allSettled, race, any #

У объекта Promise есть статические методы для координации нескольких асинхронных операций. Они принимают итерируемую коллекцию промисов (или значений, оборачиваемых в Promise.resolve) и возвращают один агрегирующий промис.

Promise.all — все или ничего #

Ждёт все входные промисы. При успехе — массив результатов в том же порядке, что и вход (не порядок завершения).

function fetchTrack(id) {
 const catalog = {
 a: { title: 'Aurora Line' },
 b: { title: 'Brick Echo' },
 }
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 const item = catalog[id]
 if (!item) reject(new Error(`Нет трека ${id}`))
 else resolve(item)
 }, id === 'a' ? 100 : 250)
 })
}

Promise.all([fetchTrack('a'), fetchTrack('b')]).then(([first, second]) => {
 console.log(first.title, second.title) // "Aurora Line" "Brick Echo"
})

Первый же reject отклоняет весь Promise.all — остальные результаты теряются для потребителя.

Изменение документа

Mon, 01 Jan 0001 00:00:00 +0000

Изменение документа #

Мутации DOM — создание, вставка, замена и удаление узлов. JavaScript может собирать интерфейс после загрузки данных: строки плейлиста, карточки метрик, шаги оформления заказа. Современные методы append, prepend, remove и replaceWith короче, чем связка appendChild / removeChild.

createElement и текст #

const li = document.createElement('li')
li.className = 'track-row'
li.dataset.trackId = 'tr-901'

const title = document.createElement('span')
title.className = 'track-row__title'
title.textContent = 'Midnight Loop'

li.append(title)

textContent безопаснее innerHTML, если строка приходит из API и может содержать символы <.

Опциональная цепочка ?.

Mon, 01 Jan 0001 00:00:00 +0000

Опциональная цепочка ?. #

Опциональная цепочка (?.) прерывает обращение к свойству, методу или элементу массива, если значение слева — null или undefined. Вместо TypeError выражение даёт undefined. Оператор незаменим при разборе вложенных API payload и частично заполненных профилей пользователя.

Доступ к свойству #

const apiPayload = {
 event: 'cart.viewed',
 data: {
 cart: { id: 'cart-7a2', totals: { subtotal: 1490 } },
 },
}

const discount = apiPayload.data?.cart?.totals?.discount
// undefined — discount в payload нет, ошибки нет

Без ?. цепочка apiPayload.data.cart.totals.discount упала бы, если бы отсутствовал любой промежуточный уровень.

Условное ветвление в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Условное ветвление в JavaScript #

Ветвление выбирает один из путей выполнения в зависимости от условия. В JavaScript для этого используют if / else, тернарный оператор ? : и switch.

if, else if, else #

function deliveryLabel(distanceKm) {
 if (distanceKm <= 3) {
 return 'пеший курьер'
 } else if (distanceKm <= 15) {
 return 'велокурьер'
 } else {
 return 'авто'
 }
}

deliveryLabel(8) // "велокурьер"

Условие приводится к boolean по правилам truthy/falsy. Для явных сравнений пишите ===, >, <= и т.д.

async/await

Mon, 01 Jan 0001 00:00:00 +0000

async/await #

async/await — синтаксис для работы с промисами: async-функция всегда возвращает промис, а await приостанавливает выполнение функции до разрешения переданного промиса (без блокировки главного потока).

async-функция #

async function getOrderSummary(orderId) {
 return { orderId, status: 'packed' }
}

getOrderSummary('ord-12').then((data) => console.log(data.status))

Явный return оборачивается в Promise.resolve. throw внутри async — в Promise.reject.

async function fail() {
 throw new Error('Склад закрыт')
}

fail().catch((err) => console.log(err.message))

await #

await можно использовать только внутри async-функции (или на верхнем уровне модуля в современных средах).

Symbol и перечисление ключей

Mon, 01 Jan 0001 00:00:00 +0000

Symbol и перечисление ключей #

Ключи объекта в JavaScript почти всегда строки; Symbol даёт гарантированно уникальный идентификатор. Методы Object.keys, values и entries перечисляют собственные перечисляемые свойства — это основа сериализации, валидации форм и обхода payload без захвата унаследованных полей из прототипа (подробнее — см. раздел ООП).

Object.keys, values, entries #

const cart = {
 id: 'cart-7a2',
 currency: 'RUB',
 itemCount: 2,
}

Object.keys(cart)
// ['id', 'currency', 'itemCount']

Object.values(cart)
// ['cart-7a2', 'RUB', 2]

Object.entries(cart)
// [['id', 'cart-7a2'], ['currency', 'RUB'], ['itemCount', 2]]

entries удобен для преобразования объекта в Map или для итерации пар ключ–значение:

Деструктуризация в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Деструктуризация в JavaScript #

Деструктуризация — синтаксис извлечения полей из объекта или элементов из массива в отдельные переменные за одно присваивание. Она сокращает шаблонный код в обработчиках заказов, ответах API и параметрах функций, не меняя исходные данные (если вы не переназначаете сами поля).

Деструктуризация массива #

const pair = ['express', 399]
const [type, fee] = pair
// type === 'express', fee === 399

Пропуск элементов:

const rgb = [255, 120, 64]
const [r, , b] = rgb
// r === 255, b === 64

Обмен без временной переменной:

Стили, размеры, координаты

Mon, 01 Jan 0001 00:00:00 +0000

Стили, размеры, координаты #

Геометрия и стили элемента нужны, когда UI реагирует на размер окна, рисует оверлеи или фиксирует панель checkout. JavaScript читает вычисленные размеры через getBoundingClientRect, меняет оформление через classList и inline-стили element.style.

classList #

Классы — основной способ переключать состояние без inline-CSS:

const bar = document.querySelector('.checkout-bar')

bar.classList.add('is-visible')
bar.classList.remove('is-hidden')
bar.classList.toggle('is-compact', window.innerWidth < 768)

bar.classList.replace('theme-light', 'theme-dark')

Несколько классов за раз:

document.querySelector('.playlist-panel').classList.add('is-open', 'has-focus')

Состояние виджета «свернут»:

function setWidgetCollapsed(widgetEl, collapsed) {
 widgetEl.classList.toggle('widget--collapsed', collapsed)
 widgetEl.setAttribute('aria-expanded', String(!collapsed))
}

Inline-стили: element.style #

Inline-стили задают конкретные CSS-свойства в camelCase:

Циклы в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Циклы в JavaScript #

Цикл повторяет блок кода, пока выполняется условие или пока не исчерпан набор элементов. В современном JavaScript для массивов чаще выбирают for...of или методы массива; while и классический for остаются для счётчиков и условий с неизвестным числом шагов.

while и do…while #

while проверяет условие до тела цикла:

let battery = 100
let ticks = 0

while (battery > 20) {
 battery -= 15
 ticks += 1
}

ticks // 6
battery // 10

do...while выполняет тело хотя бы один раз, затем проверяет условие:

Дата и время в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Дата и время в JavaScript #

Объект Date хранит момент времени как число миллисекунд с 1 января 1970 UTC (Unix-эпоха) и предоставляет методы чтения календарных полей в локальной зоне браузера или в UTC. Для слотов доставки, таймеров оплаты и меток «когда обновлён плейлист» этого хватает; для сложной бизнес-логики с часовыми поясами позже подключают специализированные библиотеки.

Создание Date #

const now = new Date() // текущий момент

const fromString = new Date('2026-04-12T14:30:00')
const fromParts = new Date(2026, 3, 12, 14, 30) // месяц 0-based: 3 = апрель
const fromTimestamp = new Date(1_714_000_000_000) // миллисекунды с эпохи

Строки без смещения (Z или +03:00) часто трактуются как локальное или UTC в зависимости от формата — для API надёжнее передавать ISO с зоной:

Микрозадачи и макрозадачи

Mon, 01 Jan 0001 00:00:00 +0000

Микрозадачи и макрозадачи #

JavaScript выполняет код в одном потоке, а отложенную работу ставит в очереди. Две важные категории — микрозадачи (microtasks) и макрозадачи (macrotasks, task). Понимание порядка объясняет, почему then срабатывает раньше setTimeout, и помогает избегать гонок в UI.

Один цикл за раз #

Пока выполняется синхронный код, очереди не продвигаются. После текущего «куска» движок:

Обрабатывает все микрозадачи из очереди (до опустошения).
Берёт одну макрозадачу.
Снова обрабатывает все микрозадачи.
И так далее — модель event loop.

Что куда попадает #

Тип	Примеры
Микрозадача	колбэки `.then` / `.catch` / `.finally`, `queueMicrotask`, `await` (продолжение async-функции)
Макрозадача	`setTimeout`, `setInterval`, события DOM, часть I/O в Node

requestAnimationFrame в браузере — отдельная фаза перед отрисовкой; не путайте с микрозадачами, но помните: он ближе к кадру, чем setTimeout(0).

Функции в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Функции в JavaScript #

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

Function Declaration #

Самый прямой способ — объявить функцию ключевым словом function:

function formatPrice(amount, currency = 'RUB') {
 return `${amount.toFixed(2)} ${currency}`
}

formatPrice(1490) // "1490.00 RUB"
formatPrice(12.5, 'EUR') // "12.50 EUR"

Объявления «поднимаются» (hoisting): вызов до строки с function в том же scope обычно работает. На практике объявляйте функции до использования — код читается проще.

JSON в JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

JSON в JavaScript #

JSON (JavaScript Object Notation) — текстовый формат обмена данными: объекты, массивы, строки, числа, true/false и null. В браузере и Node.js пара JSON.stringify / JSON.parse связывает объекты в памяти с телом HTTP-запроса чекаута, ответом списка треков или сохранённой корзиной в localStorage.

Что такое JSON #

JSON — не «весь JavaScript», а узкий поднабор значений:

Допустимо в JSON	Нет в JSON
объект `{ "key": value }`	`undefined`
массив `[1, 2]`	функции
строка `"text"`	`Symbol`
число `42`, `3.14`	`BigInt` (без обходных путей)
`true`, `false`, `null`	`Date` как тип (только строка)

Ключи объектов в JSON в двойных кавычках:

Базовый курс по JS on JSFlow

Custom Elements

Custom Elements #

Регистрация элемента #

Fetch API

Fetch API #

Простой GET-запрос #

Разбор JSON #

localStorage и sessionStorage

localStorage и sessionStorage #

Базовые операции #

Proxy

Proxy #

Создание #

try/catch и Error

try/catch и Error #

try, catch, finally #

Браузерное окружение

Браузерное окружение #

window — глобальная область вкладки #

Введение в регулярные выражения

Введение в регулярные выражения #

Литерал /шаблон/флаги #

Замыкания и область видимости

Замыкания и область видимости #

Лексическая область видимости #

Итерируемые объекты и протокол итерации

Итерируемые объекты и протокол итерации #

Итератор вручную #

Модель событий

Модель событий #

addEventListener #

Модули: введение

Модули: введение #

Зачем модули #

Объекты: основы

Объекты: основы #

Литерал объекта #

Переменные и типы данных

Переменные и типы данных в JavaScript #

Как объявить переменную #

Прототипное наследование

Прототипное наследование #

[[Prototype]] и поиск свойств #

Числа и Math в JavaScript

Числа и Math в JavaScript #

Литералы и базовые операции #

CORS и ошибки запросов

CORS и ошибки запросов #

Origin и «тот же сайт» #

DOM-дерево и навигация

DOM-дерево и навигация #

Типы узлов #

Родители и предки #

export и import

export и import #

Именованный экспорт #

Reflect

Reflect #

Зачем Reflect, если есть операторы #

Rest и spread

Rest и spread #

Rest-параметры #

Spread в массивах #

Shadow DOM

Shadow DOM #

attachShadow #

Всплытие и делегирование

Всплытие и делегирование #

Три фазы #

Где выполняется JavaScript

Где выполняется JavaScript #

Браузер #

Генераторы

Генераторы #

Объявление и первый next() #

Классы: базовый синтаксис

Классы: базовый синтаксис #

Объявление класса #

Колбэки

Литерал `/шаблон/флаги` #

Объявление и первый `next()` #

Один символ: `.` и экранирование #

`for await...of` #

Захватывающие группы `(...)` #