ИИ проведет техническое собеседование
с лайвкодингом за вас

Теория

1. Интервьюер 22:07

   Здравствуйте, рад вас видеть! Меня зовут Алексей, я проведу у вас собеседование. Формат такой: 12 теоретических вопросов по сценарию «React Frontend», затем будет практическое задание. Начнём с первого вопроса: объясните, пожалуйста, разницу между HTTP и HTTPS и как работает TLS?

2. Кандидат 22:08

   HTTP передаёт запросы и ответы по сети в открытом виде: любой на пути (Wi‑Fi, провайдер) может прочитать или подменить данные. HTTPS — тот же HTTP, но поверх TLS: трафик шифруется, а сервер обычно подтверждает личность сертификатом от доверенного центра. TLS начинается с рукопожатия: клиент и сервер договариваются о версии протокола и алгоритмах, сервер отдаёт сертификат, клиент проверяет его и они совместно получают общий секретный ключ. Дальше этим ключом шифруется весь обмен (страницы, формы, куки). В браузере HTTPS виден по https:// и замку; без TLS пароли и сессии уязвимы к перехвату и подмене сайта.

3. Интервьюер 22:08

   Хороший, структурированный ответ, особенно про рукопожатие и проверку сертификата. Переходим к React: опишите жизненный цикл компонента и как useEffect соотносится с mount, update и unmount?

4. Кандидат 22:09

   В функциональных компонентах нет классических методов вроде componentDidMount, но та же логика есть: первый рендер — «рождение», повторные — «обновления», снятие с DOM — «размонтирование». useEffect выполняется после того, как React отрисовал изменения на экране, поэтому это не момент «до paint», а фаза после коммита в DOM. При mount эффект с [] в зависимостях срабатывает один раз после первого рендера. При update эффект с [a, b] перезапускается, когда меняются зависимости: сначала вызывается cleanup от прошлого запуска, затем новый эффект. При unmount React вызывает cleanup (функцию, которую вернул эффект) — там отписываются от событий, отменяют таймеры и прерывают запросы. Не путайте с useLayoutEffect: он синхронный до отрисовки браузером и нужен реже (измерения DOM, синхронная правка UI). Для подписок, fetch и аналитики обычно достаточно useEffect.

5. Интервьюер 22:09

   Отличный ответ — особенно ценно, что упомянули порядок cleanup перед следующим эффектом и разницу с useLayoutEffect. Следующий вопрос: что происходит, когда вы вводите URL в браузере и нажимаете Enter? Расскажите по шагам, от DNS до отрисовки.

6. Кандидат 22:09

   1. Парсинг URL — браузер определяет схему (https), хост, порт, путь и параметры; при необходимости дополняет https:// или отправляет в поиск. 2. DNS — по имени хоста запрашивается IP: кэш ОС/браузера → резолвер провайдера → корневые/TLD/авторitative-серверы; ответ кэшируется по TTL. 3. TCP и TLS — к IP:443 устанавливается TCP (SYN/ACK), затем TLS-handshake: сертификат, проверка, общий ключ; дальше HTTP идёт внутри зашифрованного канала.

7. Интервьюер 22:09

   Хорошо, но вы остановились на TLS-хендшейке. Уточните: что происходит дальше — какие запросы браузер отправляет серверу и как страница попадает на экран (парсинг HTML, загрузка ресурсов, построение DOM/CSSOM)?

8. Кандидат 22:10

   4. HTTP — отправляется запрос (метод, заголовки, cookies); сервер отвечает статусом и телом; для HTML часто идут редиректы (301/302), HSTS может сразу принудить HTTPS. 5. Разбор и загрузка ресурсов — HTML парсится потоково; находятся CSS, JS, шрифты, картинки; параллельно новые запросы (HTTP/2 мультиплексирование); JS может блокировать или отложить парсинг (defer/async). 6. Отрисовка — из DOM и CSS строится render tree, layout (геометрия), paint (пиксели), compositing (слои/GPU); интерактивность наступает после выполнения скриптов и события load/DOMContentLoaded.

9. Интервьюер 22:10

   Отлично, теперь картина полная — от DNS до композитинга, и хорошо, что вспомнили HSTS и defer/async. Идём к JavaScript: чем отличаются var, let и const? И что такое hoisting?

10. Кандидат 22:10

    var — функциональная область видимости: одна переменная на всю функцию, повторное объявление разрешено. let и const — блочная ({}): внутри if, цикла, блока они не «просачиваются» наружу. const нельзя переназначить (=), но если значение — объект или массив, его поля и элементы менять можно. let можно переназначать; для счётчиков и переприсваиваемых ссылок это нормальный выбор. Hoisting — на этапе компиляции объявления поднимаются в начало своей области: для var до присваивания значение undefined, для let/const — temporal dead zone до строки объявления, обращение раньше даёт ReferenceError. В современном JS обычно берут const по умолчанию, let когда нужно переприсвоение, var в новом коде почти не используют из‑за области видимости и hoisting.

11. Интервьюер 22:10

    Полный и уверенный ответ — TDZ и мутабельность полей const упомянуты, хорошо. Следующий вопрос по TypeScript: что такое type narrowing и как работает discriminated union?

12. Кандидат 22:10

    Type narrowing — когда TypeScript после проверки в коде сужает тип переменной: из широкого union или unknown остаётся конкретный вариант. Это делают typeof, instanceof, проверки на null/undefined, пользовательские type guards (x is Foo) и иногда assertion functions. Discriminated union — union, у которого у каждого варианта есть общее поле‑метка с литеральным типом (discriminant), например kind: 'success' | 'error'. В switch (result.kind) или в if (result.kind === 'error') TypeScript автоматически сужает тип: в ветке 'error' доступны только поля ошибки, в 'success' — только поля успеха. Так исчезают лишние optional‑поля и «угадывание» структуры: компилятор сам знает, какой shape у текущей ветки. На собеседовании часто просят показать обработку { kind: 'ok', data } | { kind: 'fail', message } без as и с исчерпывающим switch (иногда с never для забытых кейсов).

