Загрузка…
Загрузка…
frontend / middle / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Код
Реализуйте функцию глубокого копирования (deep clone) для объектов. Ограничиваемся примитивами, объектами и массивами; прототипы, конструкторы и циклические ссылки не обрабатываем.
Задача 1 (лайвкодинг). Кандидат пошёл через обход в ширину со стеком/очередью и сильно усложнил; интервьюер подводил к рекурсии.
02
Теория
Чем стек отличается от очереди?
Теор-врезка по ходу задачи 1.
03
Теория
Зачем вообще нужно глубокое копирование, где оно применяется?
Задача 1.
04
Теория
Чем плоха мутабельность и почему мы хотим каждый раз создавать новый объект (иммутабельность)?
Заметки
Транскрипт — видео с YouTube-канала «IT Ростик» о собеседовании на позицию frontend-разработчика в компанию ТБН (название из текста распознано неуверенно: «TБН»/«ТБН»). Формат — онлайн лайвкодинг + разбор задач по React. Структура: 4 задачи (deep clone, аналог Promise.any, разбор ререндеринга React-компонентов, приложение с fetch и input) + блок уточняющих вопросов после собеса. Собеседование проходило «пару месяцев назад». Автор сам оценивает собес как крайне неудачный. Упоминается прошлый собес автора, где просили использовать только промисы без async/await (без названия компании).
Подготовка
Хорошо отработать классические алгоритмические задачи на JS (глубокое копирование объектов через рекурсию, а не через надуманный BFS со стеком/очередью). Понимать обходы в ширину/глубину и когда какой уместен. Знать event loop и очередь микротасок (почему синхронный reject отдаёт пустой массив). Уметь реализовывать аналоги промис-комбинаторов (Promise.any) с сохранением порядка ошибок и счётчиком вместо опоры на length. Глубоко понимать ререндеринг React (useCallback, React.memo, useRef, контролируемые инпуты). Помнить, что fetch не бросает исключение на HTTP-ошибки. Знать про debounce и встроенные способы клонирования (structuredClone, lodash cloneDeep, spread для поверхностного копирования).
Стиль интервьюера
Интервьюер доброжелательный и поддерживающий: активно направляет наводящими вопросами, не сбивает («я просто спрашиваю, ты пиши»), предлагает перейти к следующей задаче и вернуться позже. Использует сократический подход — задаёт уточняющие вопросы вместо прямых подсказок, подводя кандидата к правильному решению (например, к рекурсии вместо обхода в ширину). После собеса задаёт дополнительные теоретические вопросы для оценки. Фидбек — отказ с формулировкой «нужно подготовиться получше».
Задача 1. Обсуждали хранение объекта по ссылке и подписку на изменения.
05
Теория
Как проверить, что значение является именно объектом?
Задача 1.
06
Теория
Если придёт массив, как поведёт себя проверка на объект и как обрабатывать массив?
Задача 1. Массив наследует прототип от объекта.
07
Теория
Почему ты выбрал для обхода очередь/стек (обход в ширину), а не в глубину?
Задача 1.
08
Теория
Как мы проходим дерево/объект в глубину (DFS)?
Задача 1.
09
Теория
Какое было бы преимущество, если бы ты обходил структуру в глубину, а не в ширину (для задачи копирования)?
Задача 1. Интервьюер подводил к тому, что рекурсия/DFS здесь удобнее.
10
Код
Реализуйте аналог Promise.any: на вход массив промисов, резолвимся первым зарезолвленным (не дожидаясь остальных); если упали все — реджектимся, при этом порядок ошибок должен соответствовать порядку исходных промисов.
Задача 2 (лайвкодинг). Кандидат столкнулся с тем, что reject срабатывал синхронно с пустым массивом, с empty item в массиве ошибок и с опорой на length — пришли к счётчику.
11
Теория
Почему в текущей реализации reject выбрасывает пустой массив ошибок сразу (синхронно)? Объясни через event loop и очередь микротасок.
Задача 2.
12
Теория
Можно ли в этой задаче опираться на errors.length (в т.ч. при предзаполнении массива null или при наличии empty item)? На что тогда опираться, чтобы понять, что упали все промисы?
Задача 2. Пришли к выводу, что нужен отдельный счётчик.
13
Теория
Даны компоненты (App, Parent, Child, кастомный хук useForceUpdate). Какие компоненты будут рендериться, если нажать на кнопку render?
Задача 3 (разбор рендеринга React). Изначально renderCount закомментирован — внешний стейт не привязан к UI.
14
Теория
Будет ли рендериться компонент Child при наборе текста в инпуте? Почему?
Задача 3. Обсуждали пересоздание handleChange и пропсы; кандидат упомянул useCallback.
15
Теория
После раскомментирования renderCount и нажатия на кнопку render — почему рендерятся все компоненты?
Задача 3. Обсуждали useRef и прямую подмену значения в DOM vs ререндер.
16
Код
Как сделать так, чтобы при нажатии на кнопку render компонент Parent не ререндерился?
Задача 3. Кандидат предлагал useCallback и React.memo.
17
Код
Создайте простое приложение: поле ввода, по вводу вызывается getPeople (fetch), из results выведите список name.
Задача 4 (лайвкодинг). Использовали два useState (results, value) и useEffect на изменение value.
18
Код
Добавьте индикацию состояния загрузки (показывать «loading», пока ждём ответа).
Задача 4.
19
Код
Обработайте кейс, когда API отвечает ошибкой (404 для несуществующего персонажа) и выведите сообщение об ошибке. Учтите, что fetch не бросает исключение на HTTP-ошибку.
Задача 4. Обсуждали, что fetch не выбрасывает ошибку, нужно смотреть на поле в ответе; также сброс ошибки/результатов при успешном запросе.
20
Теория
Чем отличается async/await от промисов?
Задача 4. Кандидат назвал async/await синтаксическим сахаром над промисами (упомянул корутины).
21
Теория
Как сделать, чтобы запрос отправлялся не на каждый ввод в инпут?
Задача 4. Ответ — debounce с таймаутом ~300мс.
22
Теория
Знаешь ли встроенные/библиотечные методы для глубокого копирования, которые чаще используют на практике?
Пост-собес, уточняющие вопросы по задаче 1. Кандидат назвал lodash cloneDeep и structuredClone.
23
Теория
Какие минусы есть у structuredClone?
Пост-собес.
24
Теория
Какой ещё есть совсем простой «старый» способ глубокого копирования (кроме structuredClone и lodash)? И чем копирование через spread отличается — какой уровень оно копирует?
Пост-собес. Кандидат упомянул spread (копирует только верхний уровень, вложенное — по ссылке).