Вопросы на собеседовании JavaScript-разработчику в 2026: что спрашивают и как готовиться

IT-собеседования в 2026 году не прощают поверхностной подготовки. Поиск работы в России в среднем растягивается на месяцы, а релевантность отклика значит больше, чем общий объём рассылки. Разослали десятки заявок без разбора — и, скорее всего, вас просто не заметят. Умный поиск hh.ru сканирует весь текст резюме и понимает синонимы, но сильнее всего на место в выдаче влияют заголовок, ключевые навыки и последний опыт: свежие и полные резюме поднимаются выше. Так что перед собеседованием стоит не только повторить теорию, но и проверить, как вас видят рекрутеры.

Дальше — темы, которые реально всплывают на собеседованиях JavaScript-разработчика в 2026 году. По каждой — пример вопроса, логика ответа и то, чем ответ джуниора отличается от ответа мидла.

Замыкания, this, event loop, промисы

Пример вопроса: «Что такое замыкание и где вы его использовали?» Как рассуждать: Определения тут мало — покажите замыкание в деле, на примере счётчика или обработчика клика внутри цикла. Смысл в том, что функция продолжает видеть переменные своего родителя даже после того, как тот уже отработал и пропал со стека. Junior: объяснит, что функция внутри функции может обращаться к переменным родителя, и покажет простой пример: function outer() { let x = 0; return function inner() { x++; return x; } }. Middle: добавит про потерю контекста this в колбэках, про bind/call/apply и про то, как избежать замыкания на общей переменной цикла — с помощью let или IIFE.

Пример вопроса: «Как работает event loop в браузере?» Как рассуждать: Пройдитесь по стеку вызовов, макрозадачам (setTimeout, setInterval, I/O) и микрозадачам (Promise, MutationObserver). Важен порядок выполнения: сначала синхронный код, потом все микрозадачи, затем одна макрозадача — и снова микрозадачи. Junior: опишет, что асинхронные операции не блокируют поток, и упомянет очередь задач. Middle: пройдётся по примеру с Promise и setTimeout, объяснит, почему Promise срабатывает раньше setTimeout(0), и добавит requestAnimationFrame как отдельную задачу рендеринга.

Браузер и DOM

Пример вопроса: «Чем отличается всплытие от перехвата событий?» Как рассуждать: Тут работают два противоположных прохода: перехват идёт от document вниз к цели, всплытие — обратно, от цели вверх к document. Для перехвата в addEventListener передают { capture: true }. Пример из практики — делегирование событий на родительском элементе для элементов, которые добавляются динамически. Junior: расскажет про три фазы — перехват, цель, всплытие — но не всегда объяснит, зачем вообще нужен перехват. Middle: покажет, как остановить всплытие через stopPropagation, и объяснит, когда это уместно, а когда нет — пример с модальными окнами тут напрашивается сам собой.

Пример вопроса: «Как оптимизировать производительность при работе с DOM?» Как рассуждать: Сократите число перерисовок: documentFragment, batch-обновления, requestAnimationFrame для анимаций, виртуализация списков. Junior: назовёт общий принцип — не трогать DOM чаще, чем необходимо. Middle: заговорит на языке метрик — layout thrashing, repaint, composite — и назовёт инструмент: вкладку Performance в Chrome DevTools.

Фреймворки: React

Пример вопроса: «Что такое виртуальный DOM и зачем он нужен?» Как рассуждать: React держит в памяти лёгкую копию реального дерева — это и есть виртуальный DOM. Когда что-то меняется, React сравнивает новое дерево со старым (diffing) и применяет к реальному DOM только минимальный набор правок вместо полной перестройки. Отсюда и выигрыш в скорости. Junior: объяснит саму концепцию и скажет пару слов про эффективность. Middle: добавит про key, про Fiber — алгоритм согласования с приоритетами — и назовёт случаи, где виртуальный DOM оказывается медленнее: например, огромные списки без ключей.

