Собеседование на джуна Frontend: 50 вопросов с разбором

Я провожу собеседования джунов на фронт пять лет, в среднем 6–8 интервью в неделю. За это время вопросы кочуют от компании к компании, повторяются, и собрать список типовых — задача решаемая. Ниже 50 вопросов, которые реально звучат на джун-фронте в 2026, с краткими разборами.

Это не «учи и копируй ответ». Это карта тем. Если по любому пункту тебе нечего сказать своими словами — там и нужно докопаться.

JavaScript — 15 вопросов

1. Чем var, let и const отличаются? Скоуп (function vs block), hoisting, возможность переопределения. const запрещает переприсваивание ссылки, но не мутацию объекта.
2. Что такое hoisting? Объявления переменных и функций «поднимаются» в начало скоупа. var объявляется, но инициализируется undefined; let/const попадают в TDZ.
3. == vs ===. Первое сравнение с приведением типов, второе строгое. Используй ===, кроме осознанных кейсов вроде x == null.
4. this в стрелочной и обычной функции. Стрелочная не имеет своего this, наследует из enclosing scope. Обычная — определяется в момент вызова.
5. Замыкание. Функция плюс окружение, в котором она была создана. Классический пример: счётчик через IIFE.
6. Event loop простыми словами. Стек вызовов, очередь макротасков (setTimeout, события), микротасков (Promise.then, queueMicrotask). Микротаски выполняются между макротасками.
7. Что выведет код? setTimeout(() => console.log(1), 0); Promise.resolve().then(() => console.log(2)); console.log(3); Ответ: 3, 2, 1.
8. Promise состояния. pending, fulfilled, rejected. Промис не отменяемый штатно, для отмены — AbortController.
9. async/await — что это? Сахар над промисами. async-функция всегда возвращает промис, await ждёт его разрешения.
10. Чем отличается map от forEach? map возвращает новый массив, forEach — undefined и нужен только для side effects.
11. Что такое spread/rest? Один синтаксис, разные роли: «...» в литерале — распаковка, в параметрах функции — сбор остатка.
12. Глубокое и поверхностное копирование. Object.assign и spread — поверхностное. Для глубокого — structuredClone (в браузерах с 2022) или recursive clone.
13. Symbol — зачем? Уникальные ключи свойств, не сталкиваются с другими. Используются в well-known symbols (Symbol.iterator).
14. Map vs Object. Map хранит порядок, ключи любого типа, у него нет prototype-цепочки, лучше для частых добавлений/удалений.
15. WeakMap — когда нужен? Когда не хочешь, чтобы сборщик мусора держал ключи. Например, метаданные DOM-элементов.

Браузер и DOM — 8 вопросов

1. Как браузер строит страницу? HTML → DOM, CSS → CSSOM, объединение в render tree, layout, paint, composite.
2. Reflow vs repaint. Reflow — пересчёт геометрии, дорогой. Repaint — перерисовка без изменения размеров.
3. Event delegation. Слушать события на родителе и определять цель через event.target.
4. Capture vs bubble. Фаза погружения вниз и фаза всплытия вверх по DOM. addEventListener третьим параметром { capture: true }.
5. preventDefault и stopPropagation. Первое отменяет дефолт (отправку формы), второе останавливает распространение по DOM.
6. localStorage vs sessionStorage vs cookies. Объёмы, время жизни, отправляются ли в HTTP-запросах. localStorage не отправляется, cookies отправляются.
7. CORS простыми словами. Браузер запрещает кросс-доменные запросы без CORS-заголовков от сервера. preflight OPTIONS на не простые запросы.
8. Что такое viewport-мета? <meta name="viewport" content="width=device-width, initial-scale=1">. Без этого мобильные страницы рендерятся в десктопной ширине.

HTML и доступность — 5 вопросов

1. Семантические теги — зачем? Скринридеры, SEO, читаемость. <header>, <nav>, <article> вместо <div>.
2. Где использовать h1? Один h1 на страницу, основной заголовок. Дальше h2/h3 в иерархии.
3. alt у картинок. Описание изображения для screen readers. Декоративные картинки — alt="".
4. aria-label vs label. label — связан с input через for/id, читается всеми. aria-label — для случаев, когда видимого лейбла нет.
5. Контраст текста. WCAG AA: 4.5:1 для основного текста, 3:1 для крупного. Проверка в DevTools.

