Собеседование Junior Frontend охватывает HTML/CSS, базовый JavaScript, и — почти всегда — React. Вот 40 вопросов, которые реально задают на интервью в 2026 году.
HTML и CSS (вопросы 1–10)
1. Что такое семантический HTML?
Использование тегов по смыслу: `<header>`, `<nav>`, `<main>`, `<article>`, `<footer>` вместо `<div>` везде. Улучшает доступность, SEO и читаемость кода.
2. В чём разница между `id` и `class`?
`id` уникален на странице, `class` — нет. CSS: `#id` vs `.class`. По специфичности `id` сильнее. Для JS лучше использовать `data-` атрибуты или `class`.
3. Что такое блочная модель (box model)?
Каждый элемент — прямоугольник: content + padding + border + margin. `box-sizing: border-box` включает padding и border в ширину элемента.
4. Чем `display: block` отличается от `inline` и `inline-block`?
`block` — занимает всю ширину, начинается с новой строки. `inline` — по содержимому, нельзя задать width/height. `inline-block` — как inline, но можно задать размеры.
5. Как работает Flexbox?
Одномерная модель раскладки. Контейнер (`display: flex`) управляет размещением дочерних элементов по главной (`justify-content`) и поперечной (`align-items`) осям.
6. Чем Grid отличается от Flexbox?
Grid — двумерная раскладка (строки и колонки), Flexbox — одномерная. Grid лучше для общей структуры страницы, Flexbox — для компонентов и выравнивания элементов в одной оси.
7. Что такое специфичность в CSS?
Приоритет правил: inline styles (1000) > `#id` (100) > `.class, [attr], :pseudo` (10) > `tag` (1). При конфликте побеждает правило с большей специфичностью.
8. Что такое `z-index`?
Управляет порядком наложения позиционированных элементов по оси Z. Работает только для элементов с `position` не `static`.
9. Что такое `@media` query?
CSS-правила, применяемые при условии: ширина экрана, ориентация, разрешение. Основа адаптивной вёрстки: `@media (max-width: 768px) { ... }`.
10. Что такое CSS-переменные?
Кастомные свойства: `--color-primary: #007bff;`. Применяются: `color: var(--color-primary)`. Могут изменяться через JavaScript.
JavaScript (вопросы 11–25)
11. Что такое `var`, `let`, `const`? Чем отличаются?
`var` — функциональная область видимости, поднимается (hoisting), можно переопределить. `let` — блочная область, нельзя переопределить. `const` — блочная, нельзя переприсвоить (объект при этом изменяем).
12. Что такое hoisting?
Поднятие объявлений переменных и функций в начало области видимости до выполнения кода. `var` поднимается с `undefined`. `let/const` поднимаются, но не инициализируются (TDZ).
13. Что такое замыкание (closure)?
Функция, «помнящая» переменные из окружения, в котором была создана, даже после завершения этого окружения.
14. Что такое Event Loop?
Механизм выполнения кода в JS: call stack (синхронный код) → microtask queue (Promise) → macrotask queue (setTimeout, setInterval). Event loop проверяет очереди после каждого завершения стека.
15. Что такое Promise?
Объект, представляющий результат асинхронной операции. Состояния: pending, fulfilled, rejected. Методы: `.then()`, `.catch()`, `.finally()`. `Promise.all`, `Promise.race`, `Promise.allSettled`.
16. Чем `async/await` отличается от `.then()`?
Синтаксический сахар над Promise. `await` приостанавливает выполнение функции до завершения промиса. Код выглядит синхронно, ошибки ловятся через `try/catch`.
17. Что такое прототипное наследование?
Каждый объект имеет `__proto__` — ссылку на прототип. При обращении к свойству JS ищет его в объекте, потом по цепочке прототипов. `Object.prototype` — вершина цепочки.
18. Что такое `this` в JavaScript?
Контекст выполнения функции. В обычной функции зависит от вызова. В стрелочной — наследуется от внешнего контекста. В классе — экземпляр.
19. Что такое деструктуризация?
Извлечение значений из массива или объекта: `const { name, age } = user;` или `const [first, second] = arr;`.
20. Что такое spread и rest операторы?
`...` в разных контекстах. Spread — разворачивает итерируемое: `[...arr1, ...arr2]`. Rest — собирает оставшиеся элементы: `function f(a, b, ...rest)`.
21. Что такое `null` vs `undefined`?
`undefined` — переменная объявлена, но не инициализирована. `null` — намеренное отсутствие значения. `typeof null === 'object'` — известный баг JS.
22. Что такое `==` vs `===`?
`==` — нестрогое равенство с приведением типов: `0 == false` → true. `===` — строгое, без приведения: `0 === false` → false. Всегда используйте `===`.
23. Как работает `Array.map`, `filter`, `reduce`?
`map` — новый массив с преобразованными элементами. `filter` — новый массив с элементами, прошедшими условие. `reduce` — сворачивает массив в одно значение.
24. Что такое `localStorage` и `sessionStorage`?
Web Storage API. `localStorage` — хранит данные без срока. `sessionStorage` — только для текущей вкладки, очищается при закрытии. Хранят строки; для объектов — `JSON.stringify/parse`.
25. Что такое CORS?
Cross-Origin Resource Sharing. Политика браузера, запрещающая запросы с другого домена/порта/протокола без явного разрешения сервера (заголовок `Access-Control-Allow-Origin`).
React (вопросы 26–35)
26. Что такое Virtual DOM?
Лёгкое JS-представление реального DOM. При изменениях React сравнивает (reconciliation, diffing) и обновляет только изменившиеся узлы реального DOM.
27. Что такое JSX?
Синтаксическое расширение JS, позволяющее писать HTML-подобный код в JavaScript. Компилируется в `React.createElement()`.
28. В чём разница между state и props?
Props — данные, переданные компоненту извне (readonly). State — внутреннее состояние компонента, изменяется через `setState`/`useState`.
29. Что такое `useState`?
Хук для состояния функционального компонента. Возвращает пару: `[value, setValue]`. При вызове `setValue` компонент перерисовывается.
30. Что такое `useEffect`?
Хук для side effects: запросы к API, подписки, работа с DOM. Второй аргумент — массив зависимостей. `[]` — запуск один раз при монтировании. Возвращаемая функция — cleanup.
31. Что такое ключи (keys) в списках?
Уникальный идентификатор элемента в списке. Помогает React при reconciliation определить, какой элемент изменился/добавился/удалился. Не используйте индекс массива как ключ.
32. Что такое `useMemo` и `useCallback`?
`useMemo` — мемоизация результата вычисления. `useCallback` — мемоизация функции. Используются для оптимизации: предотвращают пересоздание при каждом рендере.
33. Что такое `Context API`?
Механизм передачи данных через дерево компонентов без пробрасывания через props. `createContext`, `Provider`, `useContext`.
34. Что такое управляемый и неуправляемый компонент (controlled/uncontrolled)?
Controlled — значение формы управляется state компонента. Uncontrolled — значение хранится в DOM, доступ через `ref`.
35. Что такое React.memo?
HOC для мемоизации компонента. Компонент не перерисовывается, если props не изменились (поверхностное сравнение).
Дополнительно (вопросы 36–40)
36. Что такое TypeScript и зачем он нужен?
Надмножество JavaScript со статической типизацией. Помогает находить ошибки на этапе разработки, улучшает читаемость и поддерживаемость кода.
37. Что такое HTTP-методы?
GET (получить), POST (создать), PUT (заменить), PATCH (обновить частично), DELETE (удалить). Важно для работы с REST API.
38. Что такое `debounce` и `throttle`?
debounce — вызывает функцию после паузы (ввод в поиске). throttle — не чаще одного раза в N мс (обработка скролла). Оба ограничивают частоту вызовов.
39. Что такое Web Accessibility (a11y)?
Доступность веб-контента для людей с ограниченными возможностями. Атрибуты `aria-*`, `alt`, `label`, семантические теги, навигация с клавиатуры.
40. Что такое SSR и SSG?
SSR (Server-Side Rendering) — HTML генерируется на сервере при каждом запросе (Next.js `getServerSideProps`). SSG (Static Site Generation) — HTML генерируется один раз при сборке. SSG быстрее, SSR актуальнее для динамических данных.
FAQ
Нужно ли знать TypeScript для junior frontend?
Желательно. Всё больше вакансий требуют TS. Базовые типы, интерфейсы, дженерики — достаточно.
Vue или React для первой работы?
React — больше вакансий и выше зарплаты. Vue проще для старта, но меньше возможностей.
---