13. Интервьюер 22:10

    Уверенный ответ — narrowing, discriminant, исчерпывающий switch с never-проверкой, всё на месте. Переходим дальше: чем отличаются any, unknown и never? И когда какой тип уместно использовать?

14. Кандидат 22:10

    any отключает проверку типов: с ним можно почти что угодно, но теряются автодополнение и защита от ошибок. Его оставляют для миграции с JS, редких legacy‑участков или когда тип действительно неизвестен и вы сознательно не проверяете — в новом коде лучше избегать. unknown — «значение есть, но тип неизвестен»: присвоить можно откуда угодно, а вот использовать (поля, вызов, арифметика) — только после сужения (typeof, guard, парсинг схемой). Это нормальный выбор для JSON из API, catch (e: unknown) и обёрток над внешними данными. never — тип, которому не соответствует ни одно значение: функция, которая всегда бросает или зацикливается, или ветка, которую TypeScript считает недостижимой. В switch по discriminated union параметр x: never в default ловит забытые кейсы; в generics never часто означает «этот вариант комбинации невозможен».

15. Интервьюер 22:10

    Отличный ответ — граница между any и unknown, сужение перед использованием и never в exhaustive switch описаны верно. Идём дальше: объясните разницу между shallow copy и deep copy объекта. Когда каждого из них достаточно и как их получить?

16. Кандидат 22:11

    Shallow copy копирует только «верхний» слой: новый объект/массив, но вложенные объекты остаются теми же ссылками — изменение copy.nested.x затронет и оригинал. Его достаточно, когда структура плоская или вложенность намеренно общая (immutable‑паттерн: меняете только корень через spread). Получить shallow: { ...obj }, Object.assign({}, obj), [...arr], arr.slice(), structuredClone не нужен для этого уровня. Deep copy рекурсивно дублирует всё дерево — независимые вложенные объекты. Нужен, когда клонируете конфиг/состояние с глубокой вложенностью и потом мутируете копию, не трогая источник. Способы: structuredClone(obj) (современный стандарт, без функций, DOM, символов с нюансами), JSON.parse(JSON.stringify(obj)) только для JSON‑данных (теряются Date, undefined, функции), lodash cloneDeep для сложных legacy‑случаев. В React чаще избегают deep copy через иммутабельные обновления (копируете только изменённую ветку), а не клонируете весь граф целиком.

17. Интервьюер 22:11

    Полный ответ, плюс приятно, что связали с иммутабельными обновлениями в React. Следующий вопрос: что такое reconciliation и virtual DOM? Как React решает, что именно перерисовать?

18. Кандидат 22:11

    Virtual DOM — лёгкое дерево описания UI в памяти (элементы, props, дети). После изменения state React строит новое дерево и сравнивает его со снимком прошлого рендера — это reconciliation (diff). Сравнение идёт сверху вниз с эвристиками: элементы с разным type (например div → span) — старый поддерево снимается, новое монтируется заново. При том же type React обновляет props и рекурсивно обходит детей; без key соседние элементы в списке могут сопоставиться неверно, поэтому для списков нужны стабильные key. На экран попадает не «весь DOM заново», а минимальный набор операций, которые React передаёт в React DOM (createElement, setAttribute, insert, remove, текст). Commit — фаза применения этих изменений к реальному DOM; render — только вычисление нового дерева и diff. memo, useMemo и useCallback уменьшают лишние render-проходы, но финальное обновление DOM всё равно решает reconciler по результату diff.

19. Интервьюер 22:11

    Отличный ответ — эвристики diff, роль key, разделение фаз render и commit всё описаны. Следующий вопрос: что такое generic и зачем он нужен? Приведите пример из практики.

20. Кандидат 22:12

    Generic — параметр типа: одна и та же логика работает с разными типами, а связь «вход → выход» сохраняется для компилятора. Без него пришлось бы дублировать функции или падать в any и терять проверки. Зачем: переиспользуемый код (API, коллекции, хелперы) остаётся типобезопасным — TypeScript знает, что вернулось именно то, что вы ожидали. Пример из практики — обёртка над fetch, которая парсит JSON в заданный тип: async function getJson<T>(url: string): Promise<T> { const res = await fetch(url); if (!res.ok) throw new Error(res.statusText); return res.json() as Promise<T>; } type User = { id: string; name: string }; const user = await getJson<User>('/api/me'); // user: User В React тот же приём у useState<User | null>(null) и у пропсов вроде List<TItem>.

21. Интервьюер 22:12

    Хороший пример с fetch-обёрткой и связью с useState — понятно и по делу. Следующий вопрос: чем Promise отличается от callback? Что такое Promise.all и Promise.race?

22. Кандидат 22:12

    Callback — функция, которую вызывают, когда асинхронная работа готова; при нескольких шагах легко получить «лесенку» вложенных колбэков (callback hell) и сложнее централизованно ловить ошибки. Promise — объект с одним исходом: pending → fulfilled или rejected; цепочка через .then/.catch/finally или async/await, ошибка пробрасывается по цепочке. Promise.all([p1, p2, …]) ждёт все промисы; результат — массив значений в том же порядке. Если хотя бы один rejected — весь all сразу rejected с этой ошибкой (остальные могут ещё выполняться). Удобно для независимых параллельных запросов (профиль + настройки + список). Promise.race([p1, p2, …]) завершается как только первый промис settled — с его значением или ошибкой. Типичные кейсы: таймаут (Promise.race([fetch(url), sleep(5000)])) или «кто быстрее ответил». На собесе добавьте: Promise.allSettled — дождаться всех без провала целиком; Promise.any — первый успех (если все упали — AggregateError).

