Вводные вопросы

• В какой компании ты работал и что приходилось там делать?

• Как проходил код-ревью на прошлом месте работы?

• Сколько людей было в команде?

• На каком стеке работали?

• Как вы делали задачи?

• Расскажи про свой опыт?

• Расскажи, какие самые сложные или интересные задачи ты выполнял?

HTML / CSS

• Работал ли ты с iframe?

• Нужен ли БЭМ в 2025 году?

• Что такое flex и flex-shrink?

• В чём разница между display: none и visibility: hidden?

• Как работает z-index?

• Разница между async и defer для script

• Что такое CSS-переменные и чем они отличаются от переменных препроцессоров?

• Для чего нужны медиазапросы (@media)?

• Что такое accessibility?

Javascript

• Что такое this?

• Что такое bind, apply, call и чем они отличаются?

• Разница между обычной и стрелочной функцией?

• Что такое Promise и какие методы он имеет?

• Можно ли создать свой Promise без использования встроенного Promise?

• Зачем нужен async/await?

• Разница между var, let и const?

• Какие типы данных существуют в JS?

• Что такое хэш?

• Что такое HTTP и из чего состоит HTTP-запрос?

• Основные принципы ООП?

• Какие методы заморозки объекта существуют?

• Что такое наследование?

• Какие паттерны программирования ты знаешь?

• Что такое иммутабельность?

• Когда применять debounce и throttle?

• Разница между localStorage, cookies и sessionStorage?

• Какие методы массива не мутируют оригинальный массив?

• Что такое прототипы?

• Что стоит в начале цепочки прототипов?

• Что такое Event Loop и зачем он нужен?

Typescript

• Что такое дженерики?

• Разница между type и interface?

• Какие утилитарные типы ты знаешь?

• Что такое enum?

• Зачем нужен extends?

• Что такое кортежи?

• Что такое infer и где применяется?

• В чём плюсы TypeScript? Нужен ли он в проектах?

• Разница между any и unknown, void и never?

• Что такое Type Guard?

React

• Чем тебе нравится React?

• Плюсы и минусы React?

• Что такое Virtual DOM и чем он отличается от реального DOM?

• Разница между функциональными и классовыми компонентами?

• Какие хуки ты знаешь?

• Что такое мемоизация (memo)?

• Разница между useCallback и useMemo?

• Что такое useEffect и чем он отличается от useLayoutEffect?

• Разница между props и state?

• Работал ли ты с порталами? Что можешь рассказать?

• Что такое prop drilling?

• Что такое Context?

• Этапы жизненного цикла компонента?

• Что вызывает ререндер компонента?

• Что такое Error Boundaries?

• Что такое Lazy Loading?

NextJS

• Что такое гидратация (Hydration)?

• Какие виды рендеринга существуют (SSR, SSG, ISR, CSR)?

• Разница между серверными и клиентскими компонентами? Для чего use server и use client?

• Зачем нужны компоненты кэша (use cache)?

• Разница между Pages Router и App Router?

• Что такое Server Actions и зачем они нужны?

• Какие встроенные компоненты Next.js ты знаешь?

---

Вводные вопросы

В какой компании ты работал и что приходилось там делать?

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

Как проходил код-ревью на прошлом месте работы?

Расскажи о процессе, используемых инструментах и стиле общения в команде.

Сколько людей было в команде?

Укажи размер команды и твою роль в ней.

На каком стеке работали?

Опиши фронтенд, бэкенд, базы данных и инструменты, которые использовались.

Как вы делали задачи?

Опиши workflow, Agile/Scrum практики, распределение задач.

Расскажи про свой опыт?

Кратко о проектах, технологиях, сложностях и достижениях.

Расскажи, какие самые сложные или интересные задачи ты выполнял?

Приведи примеры сложных решений, архитектурных решений, интересных проектов.

---

HTML / CSS

Работал ли ты с ifram?

iframe - это окно внутри сайта, в котором можно показать другой сайт.

Нужен ли БЭМ в 2025 году?

БЭМ в 2025 году особо и не нужен, но если вы используете чистый CSS или SCSS(без CSS-in-JS) или старую кодовую базу, в которой уже внедрен БЭМ, то нужен.

Что такое flex и flex-shrink?

flex-shrink — это свойство, которое говорит элементу, насколько сильно он может сжиматься, если не хватает места в контейнере.
flex — это сокращённая запись трёх свойств, которые управляют поведением flex-элемента:

