Вопросы Frontend

Junior
1. Какие методы HTTP-запросов вы знаете?
2. Какие версии HTTP-протокола вам известны?
3. Какие знаете коды ответа (состояния) HTTP?
4. Что такое Cross-Origin Resource Sharing? Как устранить проблемы с CORS?
5. Что такое cookie?
6. Какой максимальный размер cookie?
7. Что означает директива use strict?
8. Чем JS отличается при работе на front-end и back-end?
9. Что такое статическая и динамическая типизации?
10. Как клиент взаимодействует с сервером?
11. Что такое REST?
12. Объяснить понятие мутабельность/иммутабельность? Какие типы являются
мутабельными и наоборот?
13. Как искать ошибки в коде? Используете ли вы дебаггер?
14. Каких известных людей из мира JS знаете?
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. Как вы понимаете замыкания?
38. Что такое рекурсия?
39. Что означает ключевое слово this?
40. Что такое потеря контекста, когда происходит и как ее предотвратить?
41. Методы функций bind / call / apply - зачем и в чем разница?
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?
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? 
Базы данных
123. Напишите простой запрос для вычисления трех авторов, у которых больше всего книг.
124. Напишите запрос, который выбирает последние три комментарии для конкретного
пользователя для двух таблиц: комментарии и пользователи.
125. Спроектируйте простую схему базы данных для библиотеки.
126. Для чего используют SQL-оператор HAVING?
127. Зачем используют SQL-оператор LEFT JOIN?
128. Чем отличается embed- от reference-связи в MongoDB?
130. В проекте понадобилось внести изменения в структуру таблиц, добавить несколько
полей и индексы. Как программисты будут делать это на продакшене?
131. Каждый раз, когда вы делаете pull, почему-то случается конфликт в последней строке во
всех файлах, которые вы редактировали. Что происходит?
132. Что делает команда git fetch?
133. Какой git hygiene подходы вы знаете?
134. Что такое CI / CD? Для чего это нужно?
 
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 и как он работает? Расскажите о микрозадачах и макрозадачах.
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?
16. Какая разница между композицией и наследованием?
17. Почему не стоит использовать конструкторы типа new String?
18. Расскажите о базовом устройстве и механизме работы Event loop.
19. Что такое записи (records) и кортежи (tuples)? Чем они отличаются от обычных объектов?
20. Какие различия в поведении ES5 функции-конструктора и ES2015 класса?
21. Как реализовать паттерн «Модуль»?
22. Почему typeof null возвращает object?
23. Что такое приведение (преобразование) типов в JS?
24. Что такое явное и неявное приведение (преобразование) типов данных в JS? Как
происходит преобразование типов в следующих примерах:
25. Что такое Garbage Collector?
26. Опишите основные принципы работы «сборщика мусора» в JS-движках (engines).
27. Опишите назначение и принципы работы с коллекциями WeakMap и WeakSet? Чем они
отличаются от коллекций Map и Set соответственно?
28. Чем отличается Observable от Promise?
29. Что такое Promise?
30. Расскажите о последовательном и параллельном выполнении асинхронных функций. В
чем разница между Promise.all() и Promise.allSettled()?
31. Что такое дескрипторы свойств объектов? Расскажите об их практическом применение.
32. Назовите несколько способов создания постоянного (неизменного) объекта в JavaScript.
33. Как создать свойство у объекта, которое нельзя будет изменить?
34. Зачем нужен конструктор Proxy? Приведите пример использования.
35. Что такое ArrayBuffer? В чем разница между Uint32Array и Float32Array?
37. Расскажите о генераторах и итераторах.
39. Расскажите о типе данных Symbol и его практическом применении. Как перевести число
с 10-разрядной системы в 16 (2,8) разрядную систему счисления?
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? Какие существуют типы контекста для
рендеринга двумерной и трехмерной графики?
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?
133. Для чего нужен package-lock.json?
134. В чем разница между npm install и npm ci?
135. Для чего нужны бандлеры?
136. Расскажите о модульном подключении скриптов. Приведите пример использования
загрузчиков / бандлеров модулей.
137. Чем различаются git merge и git rebase?
138. Что такое staging area в git?
139. Опишите процесс code review. Назовите основные правила, способы разрешения
конфликтов и споров во время его проведения.
 