23. Интервьюер 22:12

    Отличный ответ — state machine промиса, поведение all при reject и практические кейсы race раскрыты, а упоминание allSettled и any только плюс. Осталось два вопроса. Предпоследний: когда использовать useMemo, useCallback и React.memo? И какие подводные камни есть у каждого из них?

24. Кандидат 22:13

    useMemo кэширует результат вычисления между рендерами, пока не изменились зависимости; имеет смысл при тяжёлых расчётах или когда нужна стабильная ссылка на объект/массив для зависимостей дочернего memo. Камни: сам useMemo не бесплатен; неправильный массив deps → устаревшие данные; оборачивать простые примитивы бессмысленно. useCallback кэширует функцию по deps; нужен, если передаёте колбэк в React.memo-ребёнка или в хук с чувствительными deps (useEffect). Камни: без memo у ребёнка стабильная функция не уменьшит его ререндеры; deps забыли — stale closure; «обернуть всё» раздувает код. React.memo пропускает ререндер компонента, если props поверхностно равны прошлым; уместен для часто обновляемого родителя и дорогого чистого UI. Камни: сравнение shallow — новый {}/[]/inline-функция каждый раз ломает memo; дети всё равно ререндерятся, если ререндерится родитель и контекст изменился. Правило: сначала профилируйте или видите лишние ререндеры; в React 19 с Compiler ручной memo часто не нужен. Не мемоизируйте «на всякий случай» — это усложняет код и может замедлить лёгкие компоненты.

25. Интервьюер 22:13

    Отличный структурированный ответ — и подводные камни, и здравый принцип «сначала профилируйте», а упоминание React Compiler показывает, что следите за развитием экосистемы. Последний теоретический вопрос: объясните разницу между == и ==. И приведите пример неожиданного поведения ==.

26. Кандидат 22:13

    Скорее всего, имелось в виду == и ===. === (strict) сравнивает без приведения типов: разные типы → сразу false, для объектов — одна и та же ссылка. == (loose) перед сравнением приводит типы по правилам JS, отсюда сюрпризы. Когда что: в современном коде почти всегда === (и !==); == — только если вы осознанно хотите такое приведение (на практике это редкость). Неожиданное поведение ==: [] == false // true ([] → "" → 0, false → 0) null == undefined // true '0' == 0 // true '' == 0 // true Пустой массив к false «равен» из‑за цепочки ToPrimitive → строка → число. null == undefined — единственная пара «похожих» значений, которая при == считается равной; с === оба случая дают false.

27. Интервьюер 22:13

    Да, верно — == и ===, спасибо за уточнение. Ответ отличный: правила приведения, null == undefined и цепочка ToPrimitive на примере [] == false раскрыты хорошо. На этом теоретическая часть завершена — благодарю за развёрнутые ответы по JavaScript, TypeScript, React и сетям, вы показали уверенное владение материалом. Дальше перейдём к практическому заданию, дайте минуту подготовить его описание.

Практика

Anagram

1. Интервьюер 22:13

   Теория закончена, переходим к задаче. Слева условие и редактор. «Запустить код» прогоняет открытые тесты и пишет вывод в консоль снизу — скрытые тесты на этом шаге не трогаются. Когда будете готовы, «Сдать решение»: прогонятся все тесты, включая скрытые, и интервью завершится. Если застряли, справа в чате можно спросить наводку — готовое решение целиком я не дам.

Теория

1. 22:07:27 Потерял фокус окна на 5 с

2. Интервьюер 22:07:28

   Здравствуйте, рад вас видеть! Меня зовут Алексей, я проведу у вас собеседование. Формат такой: 12 теоретических вопросов по сценарию «React Frontend», затем будет практическое задание. Начнём с первого вопроса: объясните, пожалуйста, разницу между HTTP и HTTPS и как работает TLS?

3. 22:07:47 Скопировал 95 символов из чата

   Начнём с первого вопроса: объясните, пожалуйста, разницу между HTTP и HTTPS и как работает TLS?

4. 22:07:48 Потерял фокус окна на 40 с

5. 22:08:41 Вставил 613 символов в поле ответа

   HTTP передаёт запросы и ответы по сети в открытом виде: любой на пути (Wi‑Fi, провайдер) может прочитать или подменить данные. HTTPS — тот же HTTP, но поверх TLS: трафик шифруется, а сервер обычно подтверждает личность сертификатом от доверенного центра.
   
   TLS начинается с рукопожатия: клиент и сервер договариваются о версии протокола и алгоритмах, сервер отдаёт сертификат, клиент проверяет его и они совместно получают общий секретный ключ. Дальше этим ключом шифруется весь обмен (страницы, формы, куки). В браузере HTTPS виден по https:// и замку; без TLS пароли и сессии уязвимы к перехвату и подмене сайта.

6. 22:08:45

   Ответ через 1 мин 17 с

7. Кандидат 22:08:45

   HTTP передаёт запросы и ответы по сети в открытом виде: любой на пути (Wi‑Fi, провайдер) может прочитать или подменить данные. HTTPS — тот же HTTP, но поверх TLS: трафик шифруется, а сервер обычно подтверждает личность сертификатом от доверенного центра. TLS начинается с рукопожатия: клиент и сервер договариваются о версии протокола и алгоритмах, сервер отдаёт сертификат, клиент проверяет его и они совместно получают общий секретный ключ. Дальше этим ключом шифруется весь обмен (страницы, формы, куки). В браузере HTTPS виден по https:// и замку; без TLS пароли и сессии уязвимы к перехвату и подмене сайта.