• flex-grow — насколько элемент может увеличиваться, если есть свободное место.

• flex-shrink — насколько элемент может сжиматься, если места не хватает.

• flex-basis — начальный размер элемента до распределения свободного места.

В чём разница между display: none и visibility: hidden?

display: none полностью убирает элемент со страницы, а visibility: hidden лишь скрывает элемент, но место под него остаётся.

Как работает z-index?

z-index — это CSS-свойство, которое определяет, какой элемент будет “сверху”, если они перекрываются на странице.

Разница между async и defer для script

• async - это атрибут тега script, который загружает скрипт параллельно с HTML

• defer делает тоже самое, но скрипт выполняется только после того, как весь HTML будет загружен и разобран.

Что такое CSS-переменные и чем они отличаются от переменных препроцессоров?

CSS-переменные (или custom properties) — это переменные, определённые прямо в CSS,
которые можно менять в реальном времени через стили, JS или каскад.

• Отличаются они от переменных в препроцессерах тем, что css-переменные работают в браузере, во время выполнения, а переменные в препроцессерах до браузера.

• CSS-переменные можно менять как и в CSS, так и в JS, а переменные в препроцессерах менять нельзя, поскольку у них значения фиксированные.

Для чего нужны медиазапросы (@media)?

@media(...) запросы (или медиа-запросы) — это механизм в CSS,
который позволяет изменять стили в зависимости от устройства, экрана или других условий.

Проще говоря, @media(...) нужны, чтобы сайт выглядел хорошо на разных устройствах — телефоне, планшете, ноутбуке и т.д.

Что такое accessibility?

Accessibility — это про то, чтобы любой пользователь,
независимо от устройства или особенностей, мог понять, увидеть и использовать сайт.

---

JAVASCRIPT

Что такое this?

this —это контекст выполнения функции, то есть на что указывает функция в момент вызова.

Что такое bind, apply, call и чем они отличаются?

Все три метода позволяют явно задать контекст (this) при вызове функции.

• call(thisArg, arg1, arg2, ...) - вызывает функцию сразу, передавая аргументы через запятую.

• apply(thisArg, [args]) - вызывает функцию сразу, передавая аргументы массивом

• bind(thisArg) - не вызывает, а создаёт новую функцию с закреплённым this

Разница между обычной и стрелочной функцией?

• Обычная функция имеет свой this и arguments, её можно вызвать с new.

• Стрелочная функция не имеет своего this, arguments и не может быть вызвана с new.

Что такое Promise и какие методы он имеет?

Promise — это метод для работы с асинхронным кодом. Он имеет 3 статуса выполнения:

• pending(ожидание)

• fulfilled(выполнено)

• rejected(отклонено)

  Так же, у него есть методы + статические методы:

• then()— вызывается при успешном выполнении,

• catch() — вызывается при ошибке,

• finally() — в любом случае.

• Promise.all() – ждёт завершения всех промисов, если хоть один отклонится – весь отклоняется.

• Promise.race() – возвращает результат первого завершившегося промиса (успешного или отклонённого).

• Promise.allSettled() – ждёт завершения всех промисов, возвращает массив с результатами успех/ошибка каждого.

• Promise.any() – ждёт первого успешного промиса, игнорирует ошибки остальных; если все промисы отклонены – возвращает ошибку.

Можно ли создать свой Promise без использования встроенного Promise?

Да, можно реализовать аналог промиса через колбэки и состояния (pending, fulfilled, rejected), но вручную — это сложно и нужно только для понимания внутренней работы Promise.

Зачем нужен async/await?

async нужен для того, чтобы сделать функцию асинхронной, это значит, что если даже функция возвращает "ничего", то благодаря async, функция в любом случае вернет промис

awaitуже нужен для того, чтобы поставить приоритет какой-то строчке функции и до тех пор, пока эта строчка не выполнится, другой код функции выполняться не будет.

Разница между var, let и const?

• var — функциональная область видимости, можно менять.

• let — блочная область видимости, можно менять.

• const — блочная область видимости, нельзя менять.

Какие типы данных существуют в JS?

Есть примитивные и непримитивные типы данных.

• Примитивные: string, number, boolean, null, undefined, Symbol, bigInt.

• Непримитивные: Object, array, function, map, set.

Что такое хэш?

Хэш — это результат работы хэш-функции, которая преобразует данные в короткую строку.

