Вопросы на собеседовании: Фронтенд-разработчик

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

• Микрозадачи: Promise, queueMicrotask, MutationObserver; все они выполняются до отрисовки.
• Макрозадачи: setTimeout, setInterval, I/O; setTimeout(..., 0) уступает очереди отрисовки.
• Длинные цепочки .then() могут задушить рендеринг и заморозить интерфейс.
• Знание порядка позволяет предсказывать выполнение и избегать рывков.

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

• Оно захватывает внешние переменные по ссылке, а не копией.
• Классический пример: фабрика makeCounter, возвращающая increment и decrement с одной приватной count.
• Оно лежит в основе паттерна модуля и хелперов мемоизации.

Все три явно задают this функции, но различаются тем, как и когда вызывают её.

• call: вызывает немедленно, аргументы перечисляются по отдельности.
• apply: вызывает немедленно, аргументы передаются массивом.
• bind: возвращает новую функцию с постоянно привязанным this, не вызывая её.
• bind удобен для передачи методов класса в коллбэки без потери контекста.

Каждый объект ссылается на другой через [[Prototype]], образуя цепочку, заканчивающуюся на Object.prototype.

• Поиск свойства обходит цепочку, пока не найдёт его или не дойдёт до конца.
• Синтаксис класса ES6 - сахар над той же прототипной моделью наследования.
• Методы класса попадают в prototype конструктора, а не в каждый экземпляр.

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

• Promise.all: выполняется, когда выполнены все, отклоняется при первом отказе.
• Promise.allSettled: ждёт завершения всех, возвращает объекты-статусы независимо от результата.
• Promise.race: завершается, как только завершится первый промис, выполнением или отказом.
• Promise.any: выполняется при первом успехе, отклоняется только если отклонились все.

WeakMap и WeakSet нужны, когда ключи должен иметь право удалить сборщик мусора.

• Они хранят слабые ссылки, поэтому объект удаляется, как только нет сильных ссылок.
• Идеальны для метаданных о DOM-узлах или объектах без блокировки сборки мусора.
• У них нет методов итерации, поэтому не подходят, когда нужно перебирать записи.

Debounce ждёт паузу, throttle ограничивает частоту; выбор зависит от события.

• Debounce: срабатывает только после остановки вызовов на заданное время, идеален для поиска по мере ввода.
• Throttle: срабатывает не чаще раза за интервал, идеален для обработчиков scroll или resize.
• Debounce на scroll ощущается хуже throttle, потому что ничего не срабатывает во время прокрутки.

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

• Реализуется через Map или объект-кэш в замыкании.
• Главный компромисс: память растёт с числом уникальных комбинаций аргументов и может течь при объектных ключах.
• В React useMemo и useCallback встроены, но добавляют накладные расходы при частой смене зависимостей.

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

• Обычные: this зависит от способа вызова (метод, конструктор, call/apply или по умолчанию).
• Стрелочные: захватывают this из объемлющей области в момент определения.
• Поэтому стрелочные ненадёжны как методы объектов, но идеальны как коллбэки внутри методов класса.

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

• Spread: поверхностная копия, дублируются только ссылки верхнего уровня.
• JSON.parse(JSON.stringify()): глубокая копия, но теряет функции, превращает Date в строки, удаляет undefined, падает на циклах.
• structuredClone: настоящая глубокая копия с Date, типизированными массивами и циклами, но без функций и DOM-узлов.

async/await - синтаксический сахар над Promise.

• Async-функция всегда возвращает Promise.
• await приостанавливает функцию и уступает циклу событий до выполнения ожидаемого Promise, затем возобновляет работу.
• Babel компилирует его в машину состояний с генераторной семантикой и цепочками .then().
• await над не-Promise работает, потому что значение оборачивается в Promise.resolve().

Они различаются временем загрузки, структурой и семантикой связывания.

• CommonJS: require/module.exports, синхронная загрузка, вычисление в рантайме, изменяемые экспорты.
• ES-модули: import/export, статическая структура, анализируемая при парсинге, что позволяет tree shaking.
• В браузере ES-модули всегда асинхронны; Node поддерживает оба.
• Живые байндинги ES-модулей означают, что импорт отражает актуальное значение экспорта.

Генератор использует function* и может приостанавливаться через yield, возвращая итератор.

• Он выдаёт значения по требованию, не вычисляя всё наперёд.
• Полезен для пагинации при бесконечном скролле.
• Полезен для сложного асинхронного управления потоком в библиотеках вроде redux-saga.
• Полезен для ленивых последовательностей.

Находите утечку снимками кучи, затем чините источник, удерживающий ссылки живыми.

• Частые причины: глобальные слушатели, которые не удаляются; замыкания с большими данными в области модуля; неотменённые подписки при размонтировании.
• Обнаружение: делайте снимки кучи во вкладке Memory Chrome DevTools до и после навигации, сравнивайте удержанные размеры.
• Исправление: удаляйте слушателей в cleanup-функциях, используйте WeakMap для метаданных, отписывайтесь от WebSocket и Observable при размонтировании.

Временная мёртвая зона - это промежуток между входом в область видимости и достижением объявления let или const.

• Обращение к переменной в её TDZ бросает ReferenceError, хотя она уже существует в области.
• Это отличается от var, которая поднимается и инициализируется значением undefined.
• Ошибки TDZ возникают в инициализаторах полей класса и при чтении переменной до её объявления.

React сравнивает старое и новое виртуальные DOM-деревья (diffing), чтобы решить, что перерендерить.

• Предполагается, что элементы разных типов дают разные деревья, а совпадающие поддеревья пропускаются.
• Проп key сигнализирует об идентичности элемента между рендерами, поэтому DOM-узел переиспользуется при смене позиции в списке.
• Без правильных ключей React может уничтожать и пересоздавать дорогие компоненты, теряя производительность и локальное состояние.

useCallback мемоизирует ссылку на функцию, useMemo - вычисленное значение.

• useCallback: сохраняет стабильную ссылку на функцию, чтобы мемоизированные дети не ре-рендерились зря.
• useMemo: избегает дорогих пересчётов при каждом рендере.
• useCallback - для стабильных пропсов мемоизированным детям; useMemo - для дорогих вычислений.
• Оба часто используют избыточно, добавляя накладные расходы при частой смене зависимостей.

Управляемый компонент ведётся состоянием React, неуправляемый хранит своё значение через ref.

• Управляемый: значение из состояния плюс обработчик onChange, поэтому React - источник истины.
• Неуправляемый: состояние живёт в DOM, читается через inputRef.current.value.
• Управляемый подходит для валидации, условного рендеринга и синхронизации нескольких полей.
• Неуправляемый проще для file-инпутов или сторонних DOM-библиотек.

Хуки должны вызываться на верхнем уровне React-функции, в одинаковом порядке при каждом рендере.

• Не вызывайте их внутри циклов, условий или вложенных функций.
• Вызывайте их только из React-компонентов или кастомных хуков, не из обычного JavaScript.
• React сопоставляет каждый хук с его состоянием по порядку вызова; нарушение порядка путает состояние.

React.memo пропускает ре-рендер компонента, когда его пропсы поверхностно равны.

• Он не помогает, когда пропсы - объекты или функции, пересоздаваемые при каждом рендере родителя.
• Поверхностное сравнение видит эти новые ссылки как изменённые.
• Сочетайте его с useCallback и useMemo в родителе, чтобы оптимизация работала.
• Накладные расходы сравнения напрасны, если компонент и так дёшев в рендеринге.