40 вопросов Junior Frontend с ответами 2026
Собеседование Frontend Junior в 2026 году строится вокруг JavaScript, React и базового понимания HTML/CSS. Алгоритмических задач меньше, чем в backend, но знание JS-асинхронности и работы браузера обязательно. Разбираем 40 самых частых вопросов с ответами.
HTML и CSS
1. Что такое семантическая вёрстка?
Использование HTML-тегов по их смысловому назначению: `<header>`, `<nav>`, `<main>`, `<article>`, `<footer>` вместо `<div>` для всего подряд. Улучшает доступность (screen readers), SEO и читаемость кода.
2. Чем `<div>` отличается от `<span>`?
`<div>` — блочный элемент, занимает всю ширину строки. `<span>` — строчный, занимает только место своего содержимого. Используются для группировки без семантического значения.
3. Что такое CSS box model?
Каждый элемент — прямоугольник из: content + padding + border + margin. `box-sizing: border-box` — padding и border включены в объявленные width/height (удобнее). По умолчанию — `content-box`.
4. Объясните разницу между `position: relative`, `absolute`, `fixed`, `sticky`.
`relative` — смещается относительно своей нормальной позиции. `absolute` — позиционируется относительно ближайшего предка с `position` != static. `fixed` — относительно viewport, не скроллится. `sticky` — как relative до определённой точки прокрутки, затем фиксируется.
5. Что такое flexbox и когда его применять?
CSS-модуль для одноосного расположения элементов (строка или столбец). Подходит для навигации, карточек в ряд, центрирования. Основные свойства: `display: flex`, `justify-content`, `align-items`, `flex-wrap`.
6. Чем flexbox отличается от CSS Grid?
Flexbox — одномерный (ось X или Y). Grid — двумерный (строки и столбцы одновременно). Grid лучше для сложных макетов страниц, Flexbox — для компонентов внутри макета.
7. Что такое CSS specificity?
Приоритет правил CSS. Порядок: inline styles > id > class/псевдокласс > tag. Если два правила конфликтуют, побеждает с большей специфичностью. `!important` перекрывает всё (использовать осторожно).
8. Что такое media query?
Условие для применения CSS при определённых параметрах устройства: `@media (max-width: 768px) { ... }`. Основа адаптивной вёрстки. Mobile-first подход: пишут базовые стили для мобильного, потом расширяют через `min-width`.
JavaScript — основы
9. Что такое замыкание (closure)?
Функция, которая запоминает переменные из внешней области видимости. Классический пример — счётчик:
```js
function counter() {
let count = 0;
return () => ++count;
}
const inc = counter();
inc(); // 1, inc(); // 2
```
10. Чем `var`, `let`, `const` отличаются?
`var` — функциональная область видимости, hoisting, нет блочной области. `let` — блочная область, нет hoisting значения. `const` — блочная, нельзя переприсвоить (но объект можно мутировать).
11. Что такое hoisting?
Поднятие объявлений в начало области видимости на этапе компиляции. `var` и объявления функций поднимаются. `let` и `const` — в «temporal dead zone» до строки объявления.
12. Объясните `this` в JavaScript.
Контекст зависит от способа вызова: в методе объекта — объект. В обычной функции (строгий режим) — `undefined`, иначе — `window`. В стрелочной функции — `this` из внешнего контекста. `call`, `apply`, `bind` — явная установка.
13. В чём разница между `==` и `===`?
`==` — нестрогое равенство, приводит типы (`"0" == 0` → true). `===` — строгое, без приведения типов (`"0" === 0` → false). Всегда используйте `===`.
14. Что такое Event Loop?
Механизм, позволяющий JavaScript быть однопоточным, но асинхронным. Call Stack выполняет синхронный код. Когда он пуст, Event Loop берёт задачи из очереди (microtasks — Promise, потом macrotasks — setTimeout).
15. Чем Promise отличается от async/await?
`async/await` — синтаксический сахар над Promise. `await` приостанавливает выполнение async-функции до разрешения Promise, делая асинхронный код похожим на синхронный. Под капотом — те же Promise.
16. Что такое прототипное наследование?
В JavaScript каждый объект имеет `[[Prototype]]` — ссылку на другой объект. При обращении к свойству, которого нет в объекте, поиск идёт по цепочке прототипов. Классы ES6 — синтаксический сахар над прототипами.
17. Что такое деструктуризация?
Удобный способ извлечь значения из объектов/массивов:
```js
const { name, age } = user;
const [first, ...rest] = arr;
```
Работает в параметрах функций, import.
18. Что такое spread и rest операторы?
`...` в разных контекстах: rest собирает аргументы в массив (`function f(...args)`). Spread разворачивает итерируемое: `[...arr1, ...arr2]`, `{...obj1, ...obj2}`.
19. Что такое `Array.prototype.map`, `filter`, `reduce`?
`map` — трансформирует каждый элемент, возвращает новый массив. `filter` — оставляет элементы, для которых callback вернул true. `reduce` — сворачивает массив в одно значение, применяя аккумулятор.
20. Что такое `null` и `undefined`?
`undefined` — переменная объявлена, но не присвоена; функция без return. `null` — явное отсутствие значения, присваивается намеренно. `typeof null === "object"` — историческая ошибка.
Работа с браузером и DOM
21. Что такое DOM?
Document Object Model — дерево объектов, представляющее HTML-документ. JavaScript взаимодействует с HTML через DOM API: `document.querySelector`, `element.addEventListener`, изменение атрибутов и текста.
22. Что такое event delegation?
Вместо установки обработчика на каждый элемент — один обработчик на родителя. События «всплывают» (bubbling) от потомка к предкам. Эффективнее для динамических списков.
23. Объясните event bubbling и capturing.
Bubbling — событие сначала срабатывает на цели, затем всплывает к родителям (по умолчанию). Capturing — событие перехватывается при спуске от корня к цели (`addEventListener('click', fn, true)`). `stopPropagation()` останавливает распространение.
24. Что такое `localStorage` и `sessionStorage`?
Хранилища в браузере для строковых данных. `localStorage` — сохраняется до явной очистки. `sessionStorage` — до закрытия вкладки. Обе синхронные, ≈5MB. Не используйте для чувствительных данных.
25. Что такое CORS?
Cross-Origin Resource Sharing — механизм безопасности браузера. Запрос к другому домену блокируется, если сервер не вернул нужные заголовки `Access-Control-Allow-Origin`. Настраивается на сервере, не в JS.
React
26. Что такое Virtual DOM?
React хранит виртуальное представление DOM в памяти. При изменении состояния — сравнивает новый Virtual DOM со старым (diffing), находит минимальный набор изменений и обновляет реальный DOM.
27. Что такое компонент в React?
Функция или класс, возвращающий JSX. Функциональные компоненты с хуками — современный стандарт. Props — данные снаружи (только чтение). State — внутреннее состояние компонента.
28. Объясните `useState`.
Хук для управления локальным состоянием: `const [count, setCount] = useState(0)`. `setCount` вызывает перерендер компонента. State обновляется асинхронно.
29. Что делает `useEffect`?
Хук для побочных эффектов (запросы к API, подписки, работа с DOM). Зависимости в массиве определяют когда эффект запускается: `[]` — только при монтировании, `[dep]` — при изменении dep. Return — функция очистки.
30. Что такое `useMemo` и `useCallback`?
Хуки мемоизации. `useMemo` кэширует результат вычисления. `useCallback` кэширует функцию. Оба пересчитываются при изменении зависимостей. Используйте только при реальной проблеме производительности.
31. Что такое `useRef`?
Хук для хранения изменяемого значения, которое не вызывает перерендер при изменении. Используется для доступа к DOM-элементам и хранения предыдущих значений.
32. Что такое props drilling?
Передача props через несколько уровней компонентов к целевому. Проблема читаемости и обслуживания. Решения: Context API, state management (Redux, Zustand), composition.
33. Что такое React Context?
Способ передать данные глубоко в дерево компонентов без props drilling. `createContext`, `Provider`, `useContext`. Подходит для темы, локали, данных пользователя.
34. Что такое key в списках React и зачем?
Уникальный идентификатор элемента в списке. Помогает React при diffing понять, какие элементы добавились/удалились. Не использовать индекс массива как key при изменяемых списках.
35. Что такое controlled и uncontrolled компонент?
Controlled — React управляет значением формы через state. Uncontrolled — значение живёт в DOM, доступ через `ref`. Controlled — рекомендуемый подход для форм в React.
TypeScript
36. Зачем TypeScript?
Статическая типизация. Ошибки находятся на этапе компиляции, а не в рантайме. IDE показывает подсказки, автодополнение. Рефакторинг безопаснее. Особенно полезен в больших командах.
37. Чем `interface` отличается от `type`?
`interface` — для объектов, можно расширять через `extends`, merge declarations. `type` — более гибкий: объединения, пересечения, примитивы. Для объектов — можно использовать оба; `interface` чуть предпочтительнее.
38. Что такое `any` и почему его лучше избегать?
`any` отключает проверку типов для переменной. Теряется смысл TypeScript. Используйте `unknown` (требует явную проверку типа перед использованием) или конкретные типы.
Инструменты и экосистема
39. Что такое Vite и зачем?
Современный инструмент сборки. Использует native ES modules в dev-режиме — нет медленной пересборки. Производительнее webpack для большинства проектов. Используется для React, Vue.
40. Что такое npm и package.json?
`npm` — менеджер пакетов Node.js. `package.json` — манифест проекта: имя, версия, зависимости (`dependencies`, `devDependencies`), скрипты (`npm run dev`). `package-lock.json` фиксирует точные версии.
FAQ
Нужно ли знать Redux для junior-стажировки?
Базово — понимать концепцию (store, actions, reducers). Глубокое знание — не обязательно. Многие компании используют Zustand или Context. Важнее хорошо знать React hooks.
Как проходит техническое интервью frontend?
Обычно: вопросы по JS и React (30–40 мин) + задача на код — написать компонент или функцию. Реже — алгоритмические задачи LeetCode Easy. Полная подготовка — в статье собеседование junior-разработчика.
Какие задачи на коде дают frontend-ам?
Написать функцию дебаунса/тротлинга, реализовать промисификацию, написать простой компонент с fetch данных. На LeetCode — задачи с массивами и строками.
Что важнее для найма: React или чистый JS?
Чистый JS важнее. Если не понимаете замыканий, this, async/await — React-знания не помогут. Большинство ошибок на собеседованиях — в базовом JS, не в React.
Полезен ли Next.js для junior-позиции?
Знание Next.js — плюс, но не обязательно. Сначала убедитесь в уверенном знании React. Дорожная карта: Roadmap Frontend-разработчика 2026.