Он применяется для хранения паролей, проверки целостности данных и сравнения.

Что такое HTTP и из чего состоит HTTP-запрос?

HTTP (HyperText Transfer Protocol) — это протокол, по которому браузер и сервер обмениваются данными.

Работает по схеме “запрос–ответ” и использует методы: GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD, TRACE.

Основные принципы ООП

• Инкапсуляция — скрытие внутренних деталей объекта, которые ты можешь изменить лишь через публичные методы или свойства объекта, но напрямую изменить эти детали ты не можешь.

• Наследование — возможность создавать новые классы на основе существующих.

• Полиморфизм — разные объекты могут использовать один интерфейс по-разному.

• Абстракция — возможность видеть лишь важные свойства и методы, но не видеть скрытые детали реализации.

Какие методы заморозки объекта существуют?

• Object.freeze(obj) — полная заморозка.

• Object.seal(obj) — запрещает добавление/удаление свойств, но позволяет менять существующие.

• Object.preventExtensions(obj) — запрещает добавление новых свойств.

Что такое наследование?

Наследование - это создание новых классов на основе существующих, чтобы переиспользовать код, расширять и изменять его поведение без дублирования.

Какие паттерны программирования ты знаешь?

— SOLID:

— S(Single Responsibility Principle) - класс должен иметь только одну причину для изменения.

— O(Open/Closed Principle) - классы должны быть открыты для расширения, но закрыты для изменения.

— L(Liskov Substitution Principle) - дочерний класс может добавлять новые методы и свойства, но не должен изменять методы и свойства базового класса(от которого наследуется дочерний).

— I(Interface Segregation Principle) - сущности не должны зависеть от интерфейсов, которые они не используют.

— D(Dependency Inversion Principle) - модули высшего уровня не должны зависеть от модулей низшего модуля.

Остальные принципы:

— DRY - заключается в том, чтобы избегать дублирования кода.

— KISS - заключается в том, что код должен быть максимально простыми и читабельным.

— YAGNI - заключается в том, чтобы не создавать ненужные функции и т.п, которые ты не используешь

Что такое иммутабельность?

Иммутабельность - это значит, что свойства данных нельзя изменять после их создания.

Когда применять debounce и throttle?

• debounce — задержка выполнения функции, например при вводе в поиск.

• throttle — ограничение частоты выполнения функции, например при скролле.

Разница между localStorage, cookies и sessionStorage?

— localStorage хранит данные во вкладке до тех пор, пока мы не закроем весь браузер и даже если мы откроем эту страницу в новой вкладке, то они все равно останутся.

— sessionStorage хранит данные во вкладке до тех пор, пока мы не закроем ее и если открыть эту страницу в новой вкладке, их там не будет.

— cookies такой же, как и localStorage, только он отправляет данные на сервер с каждым запросом.

Какие методы массива не мутируют оригинальный массив?

Методы массива, которые не мутируют сам массив:

— map

— filter

— include

— sort

— split

— reduce

Что такое прототипы?

Прототипы - это объект, от которого другие объекты наследуют свойства и методы.

Что стоит в начале цепочки прототипов?

В самом начале всех прототипов (точнее, в корне всей цепочки) находится Object.prototype. Он — "родитель всех родителей". После него идёт null, что означает конец цепочки.

Что такое Event Loop и зачем он нужен?

Event Loop - это механизм в JavaScript, который следит за очередью задач и решает, когда выполнять код, когда обработчики событий и когда таймеры. Он нужен для того, чтобы делать JS асинхронным, не многопоточным.

Зачем придумали:

— Чтобы не блокировать интерфейс.

— Чтобы обрабатывать события пользователя, запросы к серверу, таймеры в одном потоке.

— Чтобы можно было писать асинхронный код с колбэками, промисами и async/await.

---

TypeScript

Что такое дженерики?

Простыми словами, дженерики - это все, что мы прописываем в угловых скобках, допустим когда мы типизируем useState<string>("").

Разница между type и interface?

• type — описывает любые типы данных, объединяется через & или |.

• interface — описывает объект, можно расширять и объединять одинаковые имена.

Какие утилитарные типы ты знаешь?

— Pick - Оставляет в типе только те свойства, которые мы передали в него 2 параметром.

— Omit - Оставляет в типе только те свойства, которые мы не передали в него 2 параметром.

— Partial - делает все свойства необязательными.

