Question 1

Что такое замыкание (closure)?

Accepted Answer

Замыкание - это функция, которая запоминает переменные из внешней области видимости даже после того, как внешняя функция завершила выполнение. Каждый вызов makeCounter() создаёт независимое замыкание над своим count. Замыкания используются для инкапсуляции, фабрик функций, мемоизации и модульного паттерна.

Question 2

Как работает Event Loop?

Accepted Answer

JavaScript однопоточен: код выполняется в call stack последовательно. Синхронный код → сразу в call stack Асинхронные операции (setTimeout, fetch) → Web API → по завершении колбэк идёт в очередь Event loop постоянно смотрит: если стек пуст - берёт задачу из очереди Есть два типа очередей: Микрозадачи (Promise.then, queueMicrotask, MutationObserver) - приоритет выше Макрозадачи (setTimeout, setInterval, setImmediate) После каждой макрозадачи выполняются все накопившиеся микрозадачи.

Question 3

Чем отличается var от let и const?

Accepted Answer

TDZ (Temporal Dead Zone) - промежуток от начала блока до строки объявления, где переменная есть, но недоступна (ReferenceError). const запрещает переприсваивание, но объект можно мутировать: const arr = []; arr.push(1) - OK.

Question 4

Что такое hoisting (поднятие)?

Accepted Answer

Движок JS сканирует код перед выполнением и «поднимает» объявления в верх области видимости. function declaration - поднимается целиком (можно вызвать до объявления) var - поднимается как undefined let / const - поднимаются, но попадают в TDZ Классы тоже поднимаются, но остаются в TDZ - нельзя использовать до объявления.

Question 5

Как работает прототипное наследование?

Accepted Answer

Каждый объект в JS имеет скрытую ссылку [[Prototype]] на другой объект (или null). При обращении к свойству движок ищет его вверх по цепочке прототипов. Цепочка прототипов: dog → animal → Object.prototype → null Классы ES6 - синтаксический сахар над прототипным наследованием. class Dog extends Animal устанавливает прототипные связи автоматически.

Question 6

В чём разница между == и ===?

Accepted Answer

=== (строгое равенство) - сравнивает значение и тип без приведения. == (нестрогое равенство) - перед сравнением выполняет приведение типов (type coercion). Правило: всегда используй ===. Единственный устоявшийся случай для == - проверка x == null (одновременно ловит null и undefined).

Question 7

Что такое this и как определить его значение?

Accepted Answer

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

Question 8

Чем стрелочная функция отличается от обычной?

Accepted Answer

Стрелочные функции идеальны для колбэков - они не теряют this: Не используй стрелочные функции как методы объекта или обработчики событий, когда нужен динамический this.

Question 9

Как работают Promise и async/await?

Accepted Answer

Promise - объект, представляющий результат асинхронной операции. Состояния: pending → fulfilled / rejected. async/await - синтаксический сахар над Promise, делает код «плоским»: await приостанавливает только текущую async-функцию, не блокируя JS-поток. Для параллельного выполнения - Promise.all([...]) .

Question 10

Что такое event bubbling и event delegation?

Accepted Answer

Всплытие (bubbling): событие сначала происходит на целевом элементе, затем распространяется вверх - к родителям и до document. Делегирование: вместо N обработчиков на N дочерних элементах - один обработчик на родителе: Плюсы делегирования: Меньше обработчиков → меньше памяти Работает с динамически добавленными элементами Проще управление e.stopPropagation() - останавливает всплытие. e.preventDefault() - отменяет действие по умолчанию.

Question 11

В чём разница между call, apply и bind?

Accepted Answer

Все три явно задают this для функции. bind полезен для создания функций с предустановленным контекстом (обработчики в классах).

Question 12

Что такое debounce и throttle?

Accepted Answer

Обе техники ограничивают частоту вызова функции, но по-разному. Debounce - вызывает функцию только через N мс после последнего вызова. Если вызовы продолжаются, таймер сбрасывается. Throttle - вызывает не чаще раза в N мс, игнорируя промежуточные.

Question 13

В чём разница между null, undefined и undeclared?

Accepted Answer

undefined - переменная объявлена, но значение не присвоено. Также возвращается функцией без return. null - явное «пустое» значение, присвоенное программистом намеренно. Означает отсутствие объекта. undeclared - переменная вообще не была объявлена. Обращение к ней вызывает ReferenceError. Для проверки «нет значения» используй x == null - поймает и null, и undefined.

Question 14

Чем микрозадачи отличаются от макрозадач?

Accepted Answer

Ключевой момент: все накопившиеся микрозадачи выполняются до следующей макрозадачи. Это гарантирует, что Promise-колбэки обработаются раньше следующего setTimeout.