Senior
1. Расскажите о функциональном программировании.
2. Что такое TDD (Test Driven Development) / BDD (Behaver Driven Development)?
3. Расскажите подробно о работе HTTPS.
4. Какой стек технологий можно выбрать для реализации клона какого-нибудь известного
проекту и почему?
5. Имеется проект на старых технологиях, необходимо в него вносить изменения. Как это
сделать лучше всего?
6. Если у кандидата есть опыт работы с несколькими фреймворками: какой будете
использовать для следующего проекта? Какие факторы будут влиять на выбор?
7. Что такое V8 Engine?
11. Как браузер определяет, можем ли мы общаться между вкладками?
12. Что такое Content Security Policy?
13. Как избежать загрузки кэшированных файлов скриптов и стилей?
14. Что такое requestAnimationFrame?
15. Расскажите о микросервисной архитектуре Front-end App.
16. Что такое Shadow DOM?
17. Сравните nextElementSibling и nextSibling.
18. Какие знаете метрики веб-сайта?
 

1. В чем смысл оборачивания всего содержимого JavaScript-файла в функцию?

Этот шаблон называется IIFE - Immediately Invoked Function Expression (немедленно

вызываемое функциональное выражение). Этот подход позволяет:
 обеспечить коду собственный блок видимости, то-есть контекст выполнения
  избежать загрязнения глобальной области видимости глобальными
переменными
 избежать неумышленного переопределения уже существующих переменных в
глобальной области видимости

2. В чем смысл и польза указания use strict в начале JavaScript-файла?

Команда use strict включает так называемый строгий режим. В этом режиме предупреждения

становятся ошибками, что помогает в написании более чистого и безопасного кода, менее
уязвимого к ошибкам в продакшене.

3. Что такое NaN? Какого типа это значение? Как можно узнать, равно ли значение
переменной NaN?

NaN расшифровывается как "Not A Number", это "falsey" (ложное) значение. Выражение

typeof NaN возвращает тип Number. Проверить значение переменной на
соответствие NaN можно, воспользовавшись встроенным методом isNaN() или используя
оператор тройного равенства ===.

4. Что такое замыкание в JavaScript? Приведите пример.

Замыкание в JavaScript - это комбинация функции и лексического окружения, в котором она

была определена. Это позволяет ей обращаться к переменным и функциям этого
лексического окружения в дальнейшем. 

В следующем примере мы определяем функцию makeCounter(), которая фактически является

фабричной функцией. При вызове она возвращает дочернюю функцию, которая имеет доступ
к лексическому окружению внешней функции, то-есть функции makeCounter(). Таким
образом, возвращаемая функция запоминает переменную counter и в последующем изменяет
ее значение.

function makeCounter(initial = 0) {

let counter = initial;

return function() {

return counter += 1;

}
 }

const counterA = makeCounter(0);

console.log(counterA()); // 1

console.log(counterA()); // 2

const counterB = makeCounter(100);

console.log(counterB()); // 101

console.log(counterB()); // 102

5. Как можно клонировать объект?

Можно использовать оператор остатка ....  Можно использовать Object.assign(newObj,

oldObj). Но эти подходы не позволяют выполнить глубокое клонирование. Поэтому, если нам
нужно клонировать объект со вложенными объектами, мы можем использовать либо метод
какой-либо библиотеки (привет, lodash), либо сделать это средствами встроенного
объекта JSON.

JSON.parse(JSON.stringify(objectToClone))

6. Как можно добавить элемент в начало и в конец массива?

Чтобы добавить элемент в начало массива, можно использовать Array.prototype.unshift(). Для

добавления элемента в конец массива подойдет Array.prototype.push().

7. В чем разница между undefined и is not defined?

undefined - это значение, присваемое объявленной, но не проинициализированной
переменной. Мы получаем undefined, обращаясь к существующей переменной. А в случае
обращения к несуществующей (необъявленной) переменной, мы получим ошибку is not
defined.

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

Для этого можно использовать встроенный метод Array.isArray().

9. Что такое hoisting (поднятие) в JavaScript?

Поднятие - это поведение компилятора JavaScript, заключающееся в поднятии объявлений

переменных и функций в начало области видимости. 

Благодаря поднятию мы можем использовать функции и переменные до их объявления в

коде. Однако, следовать учитывать, что поднимаются только объявления, но не присваивания
значений. 

По этой причине, например, мы можем использовать до объявления функцию, объявленную

через Function Declaration, но не можем ту, которая объявлена через Function Expression.

10. Что такое this?

this указывает на объект области видимости во время выполнения. По