— Required - делает все свойства обязательными.

— Readonly - делает все свойства только для чтения(нельзя изменить).

— Exclude - исключает из T все типы, которые также присутствуют в U.

— Extract - противоположность Exclude. Извлекает только совпадающие типы.

— ReturnType - возвращает тип ответа, который приходит из функции.

— Record - принимает первым параметром ключи объекта, а вторым — тип значения.

— Parameters - возвращает тип параметров функции в виде кортежа(массива).

— NonNullable - удаляет из типа null и undefined.

Что такое enum?

enum - это список постоянных значений с именами. Он нужен, чтобы вместо непонятных чисел или строк использовать понятные слова.

Зачем нужен extends?

extends - это ключевое слово, которое означает «наследуется от» или «расширяет». Простыми словами, он нужен для того, чтобы мы могли унаследовать базовый класс, тип и т.д в других места.

Что такое кортежи?

Кортежи - это массив, в котором мы явно указываем, сколько элементов и какого типа они будут.

Что такое infer и где применяется?

infer - это ключевое слово, которое используется в условных типах для того, чтобы вывести тип из другого типа. Проще говоря, он нужен для того, чтоб из какого-то типа достать ЧТО-ТО и вывести то самое ЧТО-ТО в случае того, если условие возвращает true.

В чём плюсы TypeScript? Нужен ли он в проектах?

Плюсы TS в том, что мы можем не бояться за то, что передаем.

Например, пропсы не того типа и за это вообще не нужно бояться(конечно если ты правильно все типизировал), поскольку нам вернется ошибка, если пропс не того типа, поэтому я считаю, что TS нужен почти во всех проектах.

JS отличается от TS тем, что он малотипизированный, а TS сильно типизированный. JS проверяет ошибки только во время runtime(выполнения кода), а TS во время компиляции(во время кодинга).

Разница между any и unknown, void и never?

• any — любой тип без проверки.

• unknown — безопасный any, нужно проверить тип перед использованием.

• void — функция ничего не возвращает (или undefined).

• never — функция никогда не возвращает результат.

Что такое Type Guard?

Type guard - это функция или выражение в TypeScript, которое проверяет тип переменной и, в случае успеха, сообщает компилятору, что в данном блоке кода тип переменной можно сузить до более конкретного.

---

React

Чем тебе нравится React?

Мне нравится React тем, что у него есть JSX, как по мне, очень полезная штука.

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

Плюсы и минусы React

Плюсы:

— Компонентный подход

— Virtual DOM

— Хуки

— Порталы

— JSX

Минусы:

— React решает только отображение. Маршрутизация, состояние, работа с API — всё нужно подключать сторонними библиотеками.

— SEO-проблемы без SSR. По умолчанию React рендерится на клиенте, что плохо для SEO. Нужно использовать Next.js или другой SSR.

— Производительность при неправильном использовании.

Что такое Virtual DOM и чем он отличается от реального DOM?

VDOM(Virtual DOM) - это копия настоящего DOM. Отличается от от обычного DOM тем, что вместо того, чтобы вносить изменения в СТАРЫЙ DOM, он создает НОВУЮ копию DOM и уже туда добавляет изменения DOM

Разница между функциональными и классовыми компонентами?

— Синтаксис.

— Хуки только у функциональных компонентов.

— У классовых есть свой контекст this, а у функциональных — нет.

— Жизненные циклы есть только у классовых компонентов.

Какие хуки ты знаешь?

Хуки, которые я знаю(основные хуки):

— useState() - хук для хранения состояния компонента.

— useEffect() - хук для побочных эффектов: запросы к API, подписки, таймеры и т.д.

— useLayoutEffect() - похож на useEffect, но вызывается синхронно после всех изменений DOM, до того, как браузер успеет отрисовать изменения.

— useMemo() - хук для мемоизации значений. Помогает избежать лишних вычислений.

— useCallback() - хук для мемоизации функций. Используется, чтобы не пересоздавать функции при каждом рендере.

— useContext() - хук для получения значения из React Context.

— useRef() - хук для хранения мутабельного значения, которое не вызывает ререндер при изменении, или для доступа к DOM.

— memo() - это мемоизация целого компонента, которая нужна для предотвращения лишних ререндеров, если пропсы не изменились.

Что такое мемоизация (memo)?

Мемоизация - это способ запоминать результаты вычислений, чтобы не выполнять их заново при каждом рендере.

