300+ вопросов с собеседований по JavaScript. Часть 1, уровень — Junior

4
5362
views
javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

Сайт DOU.UA составил подборку актуальных вопросов по JavaScript, которые задают на технических собеседованиях. Публикуем перевод первой части этой статьи, где собраны вопросы для начинающих разработчиков.

Общие вопросы

1. Какие методы HTTP-запросов вы знаете?

2. Какие версии HTTP-протокола вам известны?

3. Какие знаете коды ответа (состояния) HTTP?

4. Что такое Cross-Origin Resource Sharing? Как устранить проблемы с CORS?

5. Что такое cookie?

6. Какой максимальный размер cookie?

7. Что означает директива use strict?

8. Чем JS отличается при работе с фронтендом и бэкендом?

9. Что такое статическая и динамическая типизации?

10. Как клиент взаимодействует с сервером?

11. Что такое REST?

12. Объясните понятие мутабельность/иммутабельность? Какие типы относятся к мутабельным и наоборот?

13. Как искать ошибки в коде? Используете ли дебаггер?

14. Каких известных людей из мира JS знаете?

JS Core

15. Какие в JS есть типы данных?

16. Как проверить, является ли объект массивом?

17. Как проверить, является ли число конечным?

18. Як проверить, что переменная равна NaN?

19. Чем отличается поведение isNaN() и Number.isNaN()?

20. Сравните ключевые слова var, let, const.

21. Что такое область видимости?

22. Что такое деструктуризация?

23. Для чего предназначены методы setTimeout и setInterval?

24. Сравните подходы работы с асинхронным кодом: сallbacks vs promises vs async/await.

25. Можно ли записывать новые свойства/функции в прототипы стандартных классов (Array, Object и т.д.)? Почему нет? В каких случаях это делать можно? Как обезопасить себя, если нужно расширить прототип?

26. Назовите методы массивов, которые помните, и скажите, для чего они нужны.

27. Какие вы знаете методы для переборки массива? Чем они отличаются друг от друга?

28. Как работают операторы присваивания/сравнения/строковые/арифметические/битовые и т.д.?

29. Опишите назначение и принципы работы с коллекциями Map и Set.

30. Что означает глубокая (deep) и поверхностная (shallow) копия объекта? Как сделать каждую из них?

Функции

31. В чем разница между декларацией функции (function declaration) и функциональным выражением (function expression)?

32. Что такое анонимная функция?

33. Расскажите о стрелочных функциях (arrow function). Чем стрелочные функции отличаются от обычных?

34. Что такое и для чего используют IIFE (Immediately Invoked Function Expression)?

35. Что такое hoisting, как он работает для переменных и функций?

36. Что такое замыкание (closure) и каковы сценарии его использования?

37. Как вы понимаете замыкания? Что будет выведено в консоли в этом случае?

var f = function() {
  console.log(1);
}

var execute = function(f) {
  setTimeout(f, 1000);
}

execute(f); // что выведет в консоль и почему

f = function() {
  console.log(2);
}

38. Что такое рекурсия?

39. Что означает ключевое слово this?

40. Что такое потеря контекста, когда она происходит и как ее предотвратить?

41. Методы функций bind/call/apply — зачем они нужны и чем отличаются?

Photo by Tracy Adams on Unsplash

Фронтенд

42. Что такое DOM?

43. Сравните атрибуты подключения скрипта async и defer в HTML-документе.

44. Чем отличаются свойства HTML-элементов innerHTML и innerText?

45. Опишите процесс всплытия (bubbling) событий в DOM.

46. Как остановить всплытие (bubbling) события?

47. Как остановить дефолтную обработку события?

48. Чему равен this в обработчике событий (event handler)?

49. Что такое LocalStorage и SessionStorage? Какой максимальный размер LocalStorage?

50. Как получить высоту блока? Его положение относительно границ документа?

51. Что такое webpack?

52. Чем отличается dev-сборка от prod?

Верстка

53. Что такое блочная модель CSS?

54. Какие способы центрирования блочного контента по горизонтали и вертикали вы знаете?

55. Какие подходы в верстке вам известны (float, flex, grid, etc)?

56. Как сделать приложение responsive?

57. Каковы принципы семантической верстки?

58. Зачем нужны префиксы для некоторых CSS-свойств (-webkit-, -moz- и т.д.)?

59. Как упростить написание кросс-браузерных стилей?

60. Практическое задание: прокомментировать и исправить пример плохого CSS или HTML.

61. Что такое CSS-препроцессоры? С какими вы работали? Что нового они приносят в стандартный CSS?

Angular

62. Перечислите основные компоненты фреймворка (модуль, роут, директива и т.п.).

63. В чем разница между компонентом и директивой?

64. Расскажите о жизненном цикле компонента.

65. Перечислите часто используемые хуки жизненного цикла компонента и расскажите, для чего они нужны.

66. В чем разница между конструктором и ngOnInit-хуком?

67. Как защитить роут от несанкционированного доступа? Какие механизмы предоставляет для этого фреймворк?

68. Что такое Lazy loading, как и для чего используется?

69. Каково назначение RouterOutlet?

70. Как компоненты могут взаимодействовать друг с другом?

71. Как создать two-way binding свойство для компонента?

72. Какие типы форм есть у фреймворка? Что и в каких случаях лучше использовать?

73. Какие у формы есть состояния и как это можно применить?

74. Зачем нужны сервисы? Как с ними работать?

Photo by Emil Priver on Unsplash

75. Что такое singleton-сервисы? Каково их назначение? Способ создания?

76. Каковы способы объявления сервисов?

77. Для чего нужны модули? Сколько их должно быть в проекте?

