Технічна співбесіда на Junior Frontend — 40 реальних питань з відповідями

Двоє людей розмовляють за столом у світлому офісі — технічна співбесіда

На DOU є легендарна добірка «400+ запитань для Front-end розробника». Вона чудова — і абсолютно непідйомна для джуніора: вивчити 400 відповідей неможливо, а головне — не потрібно.

Секрет у тому, що реальна співбесіда на Junior крутиться навколо 30–50 повторюваних питань. Я зібрав 40 найчастіших — але з важливим доповненням: до кожного питання пояснюю, що інтерв'юер насправді перевіряє. Бо "знати відповідь" і "розуміти, навіщо питають" — це різниця між заученим текстом і розмовою рівних.

Одразу порада: не зубри. Прочитай, знайди питання, де ти "плаваєш", і закрий прогалини уроками. Це швидше і чесніше.

HTML і основи вебу (питання 1–6)

1. Чим відрізняються <div> і <span>? div — блоковий елемент (займає всю ширину, починається з нового рядка), span — рядковий (тече в тексті). Перевіряють: розумієш box model хоча б на рівні "блок vs рядок".

2. Навіщо семантичні теги (header, nav, article), якщо є div? Доступність (скрінрідери навігують по ландмарках), SEO, читабельність коду. Перевіряють: чи писав ти щось для людей, а не тільки "щоб працювало".

3. Що таке атрибут alt і чому він обов'язковий? Текстовий опис зображення: для незрячих користувачів, при падінні завантаження, для пошуковиків. Це питання-фільтр на культуру доступності.

4. Чим <button> відрізняється від <div onclick=...>? Кнопка з коробки доступна з клавіатури, має фокус, роль для скрінрідера і submit-поведінку у формі. Перевіряють: чи знаєш, скільки безкоштовного дає нативний HTML.

5. Що таке DOCTYPE? Інструкція браузеру рендерити сторінку в стандартному режимі, а не в quirks mode (режимі сумісності з помилками 90-х). Питання-бонус: мало хто з джунів знає про quirks mode — згадаєш і виділишся.

6. Різниця між id і class? id унікальний на сторінці, class повторюваний; елемент може мати багато класів. Базовий фільтр — на ньому "сипляться" ті, хто вчив тільки фреймворки.

CSS (питання 7–14)

7. Поясни box model. Кожен елемент — коробка: content → padding → border → margin. Плюс обов'язково згадай box-sizing: border-box — з ним width включає padding і border. Найчастіше CSS-питання співбесід. Взагалі. Деталі — в уроці про Box Model.

8. Чим display: none відрізняється від visibility: hidden та opacity: 0? none — елемента немає в потоці; hidden — невидимий, але місце займає; opacity: 0 — прозорий, місце займає І події ловить. Перевіряють глибину: три способи "сховати" з різними наслідками.

9. Що таке специфічність селекторів? Система ваг: inline-стилі > id > класи/атрибути/псевдокласи > теги. При конфлікті виграє специфічніший селектор, при рівності — останній у коді. Перевіряють: чи зможеш дебажити "чому мій стиль не застосувався" без !important.

10. Flexbox vs Grid — коли що? Flexbox — один вимір (ряд або колонка), вміст диктує розміри. Grid — два виміри, макет диктує вмісту. Ми розібрали це на 10 реальних прикладах. Улюблене питання 2020-х: перевіряє практику верстки.

11. Як відцентрувати div? Назви два способи впевнено: display: grid; place-items: center і flexbox з justify-content + align-items. Якщо попросять більше — є ціла стаття з 10 способами. Класика-мем, але ставлять досі.

12. Що таке позиціонування: relative, absolute, fixed, sticky? relative — зсув відносно свого місця (і контекст для absolute-дітей); absolute — відносно найближчого позиціонованого предка; fixed — відносно вікна; sticky — гібрид scroll + fixed. Перевіряють: розумієш потік документа чи розставляєш числа навмання.

13. Що таке media queries і mobile-first? @media (min-width: ...) — стилі за умовою. Mobile-first: базові стилі для мобільного, розширення через min-width. Перевіряють: чи верстав ти хоч раз під реальні екрани.

