300 с лишним вопросов с собеседований по JavaScript. Часть 2, уровни Middle и Senior

Сайт DOU.UA составил подборку актуальных вопросов, которые задают на технических собеседованиях по JavaScript. Мы уже публиковали перевод первой части этой статьи, с вопросами для разработчиков-джуниоров. Теперь представляем вам перевод вопросов для разработчиков уровня Middle и Senior.

Middle

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

1. Расскажите о пирамиде тестирования.

2. Какие типы автоматизированных тестов вам случалось писать? Какие библиотеки при этом использовали? Какие инструменты предпочитаете и почему?

3. Что такое unit-тесты? Какое место в пирамиде тестирования занимают unit-тесты?

4. Что такое code coverage? Обязательно ли 100% покрытие кода тестами?

5. Как запретить браузеру отдавать кэш на HTTP-запрос?

6. Что такое XSS (Cross-Site Scripting)?

7. Расскажите о паттернах Observer, Pub/Sub. Чем они отличаются? Приведите примеры реализации этих паттернов в известных фреймворках (библиотеках, браузерных API).

8. С какой целью может быть использован event listener события fetch self.addEventListener ( ‘fetch’, event => {})?

9. Что такое Event loop и как он работает? Расскажите о микрозадачах и макрозадачах.

JS Core

10. Какие типы данных бывают в JavaScript? Каким будет результат выполнения кода?

let firstObj = { name: 'Hello' };

let secondObj = firstObj;

firstObj = { name: 'Bye' };

console.log(secondObj.name);

11. Что такое temporal dead zone?

12. Как работает boxing/unboxing в JavaScript?

13. В чем разница между оператором in и методом hasOwnProperty?

14. Опишите, с помощью чего в JS реализуются такие ООП-парадигмы, как инкапсуляция, полиморфизм, абстракция?

15. Что такое прототип? Как работает прототипное наследование в JS? Объясните работу кода.

function Main () {}
Main.prototype = { protected: true };

const obj = new Main();
Main.prototype = { protected: false };

console.log('Object protection: ', obj.protected); 

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

17. Почему не стоит использовать конструкторы типа new String?

18. Расскажите о базовом устройстве и механизме работы Event loop.

19. Что такое записи (records) и кортежи (tuples)? Чем они отличаются от обычных объектов?

20. Каковы различия в поведении ES5 функции-конструктора и ES2015 класса?

21. Как реализовать паттерн «Модуль»?

22. Почему typeof null возвращает object?

23. Что такое приведение (преобразование) типов в JS?

24. Что такое явное и неявное приведение (преобразование) типов данных в JS? Как происходит преобразование типов в следующих примерах:

{}+[]+{}+[1]
!!"false" == !!"true"
['x'] == 'x'

25. Что такое Garbage Collector?

26. Опишите основные принципы работы «сборщика мусора» в JS-движках (engines).

27. Опишите назначение и принципы работы с коллекциями WeakMap и WeakSet. Чем они отличаются от коллекций Map и Set соответственно?

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

29. Что такое Promise? Назовите порядок выполнения then и catch в цепочке.

Promise.resolve(10)
  .then(e => console.log(e)) // ??
  .then(e => Promise.resolve(e))
  .then(console.log) // ??
  .then(e => {
    if (!e) {
      throw 'Error caught';
    }
  })
  .catch(e => {
    console.log(e); // ??
    return new Error('New error');
  })
  .then(e => {
    console.log(e.message); // ??
  })
  .catch(e => {
    console.log(e.message); // ??
  });

30. Расскажите о последовательном и параллельном выполнении асинхронных функций. В чем разница между Promise.all ) и Promise.allSettled()?

31. Что такое дескрипторы свойств объектов? Расскажите об их практическом применении.

32. Назовите несколько способов создания постоянного объекта в JavaScript.

33. Как создать изменяемое свойство у объекта?

34. Зачем нужен конструктор Proxy? Приведите пример использования.

35. Что такое ArrayBuffer? В чем разница между Uint32Array и Float32Array? Каким будет результат выполнения кода?

const uint32Array = new Uint32Array();
Array.isArray(uint32Array);

36. Каким будет результат сравнения?

const url = “HTTPs://xyz.com/path<to>page.html”;
encodeURI(url) == encodeURIComponent(url); 

37. Расскажите о генераторах и итераторах.

38. Объясните, что делает следующий код:

function * fn(num) {
  for (let i = 0; i < num; i += 1) {
    yield console.log(i);
  }
}
const loop = fn(5);
loop.next();
loop.next();

