← SkillCueВсе роли

Вопросы на собеседовании Frontend (JS/React): 17 вопросов с разбором

Frontend-интервью почти всегда идёт слоями: JavaScript-ядро → React → вёрстка → сеть и оптимизация. Ниже — вопросы, которые встречаются чаще всего, и что за каждым стоит.

JavaScript-ядро

1. Что такое замыкание? Пример из практики.

Функция + лексическое окружение места создания. Сильный ответ — практический: приватное состояние, дебаунс, фабрики обработчиков.

2. Event loop: что выведет код с setTimeout и Promise?

Синхронный код → все микрозадачи (промисы) → макрозадача (setTimeout). Потренируйтесь на 3–4 снippетах — это спрашивают в 8 из 10 интервью.

3. var / let / const и хойстинг?

var — функциональная область и hoisting с undefined; let/const — блочная и TDZ. Классика-ловушка: var в цикле с setTimeout.

4. == vs === ?

=== без приведения типов; правило — всегда строгое равенство. Пара примеров коварства ==: '' == 0, null == undefined.

5. Что такое this и от чего зависит?

От способа вызова: метод, обычный вызов, call/apply/bind, стрелочные берут this из окружения. Хотят таблицу случаев, а не «это сложно».

6. Промисы vs async/await; как обработать ошибки?

async/await — синтаксис над промисами; try/catch, Promise.all/allSettled для параллельности. Плюс: чем all отличается от allSettled на живом примере.

React

7. State vs props?

Props приходят сверху и неизменяемы для компонента, state — собственное изменяемое состояние. База; отвечать без пауз.

8. Зачем key в списках и почему индекс — плохо?

Ключи нужны реконсиляции; индекс ломает состояние при вставке/удалении элементов. Второй по частоте React-вопрос.

9. useEffect: зависимости, очистка, типичные баги?

Запуск после рендера, deps — когда перезапускать, cleanup перед повтором и при размонтировании. Расскажите про бесконечный цикл из-за объекта в deps — покажет практику.

10. Когда нужен useMemo/useCallback, а когда это преждевременная оптимизация?

Дорогие вычисления и стабильность ссылок для memo-детей; по умолчанию — не нужен. Ответ «оборачиваю всё» — красный флаг.

11. Как бы вы организовали состояние приложения (локальное vs глобальное)?

Локальное — по умолчанию; глобальное (Redux/Zustand/Context) — для действительно общего. Критерии выбора важнее названия библиотеки.

Вёрстка

12. Flexbox vs Grid — когда что?

Flex — одномерные ряды/колонки, Grid — двумерные раскладки. Пример: карточная сетка — grid, панель кнопок — flex.

13. Специфичность селекторов, как решаете конфликты?

inline > id > класс/атрибут > тег; предсказуемость через методологию (БЭМ/модули) вместо !important. !important как норма — красный флаг.

14. Как сделать адаптивную вёрстку?

Мобайл-фёрст, media queries, относительные единицы, clamp(), картинки с srcset. Достаточно системы, не всех единиц наизусть.

Сеть и оптимизация

15. Что происходит после ввода URL до отрисовки страницы?

DNS → TCP/TLS → запрос → HTML → парсинг → CSSOM/DOM → рендер; блокирующие ресурсы. Любимый вопрос на понимание всей цепочки; 2-минутная версия наготове.

16. Как ускорить медленную страницу?

Профилирование (Lighthouse/DevTools) → код-сплиттинг, lazy-загрузка, кэширование, сжатие картинок, меньше ререндеров. Начать с «сначала измеряю» — уже половина правильного ответа.

Про вас

17. Самая сложная задача на фронте?

История: контекст → проблема → решение → результат (цифры, если есть). Подготовьте 2 истории заранее — они закрывают половину поведенческих вопросов.

Это общий список. А что спросят именно на вашем собеседовании?

Пришлите текст вакансии — бесплатно вернём вероятные вопросы по ней, риски и слабые темы. А в приложении SkillCue — тренировка ответов и подсказки прямо во время созвона.

Разобрать мою вакансию бесплатно