14. Rem vs px vs % — у чому різниця? px — абсолютні; rem — від кореневого font-size (масштабується з налаштуваннями користувача); % — від батька. Питання про доступність у масці питання про одиниці.

JavaScript (питання 15–30)

15. var, let, const — різниця? var — function scope, спливає (hoisting) з undefined; let/const — block scope, temporal dead zone; const — без переприсвоєння (але об'єкт мутувати можна!). Перше JS-питання на 90% співбесід. Останнє уточнення в дужках — те, на чому валяться.

16. Які типи даних є в JavaScript? 7 примітивів: string, number, boolean, null, undefined, symbol, bigint — плюс object. Бонус, який цінують: typeof null === "object" — найвідоміший баг мови, що живе з 1995 року.

17. == vs ===? == приводить типи перед порівнянням ("5" == 5 — true), === порівнює без приведення. Правило: завжди ===. Фільтр базової гігієни коду.

18. Що таке hoisting? Оголошення (function declaration, var) "спливають" на початок області видимості до виконання коду. Тому функцію можна викликати до її оголошення. Перевіряють: розумієш дві фази виконання JS (парсинг → виконання).

19. Що таке замикання (closure)? Функція "пам'ятає" змінні з місця, де була створена, навіть після завершення зовнішньої функції. Приклад: лічильник через функцію-фабрику. Топ-3 JS-питання всіх часів. Готуй приклад коду напам'ять — просити написати будуть.

20. Що виведе setTimeout у циклі з var? (класика)

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 3, 3, 3 — а не 0, 1, 2!

Через var всі колбеки ділять одну змінну. Лікується let (своя змінна на ітерацію). Питання-комбо: перевіряє scope + event loop одним пострілом.

21. Поясни Event Loop. Стек викликів, черги макро- і мікрозадач, правило "мікрозадачі виконуються всі, макро — по одній". Розгорнуто — у статті про Event Loop. Головне питання про асинхронність. Порядок log-ів із setTimeout і Promise просять розписати майже завжди.

22. Що таке Promise і його стани? Об'єкт-обіцянка майбутнього результату: pending → fulfilled або rejected. Методи .then/.catch/.finally, статичні Promise.all/race. Перевіряють: чи готовий ти до реального коду, який весь на промісах. Урок: Promises.

23. async/await — це що під капотом? Синтаксичний цукор над промісами: async функція повертає Promise, await "розгортає" його значення, помилки ловляться try/catch. Питання-зв'язка: показує, чи бачиш ти єдину систему за різним синтаксисом.

24. Чим null відрізняється від undefined? undefined — "значення не присвоєне" (мова ставить сама), null — "значення свідомо порожнє" (ставить розробник). Дрібниця, яка показує акуратність мислення.

25. Що таке this? Контекст виклику функції: у методі — об'єкт до крапки, у звичайній функції — undefined (strict) або window, у стрілочній — береться з місця створення. Питання-джокер: повну відповідь не дає майже ніхто, але впевнене "стрілочні не мають свого this" — вже сильно.

26. Стрілочні функції vs звичайні? Коротший синтаксис, немає свого this і arguments, не можуть бути конструкторами. Найчастіше уточнення після питання 25.

27. map, filter, reduce — що робить кожен? map — трансформує кожен елемент (нова довжина = стара), filter — відбирає за умовою, reduce — згортає в одне значення. Просять на live coding постійно: "поверни імена користувачів, старших за 18". Тренуйся на уроці про масиви.

28. Що таке деструктуризація і spread? const { name } = user — витягання властивостей; [...arr] — розгортання/копіювання. Бонус: spread робить поверхневу копію. Слово "поверхнева" — маркер, що ти працював з реальними багами.

29. Як скопіювати об'єкт? Spread або Object.assign — поверхнево; structuredClone(obj) — глибоко. Питання про глибоку/поверхневу копію — пастка для завчених відповідей: вкладені об'єкти лишаються спільними.

30. Що таке JSON і чим відрізняється від об'єкта JS? Текстовий формат обміну даними; JSON.parse/JSON.stringify для конвертації. У JSON немає функцій, undefined, коментарів; ключі тільки в подвійних лапках. Перевіряють: чи готовий ти працювати з API.

Браузер, мережа, інструменти (питання 31–35)

31. Що відбувається, коли вводиш URL і тиснеш Enter? DNS → TCP/TLS-з'єднання → HTTP-запит → відповідь сервера → парсинг HTML → завантаження ресурсів → рендеринг. На джуна достатньо цих кроків без глибини. Питання-панорама: показує системність мислення. База — в уроці як працює веб.

32. Які методи HTTP знаєш і чим GET відрізняється від POST? GET — отримати (параметри в URL, кешується), POST — створити/надіслати (тіло запиту). Плюс PUT, PATCH, DELETE. Перевіряють готовність до роботи з REST API.

33. Що таке localStorage і чим відрізняється від cookies? localStorage — 5–10 МБ, живе назавжди, не їде на сервер; cookies — ~4 КБ, автоматично додаються до кожного запиту, мають строк життя. Практичне питання: у 90% продуктів є "запам'ятати щось у браузері".

34. Навіщо DevTools і якими вкладками користуєшся? Console (логи, помилки), Elements (DOM і стилі наживо), Network (запити, статуси, час), Application (storage). Питання-детектор реального досвіду: хто верстав — той дебажив.

35. Що таке Git і що робить git merge? Система контролю версій; merge об'єднує гілки, створюючи коміт із двома батьками. Хочеш вразити — розкажи, що таке гілка насправді. Git питають навіть на суто фронтендних позиціях — завжди.

Поведінкові питання (36–40)

Тут немає "правильних" відповідей — але є структура, яку чекають.

36. Розкажи про свій проєкт. Формула: що робить → стек → найскладніша проблема і як розв'язав → що зробив би інакше. 2–3 хвилини, не 15. Це найважливіше питання співбесіди: воно показує все одразу. Відрепетируй вголос.

37. Як дієш, коли не знаєш, як розв'язати задачу? Чесна послідовність: читаю помилку → документація → гуглю/питаю AI → мінімальний відтворюваний приклад → питаю колегу з конкретним контекстом. Перевіряють: не "чи все ти знаєш", а чи не зависнеш мовчки на тиждень.

38. Чому саме фронтенд? Особиста історія + конкретика ("подобається миттєвий візуальний результат") краща за "перспективна галузь". Фільтр мотивації: людей, які "просто в IT за грошима", видно одразу.

39. Питання про зарплатні очікування. Назви вилку, спираючись на реальні дані ринку, і додай: "відкритий до обговорення". Мовчати або "скільки дасте" — слабка позиція. Перевіряють адекватність очікувань, а не торгуються (зазвичай).

40. "Є питання до нас?" — ЗАВЖДИ є. Мінімум два: "Як виглядає перший місяць джуна у вас?" і "Хто буде моїм ментором / як влаштовано код-рев'ю?". Відсутність питань читається як відсутність інтересу. Це реально впливає на рішення.

Як з цим працювати: план на 2 тижні

1. Пройдись по списку і виділи "плаваючі" теми. Чесно: не "начебто знаю", а "поясню без підглядання".
2. Закрий прогалини уроками, не заучуванням відповідей: JavaScript-базa, просунутий JS, CSS.
3. Питання 19, 20, 21, 27 — потренуй руками в консолі. Їх просять писати, не розказувати.
4. Питання 36 відрепетируй вголос двічі. Серйозно, вголос. Перший раз буде жахливо — краще хай це станеться вдома.

Часті питання

Співбесіда — це не іспит, де треба знати все. Це розмова, де перевіряють базу, мислення і чи не страшно з тобою працювати. 40 питань вище — твоя мапа підготовки: пройди по ній чесно, і на самій співбесіді сюрпризів майже не буде.

Прогалини знайшлися? Ось повна програма курсу — від основ до React і Next.js, безкоштовно і українською.