8. Интервьюер 22:08:45

   Хороший, структурированный ответ, особенно про рукопожатие и проверку сертификата. Переходим к React: опишите жизненный цикл компонента и как useEffect соотносится с mount, update и unmount?

9. 22:08:50 Скопировал 88 символов из чата

   опишите жизненный цикл компонента и как useEffect соотносится с mount, update и unmount?

10. 22:08:51 Потерял фокус окна на 20 с

11. 22:09:13 Вставил 865 символов в поле ответа

    В функциональных компонентах нет классических методов вроде componentDidMount, но та же логика есть: первый рендер — «рождение», повторные — «обновления», снятие с DOM — «размонтирование». useEffect выполняется после того, как React отрисовал изменения на экране, поэтому это не момент «до paint», а фаза после коммита в DOM.
    
    При mount эффект с [] в зависимостях срабатывает один раз после первого рендера. При update эффект с [a, b] перезапускается, когда меняются зависимости: сначала вызывается cleanup от прошлого запуска, затем новый эффект. При unmount React вызывает cleanup (функцию, которую вернул эффект) — там отписываются от событий, отменяют таймеры и прерывают запросы.
    
    Не путайте с useLayoutEffect: он синхронный до отрисовки браузером и нужен реже (измерения DOM, синхронная правка UI). Для подписок, fetch и аналитики обычно достаточно useEffect.

12. 22:09:18 Потерял фокус окна на 1 с

13. 22:09:19

    Ответ через 34 с

14. Кандидат 22:09:19

    В функциональных компонентах нет классических методов вроде componentDidMount, но та же логика есть: первый рендер — «рождение», повторные — «обновления», снятие с DOM — «размонтирование». useEffect выполняется после того, как React отрисовал изменения на экране, поэтому это не момент «до paint», а фаза после коммита в DOM. При mount эффект с [] в зависимостях срабатывает один раз после первого рендера. При update эффект с [a, b] перезапускается, когда меняются зависимости: сначала вызывается cleanup от прошлого запуска, затем новый эффект. При unmount React вызывает cleanup (функцию, которую вернул эффект) — там отписываются от событий, отменяют таймеры и прерывают запросы. Не путайте с useLayoutEffect: он синхронный до отрисовки браузером и нужен реже (измерения DOM, синхронная правка UI). Для подписок, fetch и аналитики обычно достаточно useEffect.

15. Интервьюер 22:09:19

    Отличный ответ — особенно ценно, что упомянули порядок cleanup перед следующим эффектом и разницу с useLayoutEffect. Следующий вопрос: что происходит, когда вы вводите URL в браузере и нажимаете Enter? Расскажите по шагам, от DNS до отрисовки.

16. 22:09:23 Скопировал 108 символов из чата

    что происходит, когда вы вводите URL в браузере и нажимаете Enter? Расскажите по шагам, от DNS до отрисовки.

17. 22:09:24 Потерял фокус окна на 11 с

18. 22:09:35 Вставил 442 символов в поле ответа

    1. Парсинг URL — браузер определяет схему (https), хост, порт, путь и параметры; при необходимости дополняет https:// или отправляет в поиск.
    
    2. DNS — по имени хоста запрашивается IP: кэш ОС/браузера → резолвер провайдера → корневые/TLD/авторitative-серверы; ответ кэшируется по TTL.
    
    3. TCP и TLS — к IP:443 устанавливается TCP (SYN/ACK), затем TLS-handshake: сертификат, проверка, общий ключ; дальше HTTP идёт внутри зашифрованного канала.

19. 22:09:41

    Ответ через 21 с

20. Кандидат 22:09:41

    1. Парсинг URL — браузер определяет схему (https), хост, порт, путь и параметры; при необходимости дополняет https:// или отправляет в поиск. 2. DNS — по имени хоста запрашивается IP: кэш ОС/браузера → резолвер провайдера → корневые/TLD/авторitative-серверы; ответ кэшируется по TTL. 3. TCP и TLS — к IP:443 устанавливается TCP (SYN/ACK), затем TLS-handshake: сертификат, проверка, общий ключ; дальше HTTP идёт внутри зашифрованного канала.

21. Интервьюер 22:09:41

    Хорошо, но вы остановились на TLS-хендшейке. Уточните: что происходит дальше — какие запросы браузер отправляет серверу и как страница попадает на экран (парсинг HTML, загрузка ресурсов, построение DOM/CSSOM)?

22. 22:09:52 Потерял фокус окна на 2 с

23. 22:09:56 Вставил 571 символов в поле ответа

    4. HTTP — отправляется запрос (метод, заголовки, cookies); сервер отвечает статусом и телом; для HTML часто идут редиректы (301/302), HSTS может сразу принудить HTTPS.
    
    5. Разбор и загрузка ресурсов — HTML парсится потоково; находятся CSS, JS, шрифты, картинки; параллельно новые запросы (HTTP/2 мультиплексирование); JS может блокировать или отложить парсинг (defer/async).
    
    6. Отрисовка — из DOM и CSS строится render tree, layout (геометрия), paint (пиксели), compositing (слои/GPU); интерактивность наступает после выполнения скриптов и события load/DOMContentLoaded.

24. 22:10:01

    Ответ через 20 с

25. Кандидат 22:10:01

    4. HTTP — отправляется запрос (метод, заголовки, cookies); сервер отвечает статусом и телом; для HTML часто идут редиректы (301/302), HSTS может сразу принудить HTTPS. 5. Разбор и загрузка ресурсов — HTML парсится потоково; находятся CSS, JS, шрифты, картинки; параллельно новые запросы (HTTP/2 мультиплексирование); JS может блокировать или отложить парсинг (defer/async). 6. Отрисовка — из DOM и CSS строится render tree, layout (геометрия), paint (пиксели), compositing (слои/GPU); интерактивность наступает после выполнения скриптов и события load/DOMContentLoaded.

