И снова я в поисках более удобного оформления кода в Дзен. Наткнулся на хорошую статью https://dzen.ru/a/XtUGaNtXXh9qY-gb. Решил попробовать и в данный момент подобный подход не работает, написал в поддержку Дзен и они ответили, что пока доступна вставка видео кода Дзен, Вконтакте и Яндекс форм поэтому пока будут скрины и ссылка на код:)
71. 📌 Что такое микрозадачи и макрозадачи в JavaScript?
💬 Простое объяснение:
Это две очереди, в которых движок JavaScript выполняет отложенные задачи. Микрозадачи (promise, queueMicrotask) исполняются сразу после текущего кода, а макрозадачи (setTimeout, setInterval) — на следующем цикле event loop.
🛠 Как работает:
- Выполняется основной стек
- Все микрозадачи
- Затем одна макрозадача
- Снова стек → микрозадачи → макрозадача и т.д.
🧪 Пример:
https://gist.github.com/MIndistCalm/d5c608010374790abb8a87572b4d9844
💡 Полезно знать:
Promise .then() и queueMicrotask() — это микрозадачи. setTimeout() и setImmediate() — макрозадачи.
🎁 Бонус:
https://mytant.com
latentFlip
🧭 Зачем спрашивают на собеседовании?
Интервьюер хочет понять, как ты рассуждаешь про порядок выполнения кода, особенно в асинхронных сценариях. Это проверка глубинного понимания работы event loop — ключевая тема для фронтенда и Node.js.
72. 📌 Почему замыкания в цикле могут вести себя неожиданно?
💬 Простое объяснение:
Если ты создаёшь замыкание внутри цикла for, оно "захватывает" переменную, а не её значение. В случае с var переменная одна на весь цикл — и результат может удивить.
🛠 Как работает:
https://gist.github.com/MIndistCalm/cd412cb770d86b20365dcaafb21e81ea
🧪 Решение через let:
https://gist.github.com/MIndistCalm/c7da9f03baa9d8a8283e603916e87bb9
💡 Полезно знать:
let создаёт новую переменную в каждой итерации. А var — одну и ту же.
🧭 Зачем спрашивают на собеседовании?
Это классическая проверка знаний замыканий и областей видимости. Если ты поймёшь это — значит, ты действительно понимаешь механику JS, а не просто пишешь работающий код.
73. 📌 Что делает Object.freeze() и чем отличается от Object.seal()?
💬 Простое объяснение:
Object.freeze() делает объект неизменяемым: нельзя изменить, добавить или удалить свойства.
Object.seal() запрещает добавление и удаление, но позволяет изменять существующие свойства.
🛠 Как работает:
https://gist.github.com/MIndistCalm/a354320bd690c48819ea56a82ee6ad38
🧪 Seal:
https://gist.github.com/MIndistCalm/2200bef2b054a2fe04efa8210f370bed
💡 Полезно знать:
Обе функции работают поверхностно. Вложенные объекты всё ещё можно менять.
🧭 Зачем спрашивают на собеседовании?
Чтобы убедиться, что ты умеешь ограничивать мутации состояния, особенно в архитектуре с неизменяемыми данными (например, Redux, Vuex, MobX).
74. 📌 Как работает сборка мусора в JavaScript?
💬 Простое объяснение:
JS сам управляет памятью. Когда объект становится недоступным (на него нет ссылок), он считается "мусором" и может быть удалён.
🛠 Пример:
https://gist.github.com/MIndistCalm/2bf08426bdab6b66ba66893c0ca41cde
💡 Механизм:
Используется алгоритм "достижимости": всё, что не достижимо из корня (global, stack, closures) — удаляется.
🧭 Зачем спрашивают на собеседовании?
Это проверка глубинных знаний. Особенно важно, если ты работаешь с ресурсами, таймерами или большими объёмами DOM — понимать, что может вызвать утечку памяти.
75. 📌 Что такое утечка памяти в JavaScript?
💬 Простое объяснение:
Это ситуация, когда память остаётся занята, хотя объект больше не используется, потому что на него осталась ссылка (в таймере, замыкании, DOM и т.д.).
🛠 Пример:
Считаю, что тема проблемная, поэтому примеров надо по-больше
https://gist.github.com/MIndistCalm/b98b6cd2c330c6b94de3ed7555ecde10
🧭 Зачем спрашивают на собеседовании?
Ты должен уметь писать надёжный и стабильный код, особенно в SPA, где приложение работает долго. Понимание утечек — важнейшая часть этого.
76. 📌 Что такое "дебаунс" и "троттлинг"?
💬 Простое объяснение:
Это способы оптимизации частого вызова функции:
- Debounce — ждёт, пока пользователь закончит действие (например, печать)
- Throttle — запускает функцию не чаще, чем заданный интервал
🛠 Пример:
https://gist.github.com/MIndistCalm/8fe3f46490fabf73ee48d9caa220e55d
💡 Полезно знать:
Используется для scroll, resize, input, AJAX-запросов и т.п.
🧭 Зачем спрашивают на собеседовании?
Ты должен уметь писать производительный фронтенд. Это один из признаков зрелости: оптимизация не после, а во время проектирования.
77. 📌 Что такое цепочка промисов и как работает возврат внутри then?
💬 Простое объяснение:
Каждый .then() возвращает новый промис. То, что ты возвращаешь внутри, передаётся в следующий .then().
🛠 Как работает:
https://gist.github.com/MIndistCalm/3faffbf0b5d1426752b856316372b9e3
💡 Полезно знать:
Если внутри then вернуть промис — он будет "развёрнут" (await-эффект).
🧭 Зачем спрашивают на собеседовании?
Чтобы убедиться, что ты не просто копируешь чей-то код с промисами, а реально понимаешь порядок их выполнения и передачу значений.
78. 📌 Что такое Symbol и зачем он нужен?
💬 Простое объяснение:
Symbol — это уникальный примитив, который можно использовать как ключ в объекте. Даже если ты создашь два символа с одинаковым описанием — они будут разными.
🛠 Пример:
https://gist.github.com/MIndistCalm/56cdb421ef44c1911390d9be3700f0a4
💡 Полезно знать:
Символы не участвуют в for...in и Object.keys(), но видны через Object.getOwnPropertySymbols()
Пояснение:
Если ты используешь символ (Symbol) как ключ в объекте, то этот ключ не появится при переборе объекта с помощью for...in или при получении списка ключей через Object.keys().
Однако, если ты хочешь получить все символы-ключи объекта, ты можешь использовать специальный метод Object.getOwnPropertySymbols(obj). Он вернёт массив всех символов, которые используются как ключи в этом объекте.
https://gist.github.com/MIndistCalm/3f19476ad79e2e8e62782cfebb933e6d
🧭 Зачем спрашивают на собеседовании?
Интервьюер хочет проверить, знаешь ли ты продвинутые типы данных и умеешь ли скрывать служебные свойства объектов.
79. 📌 Как работают итераторы и генераторы?
💬 Простое объяснение:
Итератор — объект, который возвращает следующий элемент при вызове метода .next().
Генератор — функция, которая "приостанавливается" и возобновляется по мере необходимости с помощью yield.
🛠 Пример генератора:
https://gist.github.com/MIndistCalm/49851d668e358fca1f16e5449f618cf5
💡 Полезно знать:
Можно использовать генераторы для ленивых вычислений, бесконечных последовательностей, парсинга и побочных эффектов.
🧭 Зачем спрашивают на собеседовании?
Это проверка твоей гибкости: умеешь ли ты мыслить в терминах протоколов и итераций. Особенно важно для задач с потоками данных и большим объёмом.
80. 📌 Что такое Proxy в JavaScript?
💬 Простое объяснение:
Proxy — это обёртка над объектом, которая позволяет перехватывать и изменять поведение при доступе к его свойствам.
🛠 Как работает:
https://gist.github.com/MIndistCalm/5a30267d1c03add7498666bb3c246eef
💡 Полезно знать:
С Proxy можно делать реактивность (как Vue), валидацию, логирование доступа, автозаполнение и многое другое.
🧭 Зачем спрашивают на собеседовании?
Проверяется, умеешь ли ты работать с метапрограммированием и расширять поведение объектов. Это важно для сложных архитектур и кастомных API.