умолчанию this указывает на глобальный объект. В браузере выражение this ===
window будет истинно. 

11. Как работает прототипное наследование?

Если отвечать кратко, в JavaScript все является объектами. Эти объекты связаны цепочками
прототипов, по которым им передаются методы и свойства. При обращении к свойству или
методу объекта сначала происходит поиск этого свойства у самого объекта. В случае неудачи
поиск перенаправляется в его прототип, затем в прототип прототипа и так далее, пока
искомое свойство не будет найдено, либо пока не закончится цепочка прототипов.

12. Объясните, почему запись function foo(){}() вызывает ошибку и не работает, как

IIFE?

Здесь дело в том, что круглые скобки вызова функции добавлены сразу после Function
Declaration. Однако, они могут следовать только за выражением (expression). Поэтому мы
должны либо прибегнуть к варианту с Function Expression, либо обернуть Function
Declaration в скобки, тем самым превратив его в выражение.
 const foo = function(){}()

// либо

(function foo(){})()

// либо со стрелочной функцией

(() => {})()

13. В чем разница между null, undefined и undeclared?

null - это в прямом смысле "ничего". Можно использовать это значение в качестве
плейсхолдера.

undefined - это значение для случая "объявлено, но не инициализировано".

undeclared - это ошибка, возникающая в случае обращении к необъявленной переменной.

14. В чем разница между Array.prototype.forEach и Array.prototype.map?

Array.prototype.forEach - это инструмент обхода цикла процедурно, а Array.prototype.map -

функционально.

.forEach просто проходится по массиву с выполнением переданного обратного вызова на

каждой итерации, а .map создает и возвращает новый массив на основе исходного,
выкладывая по кирпичику на каждой итерации.
15. В каких случаях используются анонимные функции?

Анонимные функции чаще всего используются в качестве функций обратных вызовов.

Также, каждая стрелочная функция является анонимной.

16. Объясните разницу между const person = Person() и const person = new

Person() при function Person(){}

Если функция Person() не возвращает явным образом создаваемый экземпляр, то

вариант const person = Person() присвоит константе person значение undefined, поскольку
именно таков результат void функции.

Если функция Person явным образом возвращает экземпляр, он станет значением

константы person при  const person = Person().

Однако, вариант с использование оператора new "выигрывает", поскольку он устанавливает

корректную связь объекта person с цепочкой прототипов Person, в то время как
выражение const person = Person() просто присваивает константе результат вызова функции.

17. В чем разница между Function.prototype.call и Function.prototype.apply?

Оба метода вызывают исходный метод с подмененным контекстом, но .call принимает

параметры через запятую, а .apply - массивом. 

18. Как работает Function.prototype.bind?

Данный метод возвращает функцию, по отношению к которой он вызывается, но с

подмененным контекстом.

19. Что вы знаете об AJAX?

AJAX = Asynchronous Javascript And XML. Это подход к асинхронному (неблокирующему)

обмену данными с сервером. 
Изначально для решения подобной задачи использовался объект XMLHttpRequest , сейчас же
более актуален дружелюбный к обещаниям (Promise) fetch API.

20. В чем разница между атрибутами и свойствами?

Атрибут - это HTML-термин, в то время как свойство - термин из JavaScript. Иными словами,
если речь идет о значении в HTML-разметке, мы говорим об атрибуте. Однако, если имеется
в виду свойство объекта, к которому мы получили доступ средствами JavaScript - вернее
называть это свойством.

21. В чем разница между == и ===?

Оператор двойного равенства производит приведение типов, оператор строгого равенства -

нет.

22. Почему лучше оставлять глобальную область видимости "как есть" и не трогать ее?

По той причине, что свойства глобальной области видимости может изменить любой
JavaScript-код, имеющий к ней доступ. Также, это грозит конфликтами имен.

23. Что такое SPA и как сделать его SEO-friendly? 

Single Page Application - это реализация веб-приложения таким образом, чтобы при первой
загрузке пользователь получал все ресурсы, необходимые для того, чтобы избавиться от
загрузки страницы с нуля при совершении интерактивных действий с интерфейсом.

Основную роль в SPA играет JavaScript, реализующий механизмы динамического

обновления данных без перезагрузки страницы.

Для того, чтобы сделать SPA SEO-friendly, можно обратиться к таким решениям, как
предварительный рендеринг или серверный рендеринг.
24. Какие преимущества и недостатки у использования Promise API вместо обратных
вызовов? 