26. Интервьюер 22:10:01

    Отлично, теперь картина полная — от DNS до композитинга, и хорошо, что вспомнили HSTS и defer/async. Идём к JavaScript: чем отличаются var, let и const? И что такое hoisting?

27. 22:10:06 Скопировал 54 символов из чата

    чем отличаются var, let и const? И что такое hoisting?

28. 22:10:06 Потерял фокус окна на 3 с

29. 22:10:15 Потерял фокус окна на 4 с

30. 22:10:20 Вставил 752 символов в поле ответа

    var — функциональная область видимости: одна переменная на всю функцию, повторное объявление разрешено. let и const — блочная ({}): внутри if, цикла, блока они не «просачиваются» наружу.
    
    const нельзя переназначить (=), но если значение — объект или массив, его поля и элементы менять можно. let можно переназначать; для счётчиков и переприсваиваемых ссылок это нормальный выбор.
    
    Hoisting — на этапе компиляции объявления поднимаются в начало своей области: для var до присваивания значение undefined, для let/const — temporal dead zone до строки объявления, обращение раньше даёт ReferenceError. В современном JS обычно берут const по умолчанию, let когда нужно переприсвоение, var в новом коде почти не используют из‑за области видимости и hoisting.

31. 22:10:23

    Ответ через 22 с

32. Кандидат 22:10:23

    var — функциональная область видимости: одна переменная на всю функцию, повторное объявление разрешено. let и const — блочная ({}): внутри if, цикла, блока они не «просачиваются» наружу. const нельзя переназначить (=), но если значение — объект или массив, его поля и элементы менять можно. let можно переназначать; для счётчиков и переприсваиваемых ссылок это нормальный выбор. Hoisting — на этапе компиляции объявления поднимаются в начало своей области: для var до присваивания значение undefined, для let/const — temporal dead zone до строки объявления, обращение раньше даёт ReferenceError. В современном JS обычно берут const по умолчанию, let когда нужно переприсвоение, var в новом коде почти не используют из‑за области видимости и hoisting.

33. Интервьюер 22:10:23

    Полный и уверенный ответ — TDZ и мутабельность полей const упомянуты, хорошо. Следующий вопрос по TypeScript: что такое type narrowing и как работает discriminated union?

34. 22:10:26 Скопировал 92 символов из чата

    Следующий вопрос по TypeScript: что такое type narrowing и как работает discriminated union?

35. 22:10:27 Потерял фокус окна на 8 с

36. 22:10:36 Вставил 873 символов в поле ответа

    Type narrowing — когда TypeScript после проверки в коде сужает тип переменной: из широкого union или unknown остаётся конкретный вариант. Это делают typeof, instanceof, проверки на null/undefined, пользовательские type guards (x is Foo) и иногда assertion functions.
    
    Discriminated union — union, у которого у каждого варианта есть общее поле‑метка с литеральным типом (discriminant), например kind: 'success' | 'error'. В switch (result.kind) или в if (result.kind === 'error') TypeScript автоматически сужает тип: в ветке 'error' доступны только поля ошибки, в 'success' — только поля успеха.
    
    Так исчезают лишние optional‑поля и «угадывание» структуры: компилятор сам знает, какой shape у текущей ветки. На собеседовании часто просят показать обработку { kind: 'ok', data } | { kind: 'fail', message } без as и с исчерпывающим switch (иногда с never для забытых кейсов).

37. 22:10:42

    Ответ через 19 с

38. Кандидат 22:10:42

    Type narrowing — когда TypeScript после проверки в коде сужает тип переменной: из широкого union или unknown остаётся конкретный вариант. Это делают typeof, instanceof, проверки на null/undefined, пользовательские type guards (x is Foo) и иногда assertion functions. Discriminated union — union, у которого у каждого варианта есть общее поле‑метка с литеральным типом (discriminant), например kind: 'success' | 'error'. В switch (result.kind) или в if (result.kind === 'error') TypeScript автоматически сужает тип: в ветке 'error' доступны только поля ошибки, в 'success' — только поля успеха. Так исчезают лишние optional‑поля и «угадывание» структуры: компилятор сам знает, какой shape у текущей ветки. На собеседовании часто просят показать обработку { kind: 'ok', data } | { kind: 'fail', message } без as и с исчерпывающим switch (иногда с never для забытых кейсов).

39. Интервьюер 22:10:42

    Уверенный ответ — narrowing, discriminant, исчерпывающий switch с never-проверкой, всё на месте. Переходим дальше: чем отличаются any, unknown и never? И когда какой тип уместно использовать?

40. 22:10:44 Скопировал 77 символов из чата

     чем отличаются any, unknown и never? И когда какой тип уместно использовать?

41. 22:10:45 Потерял фокус окна на 8 с

42. 22:10:53 Вставил 843 символов в поле ответа

    any отключает проверку типов: с ним можно почти что угодно, но теряются автодополнение и защита от ошибок. Его оставляют для миграции с JS, редких legacy‑участков или когда тип действительно неизвестен и вы сознательно не проверяете — в новом коде лучше избегать.
    
    unknown — «значение есть, но тип неизвестен»: присвоить можно откуда угодно, а вот использовать (поля, вызов, арифметика) — только после сужения (typeof, guard, парсинг схемой). Это нормальный выбор для JSON из API, catch (e: unknown) и обёрток над внешними данными.
    
    never — тип, которому не соответствует ни одно значение: функция, которая всегда бросает или зацикливается, или ветка, которую TypeScript считает недостижимой. В switch по discriminated union параметр x: never в default ловит забытые кейсы; в generics never часто означает «этот вариант комбинации невозможен».

