Вопросы для собеседования Frontend ( React ) Middle+ | Senior в 2024
4341
Автор
Никита Калашников
Скилы Frontend-разработчика
Минимальный набор hard-скилов и технологий, с которыми должен быть знаком специалист ( набор может меняться от вакансии к вакансии )
Javascript
Typescript
React / Angular / Vue ( или любой другой frontend фреймворк | библиотека )
Styled-component, css-inline, Sass
Redux / Redux-toolkit / Redux-Saga
RTK Query
Git ( или опыт с любым другим удаленным репозиторием )
Архитектура ( Знание основных. Опыт выбора и внедрения под проект )
Yarn / Npm
Next.js | Vite.js
Webpack / Rollup / Vite
Css + Html ( верстка, семантика, адаптация, базовая оптимизация )
Scss, Less ( и любые другие препроцессоры )
CI/CD
Scum / Agile
Node.js
Figma ( или любой другой сервис для работы с дизайном / wireframe )
Общие вопросы
Event loop - Что это, как работает, частью какого механизма является, сколько очередей и т.д. ( важно понимать весь процесс )
Dom и Виртуальный DOM - Что такое Dom, как формируется и в чем отличие от Виртуального Dom ( Виртуальный DOM является частью фреймворков )
Как работает браузер
Что происходит при вводе запроса в поисковую строку
В чем разница между " == " и " === "?
Паттерны программирования
Архитектурные решения - Какие знаете, в чем отличия, как выбирать правильный для проекта
Принципы Solid - Что такое принципы разработки Solid
Принцип kiss, dry
API, Rest API - Что это, в чем разница
CI / CD - Что это и как работает
Вопросы по Javascript
Оставляю основные вопросы, которые не только встречаются чаще всего, но и действительно необходимы для frontend-разработчика на практике
1. Big O Notation — Нотация для описания сложности алгоритмов ( помогает правильно выбирать методы работы с данными, выбирая наиболее оптимальный для экономии ресурсов )
2. Словари ( Set, Map ) — Set хранит уникальные значения любого типа, Map хранит пары ключ-значение. В Set значение может появляться только один раз, в Map ключи могут быть любого типа.
3. Чистые функции — Чистые функции всегда возвращают один и тот же результат при одинаковых аргументах и не имеют побочных эффектов.
Пример:
1functionadd(a, b){2return a + b;3}
4. Async/Await — async/await используются для работы с промисами. Функция, объявленная с async, возвращает промис, await приостанавливает выполнение до разрешения промиса.
Например:
1asyncfunctionfetchData(){2const response =awaitfetch('https://api.example.com/data');3const data =await
5. Promise — Promise представляет результат асинхронной операции и может находиться в одном из состояний: ожидание, выполнено или отклонено.
6. Область видимости — Область видимости определяет видимость переменных и функций в разных частях кода. Существует глобальная и локальная (функциональная, блочная) область видимости.
Например:
1functionexample(){2let local ="local";3console.log(local);4
7. Замыкания — это функции, которые запоминают своё окружение при создании.
ES6 ввел новые возможности, такие как стрелочные функции, let и const, шаблонные строки, деструктуризация, классы и модули.
9. Стрелочные функции — Стрелочные функции имеют краткий синтаксис и не имеют собственного this.
Например:
1constadd=(a, b)=> a + b;
10. Отличие стрелочных функций от обычных
1. Синтаксис
Обычные функции
1functionmyFunction(){2// тело функции3}
Стрелочные функции
1constmyFunction=()=>{2// тело функции3}
2. Контекст (this)
В обычных функциях this определяется в момент вызова функции и может изменяться в зависимости от контекста вызова (например, при использовании call, apply или bind).
В стрелочных функциях this лексически привязан к контексту, в котором была объявлена функция, и не изменяется.
3. Аргументы
В обычных функциях доступен объект arguments, который содержит все переданные аргументы.
В стрелочных функциях объекта arguments нет, но можно использовать операторы rest (...args).
4. Конструктор
Обычные функции могут быть использованы как конструкторы (с ключевым словом new), создавая новые объекты.
Стрелочные функции не могут быть использованы как конструкторы и вызов с new приведет к ошибке.
5. Собственные методы и свойства
Обычные функции имеют свои собственные методы и свойства (например, prototype).
Стрелочные функции не имеют собственных методов и свойств.
В JavaScript существуют примитивные типы данных: string, number, boolean, null, undefined, symbol, и bigint. Также есть сложные типы: object и function.
13. JS компилируемый или интерпретируемый язык
JavaScript является интерпретируемым языком, выполняемым браузером или сервером (Node.js) непосредственно.
14. Каррирование — это трансформация функции с множеством аргументов в последовательность функций с одним аргументом.
Например:
1functionadd(a){2returnfunction(b){3return a + b;4
15. Разница null и undefined
null — это намеренное отсутствие значения, undefined означает, что значение не было присвоено.
Например:
1let a;2console.log(a);// undefined3let b =null;4console.
16. Объекты — это коллекции пар ключ-значение.
Пример:
1const person ={2 name:"John",3 age:304};
Вопросы по React
1. Функция высшего порядка
Функция высшего порядка — это функция, которая принимает другую функцию в качестве аргумента или возвращает функцию в качестве результата. В JavaScript функции высшего порядка используются для создания абстракций и для управления поведением других функций.
Пример:
1// Функция высшего порядка, принимающая функцию в качестве аргумента2functionhigherOrderFunction(callback){3const result =callback(5);4
2. Hook ( хуки )
Хуки (hooks) — это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Хуки были введены в React версии 16.8. Основные хуки включают:
Основные хуки включают:
useState
useEffect
useContext
useReducer
useMemo
useCallback
useRef
useMemo
Возвращает мемоизированное значение. Он используется для оптимизации производительности, предотвращая повторные вычисления значений, которые зависят от входных данных.
Пример:
1import React,{ useMemo }from'react';23functionExpensiveComponent({ a, b }){4
useState
Используется для добавления состояния в функциональные компоненты.
Возвращает изменяемый объект, который сохраняет свое текущее значение между рендерингами. В отличие от useState, изменение значения useRef не вызывает повторный рендеринг компонента.
Используется для управления более сложным состоянием в функциональных компонентах. Он принимает редьюсер и начальное состояние, возвращает текущее состояние и диспетчер для отправки действий.
useMemo мемоизирует значение, тогда как useCallback мемоизирует саму функцию. Оба они принимают массив зависимостей и обновляют мемоизированное значение или функцию только тогда, когда изменяются зависимости.
4. Состояние приложения
Состояние приложения (application state) — это данные, которые управляют поведением и рендерингом приложения. Хуки для работы с состоянием включают useState и useReducer. Популярные библиотеки для управления состоянием:
Redux
MobX
Recoil
Zustand
5. Redux / Redux-toolkit
Redux — это библиотека для управления состоянием приложений JavaScript. Redux-toolkit упрощает работу с Redux, предоставляя инструменты для упрощенного создания редьюсеров, экшенов и хранилищ.
Редьюсер (reducer) — это функция, которая определяет, как состояние приложения изменяется в ответ на действия (actions). Он принимает текущее состояние и действие, возвращает новое состояние.
7. Стадии жизненного цикла компонента
Компоненты в React проходят следующие стадии жизненного цикла:
8. Чем управляемые компоненты отличаются от неуправляемых
Управляемые компоненты (controlled components) управляют своим состоянием через props и функции обратного вызова, тогда как неуправляемые компоненты (uncontrolled components) управляют своим состоянием через прямой доступ к DOM элементам, используя ref.
9. Рендеринг списков, зачем нужны ключи ( key )
Ключи (keys) нужны для идентификации элементов списка. Они помогают React определять, какие элементы изменились, добавились или удалились, улучшая производительность при обновлении UI.
10. В чем разница между классовыми и функциональными компонентами?
Классовые компоненты используют классы для создания компонентов и поддерживают состояние и методы жизненного цикла через методы класса. Функциональные компоненты — это функции, которые принимают props и возвращают элементы React. С хуками функциональные компоненты могут иметь состояние и побочные эффекты.
11. Что такое реквизиты | пропсы в React?
Пропсы (props) — это входные данные, передаваемые компоненту, позволяющие ему получать информацию из родительского компонента.
12. Когда лучше использовать локальное состояние, а когда глобальное?
Локальное состояние используется для управления данными, которые нужны только в одном компоненте. Глобальное состояние используется для данных, которые должны быть доступны в нескольких компонентах.
13. Что такое условный рендеринг элементов?
Условный рендеринг позволяет отображать разные элементы в зависимости от условия.
SPA (Single Page Application) — одностраничное приложение, где всё приложение загружается одной HTML-страницей, и переходы между "страницами" осуществляются через JavaScript.
SSR (Server-Side Rendering) — рендеринг на стороне сервера, где HTML генерируется на сервере и отправляется клиенту для каждого запроса.
SSG (Static Site Generation) — статическая генерация сайта, где HTML генерируется на этапе сборки, а не на сервере или клиенте.
Различия:
SPA имеет быстрые клиентские переходы, но может иметь более длительное начальное время загрузки.
SSR позволяет быстро отображать контент для SEO и начальной загрузки, но может быть медленнее при каждом запросе.
SSG обеспечивает очень быструю загрузку и рендеринг, так как страницы заранее генерируются и раздаются как статические файлы.
Soft-скилы
Самостоятельное решение задач - Процесс поиска решения задачи, когда стоит идти к команде
Умение выстраивать приоритетность задач - Как определить приоритетность задачи, как формировать порядок и т.д.
Работа в команде / управление командой - Как строится, как происходит взаимодействие и т.д.
Работа по метологиям Scrum / Agile - Что это такое, как внедрить и какой есть релевантный опыт
Умение описывать проблемы и формировать отчеты - Что такое аудит, как проводить, зачем нужен
Введение технической документации - Для чего нужна такая документация
Чтение технической документации ( в том числе на английском ) - Есть ли релевантный опыт
Wireframe - Что такое, для чего нужно проектирование и прототипирование интерфейсов
Понимание приницпов дизайна ( как формируются отступы, группируются элементы, как правильно формировать ui-kit и как с ним работать ) - Что такое ui-kit, какие реальные проблемы работы с макетами от дизайнеров были
Умение подбирать правильный технический стек - Какие основные принципы и вопросы нужно задавать, чтобы правильно подобрать стек
response
.
json
(
)
;
4return data;
5}
)
;
3});
4promise.then(result =>console.log(result));
}
count
++
;
5return count;
6}
7}
8const counter =outer();
9console.log(counter());// 1
10console.log(counter());// 2
console
.
log
(
this
.
value
)
;
// undefined, так как `this` указывает на глобальный объект или `undefined` в строгом режиме
5},1000);
6}
7
8constArrowFunction=()=>{
9this.value =1;
10setTimeout(()=>{
11console.log(this.value);// 1, так как `this` лексически привязан к контексту объявлении функции