CSS — 10 вопросов

1. Specificity (специфичность). Считается как четыре числа: inline, id, class/attr/pseudo, tag. Победитель — больший вес.
2. Box model. content, padding, border, margin. box-sizing: border-box включает padding и border в width.
3. Flexbox: основные оси. main и cross. justify-content по main, align-items по cross.
4. Grid vs Flex. Grid — двумерная раскладка, Flex — одна ось. Используй Grid для макета страниц, Flex для компонентов.
5. Что такое CSS-переменные? --color: red; и color: var(--color). В отличие от препроцессоров — работают в рантайме и каскадируются.
6. position: absolute vs fixed. absolute — относительно ближайшего позиционированного предка, fixed — относительно viewport.
7. z-index когда не работает? Когда у элемента нет position (не static), либо когда родитель создаёт stacking context.
8. Как работает медиа-запрос? @media с условием, применяется при совпадении. Mobile-first: писать стили для маленьких экранов, потом расширять через min-width.
9. Что делает will-change? Подсказка браузеру, что свойство будет анимироваться, чтобы вынести на отдельный composite-слой. Не злоупотребляй.
10. Почему margin схлопывается? Vertical margin collapse — у соседних блок-элементов вертикальные отступы сливаются в максимальный.

React — 12 вопросов

1. Что такое JSX? Синтаксический сахар над React.createElement. Транспилируется в вызовы функции.
2. Виртуальный DOM зачем? Объект в памяти, который сравнивается со старым (reconciliation), и в реальный DOM применяются только различия.
3. Хуки — правила. Только на верхнем уровне функции, только в компонентах и кастомных хуках. Никогда — внутри условий и циклов.
4. useState и асинхронность. Сеттер не сразу обновляет state. Чтение после set в той же функции вернёт старое значение.
5. useEffect: dependency array. Пустой [] — выполнится один раз при монтировании. Без массива — на каждый рендер. С зависимостями — когда они меняются.
6. useMemo и useCallback — когда нужны? Когда есть реальная проблема производительности или когда передаёшь зависимости в другие хуки/мемоизированные компоненты. Не на каждой переменной.
7. useRef — для чего? Хранение мутабельного значения без перерендера. Доступ к DOM-узлам.
8. Reconciliation и key. React сравнивает виртуальный DOM поэлементно. key помогает понять, что список переупорядочился, а не пересоздался. Не используй индекс массива в качестве key, если список меняется.
9. Контролируемые и неконтролируемые компоненты. Controlled — значение в state, читаешь через value/onChange. Uncontrolled — внутреннее состояние DOM, доступ через ref.
10. Что такое context? Способ пробросить данные глубоко без props drilling. Не замена state-менеджера для часто меняющихся данных — будут лишние рендеры.
11. Server Components в 2026. Часть рендера выполняется на сервере, на клиент уходит только результат. Уменьшают bundle, но требуют понимания границ «server» / «client».
12. Suspense + lazy. Динамическая загрузка компонента + fallback в дереве. Часть code splitting.

Как готовиться

Не зубри ответы. Я с первого вопроса вижу, когда человек выучил формулировку. Возьми пять-шесть основных тем, поковыряй в коде. Открой консоль, попиши промисы, попробуй сломать reconciliation криво поставленным key. Объясни кому-нибудь словами, как работает event loop. Если можешь объяснить — знаешь.

На реальном собеседовании тебя ещё попросят написать что-то простое: debounce, типизировать какой-нибудь generic, разобрать тонкость в useEffect. Это обычно встроено в обсуждение, не отдельным «алгоритмическим раундом» (для джуна-фронта алгоритмы редкость).

И последнее. Если не знаешь ответа — лучше скажи «не знаю, могу порассуждать». Любой нормальный интервьюер ценит это сильно выше, чем уверенный неверный ответ. Я лично не беру кандидатов, которые «знают всё».