43. 22:10:59

    Ответ через 17 с

44. Кандидат 22:10:59

    any отключает проверку типов: с ним можно почти что угодно, но теряются автодополнение и защита от ошибок. Его оставляют для миграции с JS, редких legacy‑участков или когда тип действительно неизвестен и вы сознательно не проверяете — в новом коде лучше избегать. unknown — «значение есть, но тип неизвестен»: присвоить можно откуда угодно, а вот использовать (поля, вызов, арифметика) — только после сужения (typeof, guard, парсинг схемой). Это нормальный выбор для JSON из API, catch (e: unknown) и обёрток над внешними данными. never — тип, которому не соответствует ни одно значение: функция, которая всегда бросает или зацикливается, или ветка, которую TypeScript считает недостижимой. В switch по discriminated union параметр x: never в default ловит забытые кейсы; в generics never часто означает «этот вариант комбинации невозможен».

45. Интервьюер 22:10:59

    Отличный ответ — граница между any и unknown, сужение перед использованием и never в exhaustive switch описаны верно. Идём дальше: объясните разницу между shallow copy и deep copy объекта. Когда каждого из них достаточно и как их получить?

46. 22:11:01 Скопировал 108 символов из чата

    объясните разницу между shallow copy и deep copy объекта. Когда каждого из них достаточно и как их получить?

47. 22:11:02 Потерял фокус окна на 10 с

48. 22:11:11 Вставил 961 символов в поле ответа

    Shallow copy копирует только «верхний» слой: новый объект/массив, но вложенные объекты остаются теми же ссылками — изменение copy.nested.x затронет и оригинал. Его достаточно, когда структура плоская или вложенность намеренно общая (immutable‑паттерн: меняете только корень через spread).
    
    Получить shallow: { ...obj }, Object.assign({}, obj), [...arr], arr.slice(), structuredClone не нужен для этого уровня.
    
    Deep copy рекурсивно дублирует всё дерево — независимые вложенные объекты. Нужен, когда клонируете конфиг/состояние с глубокой вложенностью и потом мутируете копию, не трогая источник.
    
    Способы: structuredClone(obj) (современный стандарт, без функций, DOM, символов с нюансами), JSON.parse(JSON.stringify(obj)) только для JSON‑данных (теряются Date, undefined, функции), lodash cloneDeep для сложных legacy‑случаев. В React чаще избегают deep copy через иммутабельные обновления (копируете только изменённую ветку), а не клонируете весь граф целиком.

49. 22:11:15

    Ответ через 16 с

50. Кандидат 22:11:15

    Shallow copy копирует только «верхний» слой: новый объект/массив, но вложенные объекты остаются теми же ссылками — изменение copy.nested.x затронет и оригинал. Его достаточно, когда структура плоская или вложенность намеренно общая (immutable‑паттерн: меняете только корень через spread). Получить shallow: { ...obj }, Object.assign({}, obj), [...arr], arr.slice(), structuredClone не нужен для этого уровня. Deep copy рекурсивно дублирует всё дерево — независимые вложенные объекты. Нужен, когда клонируете конфиг/состояние с глубокой вложенностью и потом мутируете копию, не трогая источник. Способы: structuredClone(obj) (современный стандарт, без функций, DOM, символов с нюансами), JSON.parse(JSON.stringify(obj)) только для JSON‑данных (теряются Date, undefined, функции), lodash cloneDeep для сложных legacy‑случаев. В React чаще избегают deep copy через иммутабельные обновления (копируете только изменённую ветку), а не клонируете весь граф целиком.

51. Интервьюер 22:11:15

    Полный ответ, плюс приятно, что связали с иммутабельными обновлениями в React. Следующий вопрос: что такое reconciliation и virtual DOM? Как React решает, что именно перерисовать?

52. 22:11:19 Скопировал 100 символов из чата

    Следующий вопрос: что такое reconciliation и virtual DOM? Как React решает, что именно перерисовать?

53. 22:11:20 Потерял фокус окна на 7 с

54. 22:11:27 Вставил 914 символов в поле ответа

    Virtual DOM — лёгкое дерево описания UI в памяти (элементы, props, дети). После изменения state React строит новое дерево и сравнивает его со снимком прошлого рендера — это reconciliation (diff).
    
    Сравнение идёт сверху вниз с эвристиками: элементы с разным type (например div → span) — старый поддерево снимается, новое монтируется заново. При том же type React обновляет props и рекурсивно обходит детей; без key соседние элементы в списке могут сопоставиться неверно, поэтому для списков нужны стабильные key.
    
    На экран попадает не «весь DOM заново», а минимальный набор операций, которые React передаёт в React DOM (createElement, setAttribute, insert, remove, текст). Commit — фаза применения этих изменений к реальному DOM; render — только вычисление нового дерева и diff. memo, useMemo и useCallback уменьшают лишние render-проходы, но финальное обновление DOM всё равно решает reconciler по результату diff.

55. 22:11:33

    Ответ через 18 с

56. Кандидат 22:11:33

    Virtual DOM — лёгкое дерево описания UI в памяти (элементы, props, дети). После изменения state React строит новое дерево и сравнивает его со снимком прошлого рендера — это reconciliation (diff). Сравнение идёт сверху вниз с эвристиками: элементы с разным type (например div → span) — старый поддерево снимается, новое монтируется заново. При том же type React обновляет props и рекурсивно обходит детей; без key соседние элементы в списке могут сопоставиться неверно, поэтому для списков нужны стабильные key. На экран попадает не «весь DOM заново», а минимальный набор операций, которые React передаёт в React DOM (createElement, setAttribute, insert, remove, текст). Commit — фаза применения этих изменений к реальному DOM; render — только вычисление нового дерева и diff. memo, useMemo и useCallback уменьшают лишние render-проходы, но финальное обновление DOM всё равно решает reconciler по результату diff.