39. Расскажите о типе данных Symbol и его практическом применении. Как перевести число из 10-разрядной системы в 16(2,8)-разрядную систему счисления?

Функции

40. Объясните, что означает currying. Приведите пример использования на практике.

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

42. Что такое чейнинг функций? Напишите пример с использованием этого подхода.

43. В чем разница между function и arrow function? Каким будет результат выполнения кода?

const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)

const unfold = (f, seed) => {
  const go = (f, seed, acc) => {
    const res = f(seed)
    return res ? go(f, res[1], acc.concat([res[0]])) : acc
  }
  return go(f, seed, [])
}

Фронтенд

44. В чем принципиальная разница между событиями mouseleave и mouseout?

45. В каком порядке обрабатываются пользовательские события в DOM (click, mouseover и т.д.)? FIFO или LIFO?

46. Что такое Event bubbling и Event capturing?

47. Сравните методы объекта event stopPropagation и stopImmediateProparation.

48. Какие есть подходы к оптимизации производительности веб-страницы?

49. Как реализован механизм same-origin policy в браузере? На какие браузерные API он распространяется?

50. Назовите способы хранения данных в браузере. Сравните их.

51. Web worker-ы. Опишите особенности передачи данных между worker-ми и основным потоком, между разделенными worker-ми.

51. Что такое Transferable-объекты?

52. Расскажите о способах оптимизации выполнения ресурсоемких операций JS для улучшения производительности рендеринга контента на странице.

53. Почему ResizeObserver вызывает события изменения размера до воспроизведения элемента, а не после?

54. Расскажите, как вы понимаете Web Accessibility.

55. Опишите алгоритм создания функционала, обеспечивающего чтение содержимого .txt-файла при перетаскивании его из файловой системы в окно браузера.

56. Что такое Virtual DOM?

Верстка

57. Объясните разницу между единицами измерения px, em, rem.

58. Для чего нужны CSS-переменные? Приведите несколько примеров использования.

59. Что произойдет при добавлении следующего селектора?

* {Box-sizing: border-box; }

60. Как адаптировать страницу для печати?

61. Опишите особенности кастомизации стилей стандартных элементов форм.

62. Что такое progressive рендеринг? Какие подходы в нем используются?

63. Назовите несколько способов реализации lazy-loading медиаресурсов на странице.

64. Назовите популярные шаблонизаторы для фронтенд-разработки. Опишите особенности их использования.

65. Назовите популярные CSS-методологии и их различия.

66. Как работает CSS Grid?

67. Какие форматы изображений поддерживают анимацию?

68. Как отследить прогресс / окончание CSS @keyframes анимаций или плавных переходов, реализованных с помощью transition, в JS?

69. Какие CSS-свойства могут быть обработаны непосредственно через GPU? Что такое композитные слои и почему большое их количество может привести к аварийному завершению работы браузера на мобильных устройствах?

70. Как переиспользовать инлайновые SVG-элементы на странице?

71. Опишите способы оптимизации SVG-файлов.

72. Как реализовать иконочный шрифт из определенного набора SVG-файлов?

73. Что такое ложное жирное или ложное курсивное (Faux) начертания шрифтов?

74. Что такое #shadow-root в инспекторе HTML-страницы?

75. Зачем нужны Custom Elements?

76. Почему удаление лишних символов пробелов (и символов переноса) в HTML не отражается на конечной производительности загрузки страницы?

77. Что такое контекст отображения canvas? Какие существуют типы контекста для рендеринга двумерной и трехмерной графики?

Angular

78. Как работает Dependency injection? Зачем это нужно? Расскажите об использовании кастомных инжекторов.

79. Что такое zone.js? Для чего Angular использует зоны? С какой целью можно использовать NgZone-сервис?

80. Как работает Change detection? Как можно оптимизировать компонент с помощью схем Change detection? Какие еще есть приемы для оптимизации рендеринга (связанные с Change detection)?

81. Как выполнить конфигурацию HTTP-сервиса? Зачем она нужна? Обработка HTTP-ошибок?

82. Какие есть подходы к организации работы с данными?

83. Как подготовить сборку к деплою?

84. Что такое NgRx? Когда стоит использовать?

85. В каких случаях лучше использовать Renderer-сервис вместо нативных методов? А наоборот?

86. Как работают и для чего нужны резолверы? Как получить данные, загруженные резолверами?

