Ми зібрали великий перелік зі 170 питань на співбесіду з JavaScript для спеціалістів різних ґрейдів — Junior, Middle, Senior. Він охоплює такі теми як основи JavaScript, фронтенд, бекенд, безпека, архітектура та фреймворки. На технічних інтервʼю ставлять лише невелику частину питань із цього переліку, але він буде корисним для підготовки до співбесіди та допоможе виявити прогалини в знаннях.
Олександр Барило, Full Stack Developer в Boosters та Микита Мачехін, Node.js Developer в OBRIO, які проводять співбесіди у своїх компаніях, поділилися, чим відрізняються інтервʼю на різні позиції. А також пояснили, для чого на співбесідах питати те, що не використовується на практиці, та чи можна обійтися без тестових завдань.
Питання для Junior Developer
Технічне інтервʼю зазвичай триває близько години. За цей час мають перевірити хард- і софт-скіли кандидата. Інтервʼюєри починають із базових загальних питань щодо мови програмування JavaScript, поступово ускладнюючи їх. Далі переходять до нішевих питань із фронтенду або бекенду — іноді їх ставлять різні спеціалісти. У бекенді обовʼязково перевіряють знання про бази даних, архітектуру, безпеку. У фронтенді — про HTML, CSS, JavaScript тощо.
Іноді розробники жаліються, що на співбесідах питають здебільшого теорію. І частина тем вкрай рідко використовується на практиці. Але самі ці питання дозволяють визначити базовий рівень кандидата, з чим він стикався, а також його бажання приєднатися саме до цієї команди.
«Рівень підготовки до співбесіди показує, на скільки кандидат вмотивований. Ти можеш бути класним розробником, але як ми це визначимо, якщо ти не можеш витратити час на підготовку до співбесіди? Смішно, але навіть коли в деяких компаніях заздалегідь скидають питання, все одно чимало кандидатів приходять на інтервʼю непідготовленими — ділиться Олександр Барило, Full Stack Developer в Boosters. — Також теоретичні питання допомагають запобігти неприємним сюрпризам, коли ви найняли джуна, а він не знає, що таке система контролю версій (а це має знати кожен розробник)».
Закінчує інтервʼю блок запитань з технологічного стека, з якими працює компанія. «Ця частина інтервʼю дуже відрізняється в кожній компанії. Але навіть, якщо кандидат не ідеально знає деякі фреймворки — це те, з чим він може розібратися під час онбордингу.
Чим більш кастомні питання, тим меншу вагу вони мають» — пояснює Микита Мачехін, Senor Node.js Developer в OBRIO.
Основи JavaScript
1. Що таке оператор &&?
2. Для чого використовується оператор ||?
3. У чому різниця між операторами == та ===?
4. Для чого використовується оператор "!!"?
5. Що таке use strict і як використовується?
6. Що таке тернарний оператор?
7. Для чого використовуються оператори break і continue у JavaScript?
8. У чому різниця між spread- та rest-оператором?
9. Навіщо використовується оператор new?
10. Навіщо служить оператор for... in?
11. Чому результатом порівняння двох однакових обʼєктів є false?
12. Що таке область видимості (Scope)?
13. Що таке arguments?
14. Що таке шаблонні літерали Template Literals?
15. Як визначити наявність поля в обʼєкті?
16. Як можна клонувати обʼєкт?
17. У чому різниця між var, const та let?
18. Що таке клас у JavaScript?
19. Чим клас відрізняється від обʼєкта JS?
20. JavaScript – це типізована мова?
21. Як визначити, чи заморожено обʼєкт?
22. Як перевірити, чи є число кінцевим?
23. Що робить метод eval()?
24. Що таке NaN? Як перевірити, що змінна дорівнює NaN?
25. Що таке деструктуризація?
26. Як перевірити, чи існує підрядок у рядку?
27. Що таке тимчасова мертва зона?
28. Для чого призначені методи setTimeout та setInterval?
29. Що таке типи посилань?
30. У яких випадках застосовуються анонімні функції?
31. Що повертає promise?
32. У чому відмінність promise від callback?
33. У чому різниця між атрибутами та властивостями?
34. Що таке файли cookie у JavaScript?
35. У чому різниця між localStorage, файлами cookie та sessionStorage?
36. Яка різниця між параметрами та аргументами?
37. Що таке деструктуризація обʼєкта (Object Destructuring)?
38. Що таке модулі (Modules)?
39. Що таке обʼєкт Set?
40. Що таке параметри за замовчуванням (Default Parameters)?
41. Що таке обʼєктна обгортка (Wrapper Objects)?
42. Що робить конструкція try...catch?
43. Що таке XSS?
44. Навіщо використовується WeakSet?
45. У чому різниця між Set та WeakSet?
46. Які методи доступні у WeakSet?
47. Навіщо використовується WeakMap?
48. У чому різниця між Map та WeakMap?
49. Які методи доступні у WeakMap?
50. Що таке рекурсія?
51. Навіщо використовується метод seal()?
52. У чому головна відмінність методів Object.keys(), Object.values() та Object.entries()?
53. Що таке ціль події чи цільовий елемент (event.target)?
54. Що таке поточна мета події (event.current Target)?
Дані
55. Які існують типи даних у JS?
56. Що спільного між null та undefined?
57. У чому різниця між undefined та is not defined?
58. Розкажіть коротко про Symbol?
59. Що таке JSON?
60. Що робить JSON.stringify()?
61. Методи перетворення простих примітивних типів даних в число?
62. Як можна клонувати масив?
63. Як перевірити, чи є обʼєкт масивом?
64. Як можна додати елемент на початок і в кінець масиву?
65. Назвіть методи масивів (які згадаєте)?
66. Знайти перетин двох масивів?
67. Як можна викликати методи масиву на arguments через call, apply?
68. Як би ви реалізували метод Array.prototype.map?
69. Як би ви реалізували метод Array.prototype.filter?
70. Як би ви реалізували метод Array.prototype.reduce?
Функції
71. Що таке IIFE або Immediately Invoked Function Express?
72. Що таке функції найвищого порядку (Higher Order Functions)?
73. У чому різниця між function expression та function declaration?
74. У чому різниця між class і function constructor?
75. Що таке Hoisting?
76. Як використовується метод Function.prototype.apply?
77. Як використовується метод Function.prototype.call?
78. Як використовується метод Function.prototype.bind?
79. Що таке this?
80. Що таке функція зворотного виклику (Callback Function)?
81. Що таке замикання (Closures)?
82. Навіщо потрібна функція fetch?
83. Як організувати інкапсуляцію через замикання?
84. Що таке чиста функція?
85. У чому різниця між звичайною функцією та функціональним виразом?
86. Що таке Arrow Functions?
Фронтенд
87. Що таке Document Object Model?
88. Які теги зʼявились в HTML5?
89. Як відбувається центрування блоку по вертикалі?
90. Назвіть погані практики в HTML?
91. Що таке BEM?
92. Які існують способи CSS оптимізації?
93. Що таке Media Queries?
94. Що таке Box Object Model?
95. Поясніть, що таке псевдокласи (first-child, last -child, active, checked), псевдоелементи (before, after) та псевдоселектори (hover)?
96. Що таке calc, vh, vw, rem, em?
97. Які ви знаєте способи організації трьохколоночного лейаута?
98. Що таке Flexbox?
99. Для чого потрібні margin, padding, positioning?
100. Що таке Float?
101. Що таке Sticky footer та footer always on bottom?
102. Що таке поширення події (Event Propogation)?
103. Що таке спливання події (Event Bubbling)?
104. Що таке занурення події (Event Capturing)?
105. У чому різниця між методами event.preventDefault() та event.stopPropagation()?
106. Як дізнатися про використання методу event.preventDefault()?
React
107. Що відбувається, коли ви викликаєте setState?
108. Що таке refs в React?
109. Що таке keys в React та в чому їхнє значення?
110. У який момент життєвого циклу застосовуються запити AJAX і чому?
111. Опишіть, як в React обробляються події?
112. Який другий аргумент можна опціонально передавати в setState і як це зробити?
113. Як правильно звернутись до поточного стану при виклику setState?
114. Яку задачу вирішує React?
115. Як організовується потік даних у React через дерево компонентів?
Питання для Middle/Senior Developer
Питання для спеціалістів рівнів Middle та Senior зачіпають здебільшого ті самі теми, але стосуються більше досвіду кандидата, під які завдання він заточений, чи розуміється на архітектурі. Хард-скіли для обох ґрейдів визначають приблизно однаковими запитаннями. Межа між ними досить розмита, хоча від сеньйора очікують глибших знань та комплексних рішень, які можуть легко масштабуватися. Загалом різниця між цими ґрейдами — скоріше в софт-скілах, вміння керувати командою тощо.
«Ми моделюємо ситуації й питаємо, як би він виконав те чи інше завдання — реалізував якусь функціональність, побудував логіку відновлення пароля, налагодив взаємодію з фронтом, взаємодію з сервісами (Facebook, TikTok). Відповіді дадуть зрозуміти, чи може людина під ключ розвʼязати конкретну задачу» — каже Микита Мачехін.
«Замість тестових завдань, які ніхто не любить виконувати, ми часто проводимо простий лайфкодінг. Здебільшого це приклад коду та питання: що відбудеться? Такий підхід показує стресостійкість кандидата, як він поводить себе, коли помиляється. Одразу видно його сильні та слабкі сторони. Є ряд задач від простих до складних, які дають можливість подивитися, як кандидат мислить» — ділиться Олександр Барило.
Загальні питання
116. Що таке Event Loop?
117. У чому різниця між forEach і map?
118. У чому різниця між оператором «in» та методом hasOwnProperty?
119. У чому різниця між proto та prototype?
120. У користувача вимкнено JavaScript у браузері. Як ми запустимо код у його браузері?
121. Чому type of null повертає object? Як перевірити, чи є значення null?
122. Що таке currying в JS?
123. Що таке promise object, promise methods?
124. В чому різниця між Gulp та Grunt?
125. Що таке module bundlers?
126. Як ви використовуєте GIT?
127. Що таке Vanila JS?
128. Чи є використання унарного плюса (оператор "+") найбільш видним способом перетворення рядка на число?
129. Що таке CORS і для чого він потрібен?
130. Чим відрізняється поведінка isNaN() і Number.isNaN()?
131. Чим async/await відрізняється від Promise?
132. Чому obj.someprop.x призводить до помилки?
133. У чому різниця між явним та неявним перетворенням чи приведенням до типу (Implicit and Explicit Coercion)?
134. Як перевірити, чи є значення масивом?
135. Як перевірити, що число є парним, без використання поділу по модулю чи поділу із залишком?
136. У чому різниця між методами Object.freeze та Object.seal?
137. Які прийоми роботи з асинхронним кодом у JS знаєте?
138. Що таке запамʼятовування чи мемоізація (Memoization)? Коли її варто використовувати?
139. Як би ви реалізували допоміжну функцію запам'ятовування?
140. Як видалити дублікати з масиву?
141. Як перевірити, що обʼєкт порожній?
142. У чому різниця між обʼєктом та мапом у JS?
143. Чи є req, потрібно додати наскрізне поле, як?
144. Як працювати з вбудованими Node.js функціями реалізованими через callback інтерфейс в async/await стилі?
145. Розкажіть про досвід налаштування інструментів Webpack, Jest, Eslint?
Бази даних
146. Припустимо в базах даних зберігається список товарів, їх вартість та категорія. Як швидко для кожного товару отримати його порядковий номер у його категорії у списку вартості?
147. Допустимо до нашої моделі для кожного товару додається рік та місяць його постачання. Як отримати суму вартості всіх товарів у всіх можливих розрізах – категорія, рік постачання, місяць постачання?
148. Навіщо потрібна нормалізація?
149. У якому порядку бази даних видають записи з таблиці?
150. Яка структура даних дозволить індексувати географічні дані?
151. Чи можна використовувати Kd tree для трьохмірного простору?
152. Різниця між WHERE and HAVING
153. Припустимо, що клієнти стали дуже довго чекати відповіді від сервера. Існує припущення, що проблема з продуктивністю БД. Як перевірятимеш цю гіпотезу?
154. Які подальші дії робитимеш?
155. Як працює Garbage Collector?
Безпека
156. Як швидко дізнатися, що в якомусь із пакетів, які ми використовуємо в проєкті, виявлена вразливість безпеки?
157. Паролі в базах даних: шифруються, кодуються чи хешуються?
158. Чи підійде, наприклад, SHA256 для шифрування паролів?
159. Припустимо, у нас використовується застарілий алгоритм хешування для паролів, нам потрібно оновити це на новий алгоритм. Як це зробити?
160. Чи можна робити прехеш паролів перед тим, як хешувати їх через KDF?
161. TLS – як працює, як підтверджується кореневий сертифікат?
162. Яка проблема може виникнути, якщо ми використовуємо порівняння секретних даних, збережених у нас?
Архітектура
163. Назвіть основні принципи ООП?
164. Які ви знаєте патерни ООП у програмуванні?
165. В чому різниця між implements та extends?
166. В чому різниця між інтерфейсом та абстрактним класом в Typescript?
Live code
167. Є асинхронний метод, який повертає масив даних. Як отримати тип цих даних?
168. Що виведе цей код?
169. Як переписати код, щоб він вивів true?
170. Чи можливе використання implements ?