57. Интервьюер 22:11:33

    Отличный ответ — эвристики diff, роль key, разделение фаз render и commit всё описаны. Следующий вопрос: что такое generic и зачем он нужен? Приведите пример из практики.

58. 22:12:01 Скопировал 65 символов из чата

    что такое generic и зачем он нужен? Приведите пример из практики.

59. 22:12:02 Потерял фокус окна на 10 с

60. 22:12:12 Вставил 771 символов в поле ответа

    Generic — параметр типа: одна и та же логика работает с разными типами, а связь «вход → выход» сохраняется для компилятора. Без него пришлось бы дублировать функции или падать в any и терять проверки.
    
    Зачем: переиспользуемый код (API, коллекции, хелперы) остаётся типобезопасным — TypeScript знает, что вернулось именно то, что вы ожидали.
    
    Пример из практики — обёртка над fetch, которая парсит JSON в заданный тип:
    
    async function getJson<T>(url: string): Promise<T> {
      const res = await fetch(url);
      if (!res.ok) throw new Error(res.statusText);
      return res.json() as Promise<T>;
    }
    type User = { id: string; name: string };
    const user = await getJson<User>('/api/me'); // user: User
    В React тот же приём у useState<User | null>(null) и у пропсов вроде List<TItem>.

61. 22:12:23

    Ответ через 50 с

62. Кандидат 22:12:23

    Generic — параметр типа: одна и та же логика работает с разными типами, а связь «вход → выход» сохраняется для компилятора. Без него пришлось бы дублировать функции или падать в any и терять проверки. Зачем: переиспользуемый код (API, коллекции, хелперы) остаётся типобезопасным — TypeScript знает, что вернулось именно то, что вы ожидали. Пример из практики — обёртка над fetch, которая парсит JSON в заданный тип: async function getJson<T>(url: string): Promise<T> { const res = await fetch(url); if (!res.ok) throw new Error(res.statusText); return res.json() as Promise<T>; } type User = { id: string; name: string }; const user = await getJson<User>('/api/me'); // user: User В React тот же приём у useState<User | null>(null) и у пропсов вроде List<TItem>.

63. Интервьюер 22:12:23

    Хороший пример с fetch-обёрткой и связью с useState — понятно и по делу. Следующий вопрос: чем Promise отличается от callback? Что такое Promise.all и Promise.race?

64. 22:12:25 Скопировал 91 символов из чата

    Следующий вопрос: чем Promise отличается от callback? Что такое Promise.all и Promise.race?

65. 22:12:26 Потерял фокус окна на 3 с

66. 22:12:33 Потерял фокус окна на 2 с

67. 22:12:35 Вставил 951 символов в поле ответа

    Callback — функция, которую вызывают, когда асинхронная работа готова; при нескольких шагах легко получить «лесенку» вложенных колбэков (callback hell) и сложнее централизованно ловить ошибки. Promise — объект с одним исходом: pending → fulfilled или rejected; цепочка через .then/.catch/finally или async/await, ошибка пробрасывается по цепочке.
    
    Promise.all([p1, p2, …]) ждёт все промисы; результат — массив значений в том же порядке. Если хотя бы один rejected — весь all сразу rejected с этой ошибкой (остальные могут ещё выполняться). Удобно для независимых параллельных запросов (профиль + настройки + список).
    
    Promise.race([p1, p2, …]) завершается как только первый промис settled — с его значением или ошибкой. Типичные кейсы: таймаут (Promise.race([fetch(url), sleep(5000)])) или «кто быстрее ответил». На собесе добавьте: Promise.allSettled — дождаться всех без провала целиком; Promise.any — первый успех (если все упали — AggregateError).

68. 22:12:45

    Ответ через 22 с

69. Кандидат 22:12:45

    Callback — функция, которую вызывают, когда асинхронная работа готова; при нескольких шагах легко получить «лесенку» вложенных колбэков (callback hell) и сложнее централизованно ловить ошибки. Promise — объект с одним исходом: pending → fulfilled или rejected; цепочка через .then/.catch/finally или async/await, ошибка пробрасывается по цепочке. Promise.all([p1, p2, …]) ждёт все промисы; результат — массив значений в том же порядке. Если хотя бы один rejected — весь all сразу rejected с этой ошибкой (остальные могут ещё выполняться). Удобно для независимых параллельных запросов (профиль + настройки + список). Promise.race([p1, p2, …]) завершается как только первый промис settled — с его значением или ошибкой. Типичные кейсы: таймаут (Promise.race([fetch(url), sleep(5000)])) или «кто быстрее ответил». На собесе добавьте: Promise.allSettled — дождаться всех без провала целиком; Promise.any — первый успех (если все упали — AggregateError).

70. Интервьюер 22:12:45

    Отличный ответ — state machine промиса, поведение all при reject и практические кейсы race раскрыты, а упоминание allSettled и any только плюс. Осталось два вопроса. Предпоследний: когда использовать useMemo, useCallback и React.memo? И какие подводные камни есть у каждого из них?

71. 22:12:49 Скопировал 115 символов из чата

    Предпоследний: когда использовать useMemo, useCallback и React.memo? И какие подводные камни есть у каждого из них?

72. 22:12:50 Потерял фокус окна на 2 с

73. 22:12:59 Потерял фокус окна на 2 с