87. Как работают и зачем нужны динамические компоненты? Приведите примеры их целесообразного использования.

88. В чем разница между @ViewChild и @ContentChild?

89. Что делает код и как иначе можно связать класс компонента с переменной?

@HostBinding ( 'class.valid') isValid;

90. Как можно кэшировать данные, используя сервисы или RxJS?

91. Что такое асинхронная валидация форм? Когда она применяется и как реализуется?

92. Зачем нужна forRoot-функция модуля?

93. В чем разница между декларированием и экспортом компонента из модуля?

94. Почему плохо «провайдить» сервис из shared-модуля в lazy-loaded модуль? (Вопрос о scope модулей.)

95. Что такое ::ng-deep и для чего используется?

96. Какие тесты можно запустить для Angular-программы? Какие инструменты используют для тестирования Angular-программы?

97. Как протестировать API-сервис?

React

98. Что такое JSX? Что лежит в его основе?

99. Как работает алгоритм Virtual DOM?

100. Для чего нужно свойство key во время рендеринга списков?

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

102. Когда и зачем нужно передавать props в super() при использовании классовых компонентов?

103. Почему нужно использовать setState () для обновления внутреннего состояния компонента?

104. В чем заключается принцип «подъема состояния»?

105. Какие библиотеки менеджмента состояния React-приложения вы знаете? Зачем они нужны?

106. Когда следует использовать Redux? Какие есть альтернативы?

107. Redux vs Mobx?

108. Расскажите о базовом принципе работы React Hooks.

109. В чем разница между createRef и useRef?

110. Когда следует использовать React refs? Когда не стоит?

111. Какие недостатки библиотеки React вы видите?

112. Какие паттерны используете вместе с React?

113. Как относитесь к типизации вместе с React?

114. Как построить хорошую архитектуру React-проекта?

115. Оптимизация React-приложений. Как измерить производительность программы?

116. Можно ли приложение на React встроить в другое приложение на React?

Бэкенд

117. Почему Node.js однопоточный, а не многопоточный?

118. Что такое event driven development?

119. Сравните методы fork() и spawn().

120. Расскажите о Node.js-фреймворки, которые вы использовали. Чем они отличаются?

121. Опишите словами код ендпоинта, который должен сохранить с клиента файл размером 4 гигабайта и положить его на S3 или другой CDN.

122. Что такое микросервисы, зачем их используют?

123. В каких случаях вы бы выбрали монолит, а в каких — микросервисы?

124. Как понять, что приложение в определенный момент работает исправно?

125. Как понять, что приложение за последние три дня работало исправно?

126. Как происходит проверка правильности пароля при использовании bcrypt?

127. Что такое JWT?

128. Джуниор прислал код на ревью. Что здесь не так? Как исправить?

router.post ( '/ users', async (req, res, next) => {
  const user = await db.createUser (req);

  if (user) {
    return res.json (users);
  }

  res.json ({error: "can not create user"})
})

Базы данных

129. Что такое Redis и для чего его используют?

130. Какие базы данных вы использовали? Чем отличаются SQL и NoSQL?

131. Для двух таблиц — комментарии и пользователи — напишите запрос, который выбирает последние три комментария для каждого пользователя.

132. Как заказчик прошу вас выбрать базу данных для нового проекта. Ваши действия?

Инструменты и прочее

133. Для чего нужен package-lock.json?

134. В чем разница между npm install и npm ci?

135. Для чего нужны бандлеры?

136. Расскажите о модульном подключении скриптов. Приведите пример использования загрузчика / бандлера модулей.

137. Чем различаются git merge и git rebase?

138. Что такое staging area в git?

139. Опишите процесс code review. Назовите основные правила, способы разрешения конфликтов и споров во время его проведения.

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

140. Напишите функцию Sleep (ms), останавливающую выполнение async-функции на заданный промежуток времени.

141. Реализуйте один из методов массива (например, splice).

142. Напишите функцию с RegExp для нахождения всех HTML-ссылок в строке.

143. Реализуйте функцию, которая исполнит callback для всех элементов определенной ветви DOM-дерева.

144. Реализуйте таблицу с виртуальным скроллом.

145. Реализуйте функцию преобразования URL query строки в JSON.

const inData = "user.name.firstname=Bob&user.name.lastname=Smith&user.favoritecolor=Light%20Blue";


function queryObjectify(arg) {
// ??
}