Question 15

Что такое spread и rest операторы?

Accepted Answer

Оба используют синтаксис ..., но в разных контекстах. Rest (... в параметрах) - собирает оставшиеся аргументы в массив: Spread (... в вызовах и литералах) - разворачивает итерируемое: Spread создаёт поверхностную копию - вложенные объекты копируются по ссылке.

Question 16

Что такое IIFE?

Accepted Answer

IIFE (Immediately Invoked Function Expression) - функция, которая объявляется и немедленно вызывается. Зачем нужны: Изоляция области видимости - переменные не попадают в глобальный скоуп До ES-модулей - основной способ создания приватного состояния (модульный паттерн) Сегодня IIFE встречаются реже - ES-модули решают ту же задачу чище. Но они всё ещё используются в бандлерах и legacy-коде.

Question 17

Как работает специфичность CSS?

Accepted Answer

Специфичность определяет, какое CSS-правило «победит» при конфликте. Считается как сумма весов: Правила: При равной специфичности - побеждает последнее по порядку правило !important перекрывает всё (избегай - разрушает предсказуемость) Универсальный селектор * и комбинаторы не добавляют специфичность

Question 18

Что такое блочная модель (box model)?

Accepted Answer

Каждый элемент - это прямоугольник из четырёх слоёв (снаружи внутрь): margin → border → padding → content Ключевое - box-sizing: Лучшая практика: Margin не входит в box-sizing - он всегда вне элемента. Также у margin есть схлопывание (collapsing): вертикальные margin двух соседних блоков объединяются в один (большее значение).

Question 19

Flexbox или Grid - когда что использовать?

Accepted Answer

Flexbox - одномерный: работает вдоль одной оси (строка или колонка). Подходит для: навбаров, кнопок, выравнивания элементов в ряд/колонку. --- Grid - двумерный: управляет строками и колонками одновременно. Подходит для: макетов страниц, карточных сеток, сложного позиционирования. --- Практическое правило: Компонент → Flexbox Макет страницы → Grid Можно комбинировать: Grid для layout, Flexbox внутри ячеек

Question 20

Какие виды позиционирования есть в CSS?

Accepted Answer

Частый паттерн: родитель position: relative + дочерний position: absolute для оверлеев. sticky: элемент остаётся в потоке, но «прилипает» при прокрутке:

Question 21

Разница между display:none, visibility:hidden и opacity:0?

Accepted Answer

Когда что: display: none - полностью убрать элемент visibility: hidden - скрыть, сохранив место (редко нужно) opacity: 0 - для плавного появления (transition) + нужно добавить pointer-events: none

Question 22

Как работает z-index и что такое stacking context?

Accepted Answer

z-index задаёт порядок элементов по оси Z (кто перекрывает кого). Работает только при position ≠ static. Stacking context (контекст наложения) - изолированный «слой». z-index элементов внутри разных контекстов не сравниваются напрямую. Новый stacking context создаётся при: position + z-index ≠ auto opacity < 1 transform, filter, will-change isolation: isolate Если z-index «не работает» - скорее всего, элемент находится в отдельном stacking context.

Question 23

Чем псевдоклассы отличаются от псевдоэлементов?

Accepted Answer

Псевдоклассы (:) - описывают состояние или положение элемента: Псевдоэлементы (::) - создают виртуальные части элемента: Оба двойного двоеточия :: - современный стандарт для псевдоэлементов. Одинарное : работает для обратной совместимости (:before).

Question 24

Что такое BEM?

Accepted Answer

BEM (Block-Element-Modifier) - методология именования CSS-классов для поддерживаемого и предсказуемого кода. Пример: Плюсы: низкая специфичность, самодокументированность, изоляция. Минусы: длинные имена классов. Альтернативы - CSS Modules, Tailwind, CSS-in-JS.

Question 25

Что такое семантический HTML и зачем он нужен?

Accepted Answer

Семантические теги передают смысл содержимого, а не только внешний вид. Зачем: Доступность: screen reader понимает структуру страницы SEO: поисковики лучше индексируют контент Читаемость кода: разработчик сразу понимает назначение Ключевые теги:

,

Question 26

Чем отличаются атрибуты async и defer у тега script?

Accepted Answer

Правило: defer - для большинства скриптов (нужен готовый DOM) async - для независимых скриптов (аналитика, реклама) Без атрибутов - только когда нужно выполнить до парсинга страницы (очень редко)

Question 27

Чем localStorage отличается от sessionStorage и cookies?

Accepted Answer