Пример вопроса: «Как работает хук useEffect? Какие есть подводные камни?» Как рассуждать: useEffect срабатывает после рендера, а массив зависимостей решает, когда эффект перезапустится: пустой массив — только при монтировании, без массива — после каждого рендера. Дальше начинаются подводные камни: забыли указать зависимость — эффект дёргается лишний раз, поставили нестабильную зависимость — получили бесконечный цикл, не почистили эффект — потекла память. Junior: расскажет про базовое использование хука. Middle: покажет пример с замыканием внутри эффекта, объяснит, зачем нужны useCallback/useMemo, и вспомнит про useRef для хранения значений, которые не должны меняться между рендерами.

Вёрстка у фронтендера

Пример вопроса: «Как центрировать элемент по горизонтали и вертикали?» Как рассуждать: Способов центрирования хватает: Flexbox (display: flex; justify-content: center; align-items: center;), Grid (place-items: center), абсолютное позиционирование с transform: translate(-50%, -50%). Выбор зависит от контекста: тип контейнера, известны ли размеры заранее, какие браузеры поддерживать. Junior: назовёт один-два способа. Middle: пойдёт глубже — заговорит про производительность (transform обгоняет margin), про доступность (важен порядок в DOM) и объяснит, какой способ когда уместнее.

Пример вопроса: «Что такое CSS Grid и в чём его преимущество перед Flexbox?» Как рассуждать: По размерности Grid работает сразу в двух измерениях — строки и столбцы одновременно, а Flexbox — только в одном: либо строка, либо столбец. Поэтому Grid чаще берут под макет всей страницы, а Flexbox — под компоненты и выравнивание по одной оси. Junior: даст базовое сравнение двух подходов. Middle: покажет, как Grid и Flexbox комбинируются в одном макете, и расскажет про grid-template-areas, auto-совпадение/auto-fill.

Задачи на код

Пример задачи: «Напишите функцию debounce, которая вызывает callback не чаще, чем раз в delay мс.» Как рассуждать: Таймер живёт в замыкании: при каждом новом вызове старый сбрасывается, и вместо него ставится новый. Junior: напишет рабочую версию на setTimeout и clearTimeout. Middle: добавит поддержку this и аргументов, опцию leading/trailing, объяснит, чем debounce отличается от throttle.

Пример задачи: «Развернуть односвязный список.» Как рассуждать: Итеративно — через три указателя: prev, current, next. Junior: реализует итеративное решение. Middle: предложит рекурсивный вариант, прикинет сложность — O(n) по времени, O(1) или O(n) по памяти.

Разница ожиданий Junior vs Middle

На собеседованиях 2026 года Junior и Middle отличаются не столько списком выученных тем, сколько глубиной понимания и умением применить знания в конкретной ситуации. Junior отвечает на прямые вопросы «что такое?», способен написать простую функцию и знает основы React — JSX, state, props. Middle объясняет «почему?»: сравнивает альтернативы вроде Redux и Context API, разбирается в производительности и безопасности (XSS, CSRF), умеет проектировать компоненты и работать с асинхронностью на уровне промисов и async/await.

Практический чек-лист подготовки к собеседованию

Ниже — конкретные действия. Отмечайте по ходу то, что уже сделали. - [ ] Повторить замыкания и this: написать 3 примера — счётчик, обработчик, потеря контекста. - [ ] Прогнать event loop в уме: порядок вывода для setTimeout + Promise + синхронного кода. - [ ] Решить 5 задач на массивы и строки — например, flatten, debounce, throttle, deep clone, анаграммы. - [ ] Подготовить 2 реальных кейса из опыта: один про баг, один про оптимизацию. - [ ] Обновить резюме: заголовок, ключевые навыки, последний опыт — чтобы hh.ru показывал вас выше. - [ ] Настроить автоотклики через xt-job.ru, чтобы не тратить время на ручную рассылку и получать AI-сопроводительные под каждую вакансию. - [ ] Прочитать гайд по подготовке к собеседованию 2026. - [ ] Изучить, как проходить собеседование в IT: техника STAR, вопросы работодателю, переговоры о зарплате. - [ ] Провести 2-3 mock-собеседования — с коллегами или через специальные сервисы. - [ ] Проверить, что все ссылки в резюме рабочие, а портфолио открывается без ошибок.