queryObjectify(inData)
/* Результатом виконання для вхідного рядка, повинен бути наступний об’єкт
{
  'user': {
    'name': {
      'firstname': 'Bob',
      'lastname': 'Smith'
    },
    'favoritecolor': 'Light Blue'
  }
};
*/

146. Реализуйте функцию поиска пересечения двух массивов.

const first = [1, 2, 3, 4];
const second = [3, 4, 5, 6];

function intersection (a, b) {
// ??
}

intersection(first, second) // -> [3, 4]

147. Реализуйте функцию/класс для генерации HTML.

const HTMLConstruct = {};

HTMLConstruct.span('foo'); // -> <span>foo</span>
HTMLConstruct.div.span('bar'); // -> <div><span>bar</span></div>

HTMLConstruct.div.p(
HTMLConstruct.span('bar'),
HTMLConstruct.div.span('baz')
); // -> <div><p><span>bar</span><span>baz</span></p></div>

148. Если есть проект с ограниченными сроками и некритичной производительностью, чем будете руководствоваться при выборе библиотек, подходов? Или все же будете обращать внимание на производительность? Или наоборот: сроки нелимитированные, производительность важна. Ваши действия?

Senior

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

1. Расскажите о функциональном программировании.

2. Что такое TDD (Test Driven Development) / BDD (Behavior Driven Development)?

3. Расскажите подробно о работе HTTPS.

4. Какой стек технологий можно выбрать для реализации клона какого-нибудь известного проекта и почему?

5. Есть проект на старых технологиях, в него необходимо вносить изменения. Как это лучше всего сделать?

6. (Если у кандидата есть опыт работы с несколькими фреймворками): какой фреймворк будете использовать для следующего проекта? Какие факторы будут влиять на выбор?

7. Что такое V8 Engine?

JS Core

8. Реализация паттерна Class Free OOP (HTTPs://observablehq.com/@bratter/class-free-oop ).

9.Патерн async disposer (HTTPs://advancedweb.hu/what-is-the-async-disposer-pattern-in-javascript).

10. Использование регулярных выражений. Когда приемлемо / неприемлемо? Как они работают? Как можно сделать читаемым код?

Фронтенд

11. Как браузер определяет, можем ли мы общаться между вкладками?

12. Что такое Content Security Policy?

13. Как избежать загрузки кэшированных файлов скриптов и стилей?

14. Что такое requestAnimationFrame?

15. Расскажите о микросервисной архитектуре Front-end App.

16. Что такое Shadow DOM?

17. Сравните nextElementSibling и nextSibling.

18. Какие знаете метрики веб-сайта?

Angular

19. Как проводится конфигурация NgZone-модуля? Когда это необходимо?

20. Что вас раздражает в этом фреймворке? Что бы вы изменили?

21. Если бы вы решали, что добавить в следующем релизе фреймворка, какая фича это была бы?

22. Вам случалось писать кастомные декораторы? Если да, то зачем?

23. Сделайте ревью кода и сделайте замечания по архитектуре.

24. Расскажите, как бы вы делали такие фичи. Опишите архитектуру фичи в приложении.

Бэкенд

25. Сравните Common.js с AMD Modules и ES6 Imports.

26. Какой фреймворк вы выбрали бы для бэкенда и почему?

27. Опишите своими словами, как работает OAuth v2.

28. Есть проект с источниками утечки памяти. Как их обнаружить, устранить и предотвратить их появление в будущем?

29. Есть проект с performance issues. Как их обнаружить, устранить и предотвратить в будущем?

Базы данных

30. Какие альтернативные виды баз данных используете?

31. Что такое RDS и почему он иногда не подходит?

32. Что такое SQL Injections и как их избежать?

33. Почему для запросов в БД надо использовать плейсхолдеры?

34. Как спроектировать кластер на MongoDB?

35. Для чего используют MongoDB Aggregation framework?

36. Расскажите о GraphQL.

Инструменты

37. Можете ли вы описать суть методологии git flow в двух словах?

38. Что означает требование делать squash commits во время rebase?

39. Что думаете об альтернативных системах контроля версий (Version Control System)?

40. Какие конвенции знаете и используете для git?

41. Расскажите о своем опыте использования / внедрения СI/CD.

42. Нужно настроить деплой проекта на несколько сред. Расскажите, как бы вы построили процесс? Какие инструменты использовали бы?

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

43. Реализуйте асинхронный метод filter для Array (должны работать await).

44.Реализуйте функцию reduce с помощью рекурсии.

45. Как можно было бы сделать toggle-компонент, как в iPhone, без использования JS?

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]