74. 22:13:02 Вставил 1096 символов в поле ответа

    useMemo кэширует результат вычисления между рендерами, пока не изменились зависимости; имеет смысл при тяжёлых расчётах или когда нужна стабильная ссылка на объект/массив для зависимостей дочернего memo. Камни: сам useMemo не бесплатен; неправильный массив deps → устаревшие данные; оборачивать простые примитивы бессмысленно.
    
    useCallback кэширует функцию по deps; нужен, если передаёте колбэк в React.memo-ребёнка или в хук с чувствительными deps (useEffect). Камни: без memo у ребёнка стабильная функция не уменьшит его ререндеры; deps забыли — stale closure; «обернуть всё» раздувает код.
    
    React.memo пропускает ререндер компонента, если props поверхностно равны прошлым; уместен для часто обновляемого родителя и дорогого чистого UI. Камни: сравнение shallow — новый {}/[]/inline-функция каждый раз ломает memo; дети всё равно ререндерятся, если ререндерится родитель и контекст изменился.
    
    Правило: сначала профилируйте или видите лишние ререндеры; в React 19 с Compiler ручной memo часто не нужен. Не мемоизируйте «на всякий случай» — это усложняет код и может замедлить лёгкие компоненты.

75. 22:13:06

    Ответ через 21 с

76. Кандидат 22:13:06

    useMemo кэширует результат вычисления между рендерами, пока не изменились зависимости; имеет смысл при тяжёлых расчётах или когда нужна стабильная ссылка на объект/массив для зависимостей дочернего memo. Камни: сам useMemo не бесплатен; неправильный массив deps → устаревшие данные; оборачивать простые примитивы бессмысленно. useCallback кэширует функцию по deps; нужен, если передаёте колбэк в React.memo-ребёнка или в хук с чувствительными deps (useEffect). Камни: без memo у ребёнка стабильная функция не уменьшит его ререндеры; deps забыли — stale closure; «обернуть всё» раздувает код. React.memo пропускает ререндер компонента, если props поверхностно равны прошлым; уместен для часто обновляемого родителя и дорогого чистого UI. Камни: сравнение shallow — новый {}/[]/inline-функция каждый раз ломает memo; дети всё равно ререндерятся, если ререндерится родитель и контекст изменился. Правило: сначала профилируйте или видите лишние ререндеры; в React 19 с Compiler ручной memo часто не нужен. Не мемоизируйте «на всякий случай» — это усложняет код и может замедлить лёгкие компоненты.

77. Интервьюер 22:13:06

    Отличный структурированный ответ — и подводные камни, и здравый принцип «сначала профилируйте», а упоминание React Compiler показывает, что следите за развитием экосистемы. Последний теоретический вопрос: объясните разницу между == и ==. И приведите пример неожиданного поведения ==.

78. 22:13:09 Скопировал 110 символов из чата

    Последний теоретический вопрос: объясните разницу между == и ==. И приведите пример неожиданного поведения ==.

79. 22:13:10 Потерял фокус окна на 9 с

80. 22:13:19 Вставил 702 символов в поле ответа

    Скорее всего, имелось в виду == и ===. === (strict) сравнивает без приведения типов: разные типы → сразу false, для объектов — одна и та же ссылка. == (loose) перед сравнением приводит типы по правилам JS, отсюда сюрпризы.
    
    Когда что: в современном коде почти всегда === (и !==); == — только если вы осознанно хотите такое приведение (на практике это редкость).
    
    Неожиданное поведение ==:
    
    [] == false   // true  ([] → "" → 0, false → 0)
    null == undefined  // true
    '0' == 0      // true
    '' == 0       // true
    Пустой массив к false «равен» из‑за цепочки ToPrimitive → строка → число. null == undefined — единственная пара «похожих» значений, которая при == считается равной; с === оба случая дают false.

81. 22:13:24

    Ответ через 18 с

82. Кандидат 22:13:24

    Скорее всего, имелось в виду == и ===. === (strict) сравнивает без приведения типов: разные типы → сразу false, для объектов — одна и та же ссылка. == (loose) перед сравнением приводит типы по правилам JS, отсюда сюрпризы. Когда что: в современном коде почти всегда === (и !==); == — только если вы осознанно хотите такое приведение (на практике это редкость). Неожиданное поведение ==: [] == false // true ([] → "" → 0, false → 0) null == undefined // true '0' == 0 // true '' == 0 // true Пустой массив к false «равен» из‑за цепочки ToPrimitive → строка → число. null == undefined — единственная пара «похожих» значений, которая при == считается равной; с === оба случая дают false.

83. Интервьюер 22:13:24

    Да, верно — == и ===, спасибо за уточнение. Ответ отличный: правила приведения, null == undefined и цепочка ToPrimitive на примере [] == false раскрыты хорошо. На этом теоретическая часть завершена — благодарю за развёрнутые ответы по JavaScript, TypeScript, React и сетям, вы показали уверенное владение материалом. Дальше перейдём к практическому заданию, дайте минуту подготовить его описание.

Практика

Anagram

1. Интервьюер 22:13:24

   Теория закончена, переходим к задаче. Слева условие и редактор. «Запустить код» прогоняет открытые тесты и пишет вывод в консоль снизу — скрытые тесты на этом шаге не трогаются. Когда будете готовы, «Сдать решение»: прогонятся все тесты, включая скрытые, и интервью завершится. Если застряли, справа в чате можно спросить наводку — готовое решение целиком я не дам.

2. 22:14:18 Скопировал из редактора кода

3. 22:14:19 Потерял фокус окна на 4 с

4. 22:14:29 Потерял фокус окна на 2 с

5. 22:14:32 Вставил 147 символов в редактор кода

   function solve(a, b) {
     if (a.length !== b.length) return false;
     const norm = (s) => [...s].sort().join('');
     return norm(a) === norm(b);
   }

6. 22:14:35 Потерял фокус окна на 7 с