Популярные вопросы на собесах. Frontend разработчик

Вопрос 42 раз встречался в компаниях:
Сбер, Альфа Банк, Soft_Media_Group, Инити, Арго, LeverX, SmartWay, Globaldrive, циан, ООО Снэп АйТи, YADRO, Софт Медиа Групп, Библио-Глобус, intelsy, Сфера, Kvando Technologies, Дом. рф, Иннотех, Cyber Interactive, amoCRM, 1221 Systems, TYMY, VK, Кэтрид Диджитал, Домклик, Исходный Код, IT-One, Rutube, Garage Eight, ООО Премиум ИТ Солюшен, МТГ Бизнес решения, EdenAI, Газпромбанк, Aston, РСХБ, Avito, Kodix.

Что такое event loop в JavaScript и как он работает с микрозадачами и макрозадачами?
Что хотят услышать интервьюеры:
Интервьюеры ожидают, что кандидат продемонстрирует понимание концепции event loop в JavaScript, включая различия между макрозадачами и микрозадачами. Также важно упомянуть, как работает очередь задач и как это влияет на асинхронное выполнение кода. Кандидат должен привести примеры для иллюстрации работы event loop и его взаимодействия с различными типами задач.

Определение и работа Event Loop:
Event loop — это механизм, который позволяет JavaScript выполнять асинхронный код, обрабатывая события и задачи. Он отвечает за выполнение кода, сборку событий и выполнение очереди задач.

Основные компоненты:
Call Stack (стек вызовов): Здесь выполняются все синхронные задачи.
Web APIs: Содержит API для работы с асинхронными операциями (например, setTimeout, fetch).
Task Queue (очередь задач): Здесь находятся макрозадачи, такие как события и таймеры.
Microtask Queue (очередь микрозадач): Здесь находятся микрозадачи, такие как промисы и MutationObserver.

Как работает Event Loop:
JavaScript запускает код, помещая функции в стек вызовов.
Когда встречается асинхронная функция, её выполнение передаётся Web APIs, а сама функция удаляется из стека.
После завершения асинхронной операции результат помещается в соответствующую очередь (макрозадачи или микрозадачи).
Event loop проверяет стек вызовов. Если он пуст, он сначала обрабатывает все микрозадачи из микрозадачи, затем переходит к макрозадачам.

Пример:
console.log('Start'); // 1
setTimeout(() => console.log('Timeout 1'), 0); // 2
Promise.resolve().then(() => console.log('Promise 1')); // 3
setTimeout(() => console.log('Timeout 2'), 0); // 4
Promise.resolve().then(() => console.log('Promise 2')); // 5
console.log('End'); // 6

Ожидаемый вывод:
Start
End
Promise 1
Promise 2
Timeout 1
Timeout 2

Объяснение вывода:
Сначала выполняются синхронные операции (1 и 6).
Затем обрабатываются все микрозадачи (3 и 5).
Наконец, выполняются макрозадачи (2 и 4).

Отправь другу, кому это может быть полезно? Напиши в комментах, свои вопросы и ответы?