78. Зачем нужны общие модули (shared)?

79. Каковы преимущества типизации в TypeScript?

80. Какие возможности TypeScript можно использовать для типизации (здесь имеются в виду интерфейсы, типы, enum и т.д.)?

81. В чем разница между интерфейсом и классом?

82. А между интерфейсом и абстрактным классом?

83. А между интерфейсом и типом?

84. Что такое RxJS? Как он используется во фреймворке? Какие компоненты фреймворка тесно связаны с ним?

85. Чем отличаются Observable и Promise?

86. Для чего нужны Subjects? Какие типы Subjects существуют?

87. Как сделать несколько последовательных запросов к API с помощью HTTP-сервиса и RxJS?

88. В чем разница между switchMap, concatMap, mergeMap?

89. Как можно сконфигурировать Angular-приложение?

90. Зачем нужны environment-файлы? Когда их лучше не использовать?

91. В чем разница между «умным» (smart) и «глупым» (dumb) компонентами? В каких случаях применяется каждый из них?

92. В чем разница между NgForm, FormGroup и FormControl и как их применяют для построения форм?

93. Зачем нужен и как работает async pipe?

94. Как следить за развитием фреймворка? Каких известных людей, связанных с Angular, вы знаете/читаете?

React

95. Вы работали с классовыми компонентами? В чем их особенность?

96. Какие данные лучше хранить в состоянии компонента, а какие передавать через пропсы? Приведите пример.

97. Знакомы ли вы с хуками? В чем их преимущества? Приходилось ли делать свои и с какой целью?

98. Знакомы ли вы с фрагментами и порталами? Зачем они нужны?

99. Когда и для чего используют рефы?

100. Какие вы знаете методы жизненного цикла компонента?

101. В каком методе жизненного цикла компонента лучше делать запросы на сервер? Почему?

102. В каком методе жизненного цикла компонента лучше делать подписку и отписку от листенера? Почему? Зачем отписываться?

103. Был ли у вас опыт работы с контекстом? Когда его стоит использовать?

104. В чем особенность PureComponent?

105. Вы работали с мемоизированными селекторами (memoized selectors)? Для чего их используют и какой принцип их работы?

106. В чем видите преимущества библиотеки React?

107. Почему библиотека React быстрая? Что такое Virtual DOM и Shadow DOM?

108. Зачем в списках ключи? Можно ли делать ключами индексы элементов массива? Когда это оправдано?

109. В чем основная идея Redux?

110. Работа со стилями в React.

111. React — это библиотека или фреймворк? Чем отличаются эти два понятия?

112. Можно ли использовать jQuery вместе с React? Почему да/нет?

113. Что такое codemod?

114. Приходилось ли вам настраивать проект React с нуля? С помощью каких инструментов вы это делали?

115. Перечислите все библиотеки, которые использовали в связке с React.

116. Что самое сложное приходилось реализовывать с помощью React?

Photo by Aral Tasher on Unsplash

Бэкенд

117. Что такое REPL?

118. Что такое streams в Node.js?

119. Что такое middleware?

120. Для чего используют функцию setImmediate?

121. Зачем нужен app.param () в express?

122. Что такое token based authentication?

Базы данных

123. Напишите простой запрос для вычисления трех авторов, у которых больше всего книг.

124. Напишите запрос, который выбирает последние три комментария для конкретного пользователя для двух таблиц: комментарии и пользователи.

125. Спроектируйте простую схему базы данных для библиотеки.

126. Для чего используют SQL-оператор HAVING?

127. Зачем используют SQL-оператор LEFT JOIN?

128. Чем отличается embed- от reference-связи в MongoDB?

129. В одном проекте программисты сохраняют данные в MongoDB-коллекции комментариев, используя такие типы данных (смотрите ниже). Что плохого в этом решении?

id: ObjectID
text: string
author_id: string
created_at: Date

130. В проекте понадобилось внести изменения в структуру таблиц, добавить несколько полей и индексы. Как программисты будут делать это на продакшене?

Инструменты

131. Каждый раз, когда вы делаете pull, случается конфликт в последней строке во всех файлах, которые вы редактировали. Что происходит?

132. Что делает команда git fetch?

133. Какие git hygiene подходы вы знаете?

134. Что такое CI/CD? Для чего это нужно?

Практические задания

135. Расскажите, какие есть способы копирования простого объекта типа obj = {a: 1, b: 2, c: 3}

136. Напишите deep clone для объекта.

137. Назовите различные способы, как поменять местами значения двух переменных.

138. Менеджер попросил в задаче поменять статусы с «active, inactive» на «active, removed», но в коде фигурируют только цифры и непонятно, какой статус соответствует какой цифре. Как помочь будущим программистам не лезть в документацию по коду? Вопрос ставят на конкретном примере с кодом.

139. Нужно сделать минипроект — список пользователей с формой создания/редактирования пользователя:

  1. Для хранения пользователей используйте Firebase (это бесплатно).
  2. Для стилизации используйте Bootstrap.
  3. Минимальный набор полей пользователя:
    • имя;
    • фамилия;
    • электронная почта;
    • телефон (в формате +380 (XX) XXX-XX-XX)
    • дата рождения;
    • будет плюсом добавление аватара и возможность crop-картинки.
  4. Список пользователей должен иметь возможность фильтрации и пагинацию.
  5. Проект должен содержать README-файл с шагами для запуска.

4 КОММЕНТАРИИ

    • Во-первых, статья не просто скопирована, а переведена. Во-вторых, мы спрашивали разрешения у редакции DOU. В-третьих, мы не скрывали того, что это статья DOU — там в первом абзаце об этом написано прямым текстом, со ссылкой на источник.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here