Разница между useCallback и useMemo?

useCallback() запоминает ссылку функции, чтобы потом не происходил лишний ререндер, а useMemo() запоминает значение, которое возвращает функция.

Что такое useEffect и чем он отличается от useLayoutEffect?

useEffect() запускает код после того, как загрузился браузер и отобразилась страница, а useLayoutEffect() — синхронно с браузером.

Разница между props и state?

• state изменяемый, находиться локально в компоненте, используется для хранения и изменения состояния.

• props неизменяемый, прокидывается через компоненты, используется для передачи данных.

Работал ли ты с порталами? Что можешь рассказать?

Порталы позволяют рендерить дочерние элементы в другой DOM-узел, например для модальных окон.

Что такое prop drilling?

Prop drilling — это ситуация, когда пропсы передаются через несколько промежуточных компонентов, которые сами их не используют, а просто прокидывают дальше.

Что такое Context?

Context — это механизм React, который позволяет передавать данные по компонентам без необходимости прокидывать пропсы через каждый компонент.

Этапы жизненного цикла компонента?

Жизненный цикл компонента делится на три этапа:

• componentDidMount (монтирование) — когда компонент создается и добавляется в DOM.

• componentDidUpdate (обновление) — когда компонент обновляется из-за изменения props или state.

• componentWillUnmount (размонтирование) — когда компонент удаляется из DOM.

Что вызывает ререндер компонента?

Ререндер компонента вызывают:

• Изменение state;

• Изменение props;

• Изменение контекста (если используется Context API);

• Родительский ререндер (если не используется мемоизация через React.memo, useMemo, useCallback).

Что такое Error Boundaries?

Error Boundaries — это компоненты-ловушки ошибок, которые перехватывают ошибки в дочерних компонентах во время рендера, в методах жизненного цикла и в конструкторах.

• Они нужны, чтобы не «падало» всё приложение, если где-то произошла ошибка.

• Создаются как классовые компоненты, реализующие методы componentDidCatch(error, info) и static getDerivedStateFromError(error).

• Их особенность в том, что они не ловят ошибки внутри себя и не работают с ошибками в асинхронных коллбеках или обработчиках событий.

Что такое Lazy Loading?

Lazy loading (ленивая загрузка) — это техника оптимизации, при которой ресурсы (например, изображения, скрипты или компоненты) загружаются только тогда, когда они реально нужны, а не сразу при загрузке страницы или приложения.

---

Next.js

Что такое гидратация (Hydration)?

Гидратация - это процесс, когда React превращает серверный HTML в интерактивное приложение, подключая JavaScript, события и состояние.

Какие виды рендеринга существуют (SSR, SSG, ISR, CSR)?

Виды рендеринга, которые я знаю:

— SSR - HTML страницы генерируется на сервере при каждом запросе. Клиент получает уже сформированную страницу.

— SSG - HTML страницы генерируется во время сборки проекта и при запросе какой-то страницы, она сразу же отобразится.

— ISR - Это тот же SSG, но с возможностью задать параметр revalidate, благодаря которому страница будет автоматически пересобираться на сервере через определённый интервал или при первом запросе после истечения тайм-аута.

— CSR - рендеринг на клиенте(браузере), для него используют обычные запросы через fetch или axios.

Разница между серверными и клиентскими компонентами? Для чего use server и use client?

• Серверные — выполняются на сервере, lightweight, не имеют state и браузерных API.

• Клиентские — выполняются в браузере, могут использовать state и эффекты.

Зачем нужны компоненты кэша (use cache)?

Компоненты кэша нужны для кэширования данных на сервере и оптимизации производительности.

Разница между Pages Router и App Router?

• Pages Router — старый подход, файловая маршрутизация через pages/.

• App Router — новый подход, поддержка серверных компонентов и layouts.

Что такое Server Actions и зачем они нужны?

Позволяют выполнять действия на сервере из компонентов без создания API-роутов.

Какие встроенные компоненты Next.js ты знаешь?

• Link – подключение внешних ресурсов (CSS, шрифты, фавикон).

• Image – отображение изображений на странице.

• Script – подключение и выполнение JavaScript-кода.

• Head – секция документа с метаинформацией (теги <title>, <meta>, <link> и т.д.).

• Metadata – данные о странице (описание, ключевые слова, автор, viewport и т.д.).

• Suspense – React-компонент для ленивой загрузки других компонентов с fallback UI.