Обещания избавляют разработчиков от ада обратных вызовов, но это не единственное их

достоинство. 

Важно также отметить, что пользуясь обратными вызовами, мы зачастую были вынуждены
"верить" стороннему коду. А вызовет ли он наш коллбэк? А вызовет ли он его корректное
количество раз? А не вызовет ли он его слишком рано или слишком поздно? 

Представьте, что функция, снимающая деньги со счета пользователя, передается коллбэком в

сторонний (в той или иной степени) код. Что будет, если он вследствие внесенных со
стороны изменений начнет вести себя некорректно и, скажем, начнет вызывать эту функцию
пять раз вместо одного?

Используя обещания, мы сами властны над нашим кодом. Мы сначала дожидаемся

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

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

При первой встрече с проблемой я, не спеша усложнять себе жизнь, обращаюсь к console.log.
Если это не помогает, вызываю тяжелую артиллерию в виде браузерного отладчика.

26. Какие конструкции языка вы используете для обхода массивов и объектов?

В случае с массивами, это чаще всего forEach и map. Реже возникает необходимость в for, for

in, for of, reduce, filter и подобных. 

А чтобы обойти объект, понадобится немного изобретательности. Один из вариантов -

получить ключи с помощью Object.keys, по которым впоследствии пройти с
помощью forEach. Либо же можно воспользоваться Object.values, Object.entries, Object.keys.

27. Объясните разницу между изменяемыми и неизменяемыми значениями

Значения примитивных типов (например, строка или число) не могут быть изменены после
того, как попали в память.
Значения объектных типов (объекты, массивы) могут изменяться в ходе работы программы.

28. Объясните разницу между синхронными и асинхронными функциями

JavaScript - это однопоточный язык, то-есть функции выполняются в синхронном порядке.

Приложение блокируется на время выполнения каждой конкретной функции. Так
происходит по той причине, что JavaScript имеет только один стек вызовов.

С другой стороны, есть асинхронный способ выполнения функций, когда мы не блокируем

весь интерфейс благодаря тому, что не дожидаемся выполнения функции, а подписываемся
на событие с передачей обратного вызова. Ну, или мы можем иметь дело с обещанием или с
прочими внешними API вроде setTimeout.

В таком случае браузер помещает обработчик события в очередь задач, а когда наступает
время его вызвать, он перемещает его в стек вызовов.

29. Что такое цикл событий? В чем разница между стеком вызовов и очередью задач?

Стек вызовов - это структура данных (первым вошел, последним вышел), используемая для
отслеживания порядка выполнения функций в текущем контексте (области видимости).

Очередь задач - это структура данных (первым вошел, первым вышел), используемая для
отслеживания выполнения асинхронных функций, готовых оказаться в стеке вызовов.

Цикл событий - это механизм, на каждом тике выполняющий функции из стека вызовов и,
если он оказывается пустым, перемещающий задачи из очереди задач в стек вызовов для
выполнения.

30. В чем разница между let, const и var?

var
 поднимается в начало области видимости функции при компиляции
 объявляет переменную, которая может быть перезаписана
 объявляет переменную, которая может быть переопределена
let
 поднимается в начало области видимости блока при компиляции
 объявляет переменную, которая может быть перезаписана
 объявляет переменную, которая не может быть переопределена
const
  поднимается в начало области видимости блока при компиляции
 объявляет переменную, которая не может быть перезаписана или
переопределена

31. В чем разница между ES6 class и ES5 function constructor?

Классы, добавленные в стандарте EcmaScript 6, всего лишь синтаксический сахар поверх

всем известных прототипов.

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

32. Что такое функция высшего порядка?

Функция, принимающая функцию обратного вызова в качестве аргумента.

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

DOM - Document Object Model (объектная модель документа). Другими словами, это дерево
всех узлов страницы, которые распознал браузер в процессе обработки HTML-разметки.

DOM - это интерфейс, позволяющий JavaScript-коду взаимодействовать с шаблоном.

34. В чем разница между областью видимости функции и блочной областью видимости?

И то, и то является полноценной областью видимости. Различие наблюдается при

использовании ключевого слова var, которое ограничивается только областью видимости
функции, но не блочной областью видимости.

35. Что произойдет в результате выражения var foo = 10 + "20" и почему?

Переменная foo примет значение "1020". 

В JavaScript это поведение называется приведением типов. Если хотя бы один из операндов
является строкой, второй также будет преобразован в строку.