Глоссарий frontend-терминов

Не просто словарь, а рабочий справочник по терминам, которые чаще всего встречаются в задачах, код-ревью и на собеседованиях. Для каждого термина есть определение, практические примеры и связанные темы.

Как пользоваться глоссарием с пользой

  • 1. Открывай термин и пытайся объяснить его своими словами в 2-3 предложениях.
  • 2. Смотри примеры и связывай термин с реальными задачами в уроках.
  • 3. Проходи связанные термины блоками, а не по одному в случайном порядке.

API

Интерфейс взаимодействия между программами или сервисами.

Во frontend чаще всего речь о HTTP API: клиент отправляет запрос и получает данные в формате JSON.

Пример: GET /api/users

async/await

Синтаксис для более читаемой работы с Promise.

Ключевое слово async делает функцию возвращающей Promise, а await приостанавливает её выполнение до завершения Promise.

Пример: await fetch(...)

Closure (замыкание)

Функция, которая “помнит” внешние переменные даже после завершения внешней функции.

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

Пример: Счётчик с приватной переменной

Core Web Vitals

Набор ключевых метрик качества пользовательского опыта.

Основные метрики: LCP (скорость загрузки основного контента), INP (отклик интерфейса), CLS (визуальная стабильность).

Пример: Оптимизация изображений для LCP

CORS

Механизм браузера, который контролирует кросс-доменные HTTP-запросы.

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

Пример: Access-Control-Allow-Origin

DOM

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

DOM представляет HTML как дерево узлов. Через DOM API можно создавать, менять и удалять элементы, а также реагировать на события пользователя.

Пример: document.querySelector

Event Loop

Цикл, который координирует выполнение синхронного кода, microtasks и macrotasks.

Event Loop позволяет JavaScript быть неблокирующим. Сначала выполняется текущий стек, затем microtasks (Promise), потом macrotasks (setTimeout и т.п.).

Пример: Promise.then выполняется раньше setTimeout(0)

Generics

Параметризованные типы, которые позволяют писать переиспользуемый типобезопасный код.

Generics позволяют описывать функции, классы и структуры данных так, чтобы типы подставлялись при использовании.

Пример: function identity<T>(value: T): T

Hoisting

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

Объявления функций и переменных обрабатываются до выполнения строки. Для let/const существует TDZ, поэтому обращаться к ним до инициализации нельзя.

Пример: function declaration доступна до строки объявления

Hydration

Подключение клиентского JavaScript к уже отрендеренному HTML.

После SSR браузер получает HTML, а hydration “оживляет” интерфейс: добавляет обработчики, состояние и интерактивность.

Пример: Next.js SSR + клиентские компоненты

Interface

Контракт формы объекта или класса в TypeScript.

Интерфейсы описывают структуру данных и помогают поддерживать предсказуемые API внутри проекта.

Пример: interface User { id: number; name: string }

Pinia

Современный менеджер состояния для Vue.

Pinia предоставляет store с типобезопасностью и простым API. Используется как базовый стандарт для Vue 3 приложений.

Пример: store для корзины

Promise

Объект для представления результата асинхронной операции.

Promise бывает в состояниях pending, fulfilled и rejected. Он позволяет строить цепочки асинхронного кода без коллбэк-ада.

Пример: fetch возвращает Promise

React Hooks

Функции React для работы с состоянием и жизненным циклом в функциональных компонентах.

Основные хуки: useState, useEffect, useMemo, useCallback, useRef. Они позволяют строить предсказуемую логику без классов.

Пример: useState для формы

REST

Архитектурный стиль построения HTTP API на основе ресурсов.

REST API использует стандартные методы HTTP и предсказуемую структуру URL для операций чтения и изменения данных.

Пример: GET /posts

Scope (область видимости)

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

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

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

SEO

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

SEO включает техническую оптимизацию, структуру сайта, контент, перелинковку и работу с поведенческими сигналами.

Пример: Метаданные, sitemap, robots

SSR (Server-Side Rendering)

Рендеринг HTML на сервере до отправки в браузер.

SSR ускоряет первый показ контента и часто улучшает индексацию, так как поисковик сразу видит готовый HTML.

Пример: Next.js app router

State Management

Подходы и инструменты для хранения и обновления состояния приложения.

В небольших приложениях хватает локального state. В сложных проектах используют централизованные решения: Redux Toolkit, Zustand, Pinia.

Пример: Глобальный store для пользователя

TypeScript

Надмножество JavaScript с системой статической типизации.

TypeScript помогает ловить ошибки на этапе разработки, улучшает автодополнение и поддержку больших кодовых баз.

Пример: Интерфейсы и типы

Virtual DOM

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

Библиотеки вроде React сравнивают новое и старое виртуальное дерево, а потом минимально обновляют реальный DOM.

Пример: Diffing в React

Vue Composition API

Подход Vue 3 для группировки логики по функциональности.

Composition API использует setup, ref, reactive и composables. Это упрощает переиспользование логики и масштабирование компонентов.

Пример: useAuth composable

Подборки терминов по темам

FAQ по терминологии

Как лучше учить термины frontend, чтобы запомнить?

Лучше всего сразу привязывать термин к задаче в коде: короткое определение, пример и применение в проекте.

Нужно ли знать все термины для junior-собеседования?

Не все, но базовый набор по JavaScript, браузеру, API и выбранному фреймворку обычно обязателен.

Можно ли использовать глоссарий как чеклист подготовки?

Да, проходи термины блоками и отмечай те, которые можешь объяснить своими словами с примером.

© 2026 Road to JS · ИП Добрынина Екатерина Владимировна

ИНН 482425719598 · ОГРНИП 326480000011329 · qamos@bk.ru