Браузер даёт несколько способов хранить данные на клиенте. Главное отличие - видит ли их сервер. localStorage, sessionStorage и IndexedDB - только в браузере. Сервер о них не знает: чтобы отправить данные, нужен ручной fetch. Cookies - единственное хранилище, завязанное на сервер: браузер сам шлёт их в каждом запросе.

Question 28

Что такое data-атрибуты?

Accepted Answer

Пользовательские атрибуты для хранения данных прямо в HTML. Любой атрибут начинающийся с data- валиден. Доступ через JS: Зачем: Хранить метаданные в DOM без нестандартных атрибутов Удобно для event delegation (определить что за элемент) Доступны из CSS: [data-role="admin"] { color: red } Не храни чувствительные данные - они видны в HTML.

Question 29

Что такое Critical Rendering Path?

Accepted Answer

Critical Rendering Path (CRP) - последовательность шагов, которые браузер выполняет от получения HTML до отрисовки пикселей на экране. Шаги: Парсинг HTML → DOM Браузер читает HTML байт за байтом, строит DOM (Document Object Model) - дерево узлов. Парсинг блокируется при встрече

Question 30

Что такое Render Tree и чем он отличается от DOM?

Accepted Answer

DOM - полное дерево всех узлов HTML-документа, включая скрытые элементы, комментарии, <head>. CSSOM - дерево всех CSS-правил с их специфичностью и каскадом. Render Tree = DOM + CSSOM, но только то, что реально отображается: Визуально: Зачем это знать: операции, изменяющие Render Tree (добавление/удаление элементов, изменение стилей) вызывают Reflow (пересчёт layout) или Repaint (перерисовку) - дорогостоящие операции. Правило: пакетируй DOM-изменения, используй documentFragment, избегай чтения layout-свойств (offsetWidth, getBoundingClientRect) между записями.

Question 31

Что происходит до всплытия события? Фазы событий в DOM.

Accepted Answer

Когда происходит событие, оно проходит три фазы: Capturing (погружение / перехват) Событие идёт от window → document → html → ... вниз к целевому элементу. Target (цель) Событие достигает целевого элемента (event.target). Обработчики на нём выполняются в порядке регистрации. Bubbling (всплытие) Событие поднимается обратно вверх от целевого элемента → ... → document → window. --- Пример: --- Остановить распространение: event.stopPropagation() - останавливает текущую фазу (больше не идёт вверх/вниз) event.stopImmediatePropagation() - также отменяет остальные обработчики на том же элементе Важно: не все события всплывают. focus, blur, scroll, load - не всплывают (но у них есть аналоги: focusin/focusout, wheel).

Question 32

Что такое ARIA-атрибуты?

Accepted Answer

ARIA (Accessible Rich Internet Applications) - набор атрибутов, которые добавляют семантику для вспомогательных технологий (screen readers). Три типа ARIA-атрибутов: Roles - роль элемента: Properties - постоянные свойства: States - динамические состояния: Правило: используй нативные HTML-элементы (

Теория

JavaScriptЧто такое замыкание (closure)?

JavaScriptКак работает Event Loop?

JavaScriptЧем отличается var от let и const?

JavaScriptЧто такое hoisting (поднятие)?

JavaScriptКак работает прототипное наследование?

JavaScriptВ чём разница между == и ===?

JavaScriptЧто такое this и как определить его значение?

JavaScriptЧем стрелочная функция отличается от обычной?

JavaScriptКак работают Promise и async/await?

JavaScriptЧто такое event bubbling и event delegation?

JavaScriptВ чём разница между call, apply и bind?

JavaScriptЧто такое debounce и throttle?

JavaScriptВ чём разница между null, undefined и undeclared?

JavaScriptЧем микрозадачи отличаются от макрозадач?

JavaScriptЧто такое spread и rest операторы?

JavaScriptЧто такое IIFE?

CSSКак работает специфичность CSS?

CSSЧто такое блочная модель (box model)?

CSSFlexbox или Grid - когда что использовать?

CSSКакие виды позиционирования есть в CSS?

CSSРазница между display:none, visibility:hidden и opacity:0?

CSSКак работает z-index и что такое stacking context?

CSSЧем псевдоклассы отличаются от псевдоэлементов?

CSSЧто такое BEM?

HTMLЧто такое семантический HTML и зачем он нужен?

HTMLЧем отличаются атрибуты async и defer у тега script?

HTMLЧем localStorage отличается от sessionStorage и cookies?

HTMLЧто такое data-атрибуты?

HTMLЧто такое Critical Rendering Path?

HTMLЧто такое Render Tree и чем он отличается от DOM?

JavaScriptЧто происходит до всплытия события? Фазы событий в DOM.

HTMLЧто такое ARIA-атрибуты?