Задачи на JS: замыкания, this, Event Loop

↑ 2.1 JavaScript: продвинутый · ← Предыдущая · → Следующая

Обязательно~4 мин чтенияУровень: middle

Зачем это на собесе

Типовые задачи «что выведет код». Решайте, проговаривая правила: hoisting, замыкания, this, порядок очередей.

Задачи

// 1. Замыкания и var
for (var i = 0; i < 3; i++) setTimeout(() => console.log(i), 0);

Ответ

3 3 3. Один var i на всю функцию, коллбэки выполняются после цикла. С let — 0 1 2.

// 2. this
const obj = { name: "A", regular() { return this.name; }, arrow: () => typeof this };
const f = obj.regular;
console.log(obj.regular(), f(), obj.arrow());

Ответ

"A", undefined (потерян контекст; в нестрогом — window.name), "object"/"undefined" (стрелка берёт this внешнего контекста: модуль — undefined).

// 3. Event loop
console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
(async () => { console.log("D"); await 0; console.log("E"); })();
console.log("F");

Ответ

A D F C E B: синхронно A, D, F; микрозадачи C, E; затем макрозадача B.

// 4. Hoisting
console.log(typeof f1, typeof f2);
function f1() {}
var f2 = function () {};

Ответ

"function" "undefined": function declaration поднимается целиком, var f2 — со значением undefined.

// 5. Приведение типов
console.log([] + [], [] + {}, 1 + "2", "3" - 1, true + true, [] == false, null == undefined, NaN == NaN);

Ответ

"", "[object Object]", "12", 2, 2, true, true, false.

// 6. Замыкание-счётчик
const make = () => { let n = 0; return () => ++n; };
const a = make(), b = make();
console.log(a(), a(), b());

Ответ

1 2 1 — у каждого замыкания своё окружение.

// 7. Promise-цепочка
Promise.resolve(1).then(v => { throw new Error("x"); }).then(() => console.log("A")).catch(() => console.log("B")).then(() => console.log("C"));

Ответ

B C — ошибка пропускает then, ловится catch, цепочка продолжается.

// 8. Порядок
setTimeout(() => console.log(1));
new Promise((res) => { console.log(2); res(); }).then(() => console.log(3));
console.log(4);

Ответ

2 4 3 1 — тело промиса выполняется синхронно.

Как решать

1. Разделите синхронный код, микрозадачи и макрозадачи.
2. Определите значение this по способу вызова.
3. Учитывайте hoisting и TDZ.
4. Проговаривайте правила вслух: интервьюеру важен ход рассуждений.

Практика

1. Составьте ещё 10 задач на каждый пункт и решите без запуска.
2. Разберите ответы с помощью визуализатора (loupe, JS Visualizer).

Связанные темы

• Даты, часовые пояса, Intl
• Полифиллы: bind, Promise.all, debounce, deepClone