Skip to content

Files

Latest commit

 

History

History
2391 lines (2194 loc) · 160 KB

InterviewQuestions.md

File metadata and controls

2391 lines (2194 loc) · 160 KB

Подборки вопросов-ответов для собеседования разработчика

Общий список вопросов

  • JS — вопросы с собеседований

    • Асинхронность
      • Как работает движок JS «под капотом» (event loop и т.д.)?
      • Что такое окружение?
      • «Куча» и «стэк» в event loop
      • Работа сборщика мусора
      • Что такое таски и микротаски?
    • Промисы
      • Что это такое?
      • Promise API — promise.all и т.д.
      • Можно ли реализовать аналог callback-hell с использованием промисов (внутри промиса?)
      • Как из SetTimeout сделать Promise? (не очень понял вопрос, видимо имелось ввиду - как вызвать промис из setTimeout)
    • Замыкания
    • This, bind, call. Контекст
    • Стрелочные функции
      • Отличие стрелочных функций от обычных
      • Можно ли сделать .bind стрелочной функции
        • ОТВЕТ: Нет. У стрелочных функций нет this, он всегда будет определяться как контекст, в котором был определен. Если требуется привязка this — надо использовать обычную функцию. Ошибки не будет, просто не сработает (скорее всего)
    • Типы данных
      • Какие есть типы данных в JS?
      • Что даёт typeof
      • Чему равен typeof null
        • ОТВЕТ: Object. Официальная ошибка языка
      • Приведение 0 и '0' к boolean
    • Прототипы
      • Наследование, прототипы
      • Как сделать свой метод сортировки который будет доступен любому объекту?
      • Хорошо ли расширять / менять глобальны прототип?
      • Когда допустимо расширение прототипов? - полифилы для старых браузеров
      • Как идёт поиск по цепочке прототипов?
      • __proto__ и [[Prototype]]
      • Что находится в конце цепочки прототипов?
        • ОТВЕТ: Object.prototype. Все объекты наследуют свойства и методы Object. Любая попытка поиска за пределами цепочки приводит к null.
      • Можно ли как-то поменять прототип
    • Делегирование и всплытие событий
    • Отличия cookie, localStorage, sessionStorage
    • Объекты
      • Массивы — это объекты?
      • Как скопировать объект в JS?
      • Как сделать полную копию объекта со свойствами типа 'number' и 'string'.
        • ОТВЕТ:
        1. создать новый объект и воспроизвести структуру существующего, перебрав его свойства и скопировав их на примитивном уровне. Например циклом for..in
        2. использовать метод Object.assign. (Object.assign(целевой_объект, [исходный_объект1, исходный_объект2, ...]))
        3. при глубоком копировании - использовать рекурсию или что-то вроде cloneDeep из библиотеки lodash
      • Как удалить поле из объекта без копирования самого объекта?
        • ОТВЕТ: метод delete. Но не использовать это в массивах! В массивах - .splice, slice, pop, .length - 1... Если нужен новый объект со всеми ключами оригинала, кроме некоторых — деструктурирование.
      • Создание объекта через функции-конструкторы
    • Способы загрузки скриптов — обычная, async и defer
    • Какие есть способы объявить переменную? Чем они отличаются?
    • Что такое «область видимости»?
    • Что такое «блок кода»?
    • Метод массива .map()
    • Зачем нужна конструкция ??
      • ОТВЕТ: оператор «логического или»
    • В чём разница .preventDefault() и .stopPropagation()?
      • ОТВЕТ: .preventDefault() — метод для отмены действия браузера
      • ОТВЕТ: .stopPropagation() — остановка всплытия события. По умолчанию событие будет всплывать до элемента , а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути. Любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие. Не использовать без явной нужды, очевидной и архитектурно прозрачной. Иногда вместо этого мы можем использовать event.defaultPrevented, чтобы просигналить другим обработчикам, что событие обработано.
    • Циклы
      • Какие есть циклы в JS?
      • Как работает цикл for, что у него под капотом? (Под капотом у него while, а у того — генератор)
    • ООП
      • Классы, объекты, ООП
      • Как работает класс в JS
    • Что такое WebWorkers API?
      • ОТВЕТ: API для параллельного выполнения сложных вычислительных задач. Потоки, принадлежащие браузеру, которые можно использовать для выполнения JS-кода без блокировки цикла событий.
    • Что такое Service Worker API?
      • ОТВЕТ: разновидность WebWorkers. Скрипт, выполняется браузером в фоне, отдельно от веб-страницы. Не имеет доступа к DOM. Может выполнять функции для которых не требуется взаимодействие со страницей или пользователем. Продолжает работать, даже когда вкладка с сайтом закрыта. Например: кешированть файлы из онлайн веб-приложения на локальное устройство пользователя и затем работать полностью в оффлайне.


  • JS


  • Redux

    • Legmo - Redux
    • .
    • .
    • Недостатки Redux
    • Устройство Redux (store, createStore, state, reducer, actions, action creators, dispatch, provider, connect, middleware, mapDispatchToProps, mapStateToProps)
    • Redux Toolkit
    • .
    • ReduxToolkit
    • RTK Query
    • ReactRedux
    • Connect и то как он прокидывает props
    • Как бы вы отключили хранилище Redux, чтобы оно не принимало никаких изменений в состоянии?
    • .
    • .
    • Что такое Redux?
    • Зачем нужен?
    • Flux-архитектура
    • Нормализация данных применительно к проектированию Redux state
    • State (состояние) — объект хранящий актуальное состояние системы.
    • Store (хранилище) — объект, хранящий state и методы для работы с ним.
    • Dispatch (отправка) — один из методов store. Объединяет все методы для правки state.
    • Actions — объекты которые мы из UI (React) передаем в метод dispatch().
    • Type и Payload — параметры объекта action
    • ActionCreators() — функции, создают объект Action. Принимают данные-payload нужные для правки state, и возвращают объект action (с нужным type и payload).
    • Reducers() — функции внутри dispatch(). Отвечают за правку опр. части state. Принимают action и state, возвращают новый state
    • Thunk() — функция, делает какой-то асинхронный код и умеет dispatch(actions) . Нужна для асинхронных запросов.
    • ThunkCreator() — функция-обёртка thunk(). Нужна чтоб передать в thunk() данные-payload для правки state .
    • Saga() — альтернатива thunk. Тоже библиотека. Сложнее, более продвинутая
    • Middleware() — функция-обёртка dispatch(). Нужна чтоб выполнить асинхронный код между отправкой из UI и dispatch()
    • Selectors - Функция, принимает весь стэйт целиком, достаёт и обрабатывает какие-то данные и передаёт их в mapStateToPros (и дальше в UI). Архитектурный слой, занимается получением, комбинированием и преобразованием данных.
    • Reselect - библиотека для оптимизации работы селекторов
    • React-Redux - что это, зачем?
    • Redux Toolkit - что это, зачем?
    • Connect - API react-redux, для создания компонентов-контейнеров, которые подключены к хранилищу Redux.
    • mapStateToProps
    • mapDispatchToProps
    • Provider - компонент из react-redux, оборачивается вокруг корневой компоненты (). Позволяет передавать store всем потомкам - теперь у connect() есть доступ к store
    • Compose - функция, предоставляется Redux. Объединить несколько последовательных вызовов функций. Полезно в ситуации конвейера.
    • Быстродействие и оптимизация Redux
    • AJAX и асинхронные операции - варианты реализации
      • Запрос внутри actionCreator
      • Middlewares
      • Redux-thunk
      • Redux saga
      • Хуки
    • ReactRedux
    • ReactRedux Toolkit - возможности
    • Connect и то как он прокидывает props
    • Как бы вы отключили хранилище Redux, чтобы оно не принимало никаких изменений в состоянии?
    • Какие ещё есть wrapper кроме thunk
    • Есть Redux Toolkit - почему тогда использую connect? Какие альтернативы предлагает React Toolkit?
    • Нужно ли в редьюсере в swithc...case делать default и возвращать в нём state?
    • Что такое useSelector.


  • TypeScript

    • Legmo - TypeScript (ДОРАБОТАТЬ)
    • .
    • Очень любят спрашивать
      • какие типы есть
      • дженерики
    • .
    • .
    • Дженерики
    • Интерфейсы, отличия от типов
    • Кортежи, отличие от Массивов
    • Утилиты - Partial, Omit, Exclude, Extract
    • Перегрузка
      • ветвление логики?
      • описание функции, когда для одной функции несколько вариантов входных данных => будет несколько вариантов выхода
    • .
    • .
    • Основные отличия TS и JS
    • Транспиляция
    • Утиная типизация
    • Типы
    • Объекты
    • Массивы
    • Кортежи
    • Enum
    • Классы
    • Наследование (реализовано на классах)
    • Пространства имён, модули, barrel-файлы
    • Интерфейсы
    • Дженерики. Что такое генерификация? Как она работает? Как дженерики транспилируются в JS?
    • Декораторы - классов, свойств, методов, аксессоров (геттеров/сеттеров). Фабрика декораторов
    • Типизация функций
    • Утилиты (Utility Types)
    • Деструктуризация - как реализована
    • Event loop - как реализован
    • Сборщик мусора - как реализован


  • GIT

    • squash
    • head
    • rebase
    • merge
    • restore
    • конфликты
    • .
    • Для себя
      • Исключение файлов
      • возможности PHPStorm
      • работа с историей коммитов
      • работа с графическими оболочками
    • checkout
    • ветвление — у нас, по сути, Issue Branch Workflow
      • Ветки создаются из заданий в проектном трекере. Ветки могут иметь одинаковые названия id заданий
      • модификация Git Flow — есть стабильный master, есть развивающийся develop. В мастер пушим через releas_s
    • позиция head
    • merge
    • rebase
    • squash
    • cherry pick


  • Сеть

    • Legmo - Browser
    • .
    • .
    • HTTP, HTTP2, HTTPS
    • Методы HTTP
    • CORS
    • WebSocket
    • Cookies
    • .
    • REST, RESTFul,
    • CORS
    • HTTP, HTTP2, HTTPS
    • Методы HTTP
    • GraphQL
      • какие методы для него используются (POST или GET?) — Get
    • Cookies
    • WebSocket
    • .
    • TCP/IP, DNS, HTTP + secure
    • .
    • .
    • Порт
    • TCP/IP
    • HTTP
    • HTTP/2
    • HTTPS
    • JSON (Javascript Object Notation)
    • AJAX (Asynchronous JavaScript and XML)
    • DHTML (Dynamic HTML)
    • JSONP (JSON with Padding - JSON с набивкой)
    • JSONPP (Parameterized JSON with padding — параметризованный JSONP)
    • CORS
    • COMET
    • WebSocket - learnjs - протокол связи поверх TCP. Обмен данными браузер-сервер через постоянное соединение.
    • SSE API (Server-Sent events)
    • Server Push
    • XMLHttpRequest (XHR)
    • Fetch
    • Документация API при помощи RAML


  • Браузер

    • Legmo - Browser. Оптимизация работы браузера

    • Legmo - Browser

    • .

    • .

    • Как работает: от запроса в адресную строку до закрытия вкладки (вкл. рендеринг, перерендеринг)

    • DOM,

    • Render, Relayout, Repaint,

    • "дорогие" операции...

    • Работа с памятью

    • Выполнение JS

    • .

    • .

    • WebAssembly

    • Web Worker API, веб воркеры - отдельные потоки браузера, для вычислений JS без блокировки event loop

    • Service Worker API

    • Веб push-уведомления (Push API и Notifications API)

    • MutationObserver API - отслеживание изменений в DOM

    • WebSocket

    • SSE API (Server-Sent events)

    • WebRTC и механизмы P2P-коммуникаций

    • Shadow DOM

    • Web-компоненты, пользовательские элементы (Custom Elements)

    • Системы хранения данных (LocalStorage, SessionStorage, Cookie...)

    • .

    • .

    • Critical rendering path

    • "Дорогие" операции работы с DOM. Relayout / Repaint

    • "Дорогие" операции чтения (getComputedStyle() и т.д.)

    • .

    • Схема работы браузера:

      • Получение ресурсов (Fetching)
      • Парсинг (Parsing)
      • Построение DOM (Document Object Model)
      • Построение CSSOM (CSS Object Model). Блокирует выполнение JS
      • Встретились блокирующие элементы (скрипты и т.д.) - приостановка обработки до их загрузки.
      • Render Tree - объединяет DOM и CSSOM в общее дерево рендеринга. Туда попадают только видимые элементы.
      • Layout - вычисление позиции и размеров элементов. Последующие повторные операции можно называть Reflow.
        • в основном потоке браузера — там же где исполняется JS. Тяжелый JS-код блокирует Reflow => нет интерактивности страницы.
        • Глобальный Layout — просчёт всего дерева
        • Инкрементальный Layout — просчёт только части дерева.
      • Paint - отрисовка. Последующие повторные операции - Repaint .
      • Композитинг (Compositing) — разделение содержимого стр. на «слои», которые браузер будет перерисовывать.
        • Происходит в отдельном потоке — вычисления в JS никак не влияют на него
      • Reflow (Relayout, Layout) и Repaint - перестановка и перерисовка

    • Рекомендации по оптимизации

      • Обращаться к DOM как можно реже.
        • Если обратился — сохрани элемент в переменной, чтоб не искать повторно
      • Минимизируйте перерисовку (Repaint) и перестановку (Reflow).
        • Изменения компоновки и геометрии, требуют Reflow и Repaint:
          • Добавляются или удаляются визуальные элементы DOM
          • Элемент меняет положение
          • Элементы меняют размер (из-за полей, отступов, толщины границы, ширины, высоты и т. Д.)
          • Изменения содержимого, например, изменения текста или изображения заменены на другой размер
          • Отрисовка начальной страницы
          • Размер окна браузера изменен
        • Объединить несколько изменений DOM и изменений стиля в один пакет и применить их все сразу.
      • Минимизировать количество запросов информации о макете:
        • offset: offsetTop, offsetLeft, offsetWidth, offsetHeight
        • scroll: scrollTop, scrollLeft, scrollWidth, scrollHeight
        • client: clientTop, clientLeft, clientWidth, clientHeight
        • getComputedStyle()
        • В процессе смены стиля лучше не использовать ни один из вышеперечисленных атрибутов.
        • Если запросил — назначь ее локальной переменной, и потом бери оттуда.
        • Иначе нарушается внутренняя оптимизация — очередь Reflow
      • Уменьшить количество агентов событий
        • Когда на странице много элементов, и каждый из них привязан к одному или нескольким событиям (например, onclick)


  • Оптимизация web-страниц

    • Legmo - Browser. Оптимизация работы браузера
    • JS - эффективно использовать память
    • JS - избегать использования setTimeout() и setInterval() для обновления внешнего вида элементов страниц.
    • JS - переносить длительные вычисления в веб-воркеры.
    • JS - для изменений в DOM использовать микро-задачи, разбитые на N кадров.
    • CSS - уменьшить сложность CSS селекторов.
    • CSS - Уменьшите число элементов, для которых вычисляем стили. Лучше менять стиль N элементов, а не всю стр.
    • Стараться не менять этих свойств: ширина, высота, позиция элемента (геометр. характеристики) — они требуют изменения макета.
    • Использовать flexbox - эта модель создания макета работает быстрее
    • Избегайте периодического изменение параметров элементов и их последующего считывания. Т.е. меняю стиль элемента ( например, динамически добавляю CSS-класс), а потом считываю его параметры (вроде offsetHeight или offsetWidth) из предыдущего кадра => браузеру надо применить изменения стиля, создать макет и возвратить нужные данные.
    • Избегать анимации свойств элементов, которые вменяют макета страницы (например width и height)
    • .
    • в первую очередь загружать критические запросы (html,css, шрифты...). Т.е. управлять приоритетом загрузки статического контента. Например через <link rel="preload">
    • Использование CSS-спрайтов
    • Уменьшите количество HTTP-запросов. Используйте поддомены для параллельного скачивания
    • Оптимизация изображений - формат, размер, вектор, CSS-графика...
    • Оптимизировать количество шрифтов
    • JS - избегать лишних зависимостей
    • Используйте CDN для загрузки популярных JavaScript библиотек
    • минимизация CSS & JS
    • Разделение кода (code splitting) - ленивая загрузка, динамический импорт... Подгружать не самые важные вещи только когда они понадобятся
    • кэширование - на стороне сервера, на стороне клиента ( HTTP-заголовок Expires )


  • Webpack

    • Как с помощью webpack'а оптимизировать бандл.
    • Webpack - сборщик проекта, бандлер
      • собирает из проекта 1-N файлов для браузера
      • превращение исходников в конечный продукт
      • альтернатива менеджерам задач — Gulp, Grunt


  • CSS

    • @container — стилизовать компоненты в завсимости от размера родительского контйнера
    • Critical render path
    • Flexbox
    • CSS-grid
    • BEM
    • Canvas
    • анимация
    • понятие «потока»
    • как работает «float»
    • разные виды «position»


  • ООП

    • ООП - Основные понятия
      • Класс
      • Объект
      • Свойства
      • Методы
      • Геттеры/сеттеры
    • ООП - Базовые принципы
      • хороший эффект производит знание трех слов: инкапсуляция, наследование, полиморфизм
      • Наследование - механизм описания новых классов на основе родительского.
      • Абстракция
      • Инкапсуляция - ограничение доступа к данным и возможностям их изменения. Св-во системы, позволяет объединить в классе данные и методы для работы с ними.
      • Полиморфизм - возможность работать с несколькими типами так, будто это один и тот же тип. Cв-во системы, позволяет использовать объекты с одинаковым интерфейсом, не зная о типе и внутр. стр-ре объекта.
    • ООП - Паттерны. 23 шаблона
    • ООП - Принципы SOLID
      • Single Responsibility Principle — Принцип единой ответственности
      • Open-Closed Principle — Принцип открытости-закрытости
      • Liskov Substitution Principle — Принцип подстановки Барбары Лисков
      • Interface Segregation Principle — Принцип разделения интерфейса
      • Dependency Inversion Principle — Принцип инверсии зависимостей


  • Алгоритмы

    • Legmo - Тестирование

    • сложность алгоритма, алгоритмическая сложность

    • оптимизация

    • big O notation


  • Тестирование

    • Legmo - Тестирование
    • .
    • Зачем вообще тестировать?
    • TDD / BDD
    • Jest - среда запуска тестов JavaScript, фреймворк
    • React Testing Library - библиотека для тестирования React.
    • Enzime - библиотека для тестирования React.
    • Unit-тестирование
    • Snapshot тестирование
    • Компонентное/Модульное тестирование
    • Тест на «запах дыма»
    • Интеграционный тест
    • Функциональный тест
    • Сквозное тестирование
    • Приемочный тест
    • Тест производительности


  • Soft-skills

    • Самые большие ошибки
    • Самые большие достижения
    • Яркие, красивые примеры из своего рабочего опыта — какую выгоду получила ваша предыдущая компания от вашей деятельности, как вы помогли спасти ее от кризиса, как вы вывели ее в лидеры и т.д.


  • Прочие вопросы

    • NodeJS - среда выполнения JS

    • NPM - менеджер зависимостей

    • Yarn

    • Nginx

    • Bash - оболочка (shell). Интерпретатор командной строки.

      • Программа, которая принимает ваши и обрабатывает, выполняя встроенные функции (например, cd) или вызывая внешние программы (например, ls или gcc).
      • Обеспечивает взаимодействие пользователя и консоли (часть операционной системы для управления компьютером)

    • Babel — транспайлер, переводит JS в другую версию. Или например JS в TypeScript и наоборот

    • .

    • Можно ли реализовать button который хранит свое значение в value, и меняет его через свой onChange

    • .

    • Чистые функции

    • Термины

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

    • GIT

      • Rebase
      • Squash
      • GIT flow

    • REST API

      • методы - out, post, get, delete...
      • Что можно отправлять
      • типа параметров и т.д.
      • Диапазоны http-кодов

    • GraphQL

    • MVC

      • Общее
      • Приложение к веб
      • Приложение к React

    • Акронимы принципов программирования

      • DRY,
      • KISS,
      • YAGNI,
      • SOLID

    • Парадигмы программирования

    • Алгоритмы - ИЗУЧАТЬ!

    • Микросервисная архитектура

    • СI/CD - Continuous Integration, Continuous Delivery, Continuous Deployment

    • Отслеживание изменений в фреймворке - как он понимает, что нечто изменилось и надо применить изменения к DOM?

    • Что такое CORS

    • Css селекторы - MDN

    • Domain Driven Design, DDD


  • С собеседований

    • JS
      • Асинхронность
        • Как работает движок JS «под капотом» (event loop и т.д.)?
        • Асинхроннность. Что такое окружение. Куча и стэк в в эвент лупе
        • Garbage collector (You don't know JS)
        • Event loop, микро-макро таск
        • Что такое таски и микротаски?
      • Промисы
        • Что это такое
        • Promise API (promise.all и т.д.)
        • Можно ли реализовать аналог callback-hell с использованием промисов (внутри промиса?)
      • Типы данных
        • Какие есть типы данных в JS?
        • Что даёт typeof
        • Чему равен typeof null
          • Object. Официальная ошибка языка
        • Приведение 0 и '0' к boolean
      • Прототипы
        • Наследование, прототипы
        • Как сделать свой метод сортировки который будет доступен любому объекту?
        • Хорошо ли расширять / менять глобальны прототип?
        • Когда допустимо расширение прототипов? - полифилы для старых браузеров
        • Как идёт поиск по цепочке прототипов?
        • __proto__ и [[Prototype]]
        • Что находится в конце цепочки прототипов?
          • Object.prototype. Все объекты наследуют свойства и методы Object. Любая попытка поиска за пределами цепочки приводит к null.
        • Можно ли как-то поменять прототип
      • Замыкания
      • Делегирование, всплытие
      • This, bind, call
      • Стрелочные функции
        • Отличие стрелочных функций от обычных
        • Можно ли сделать .bind стрелочной функции
          • нет. У стрелочных функций нет this, он всегда будет определяться как контекст, в котором был определен.
          • Если требуется привязка this — надо использовать обычную функцию.
          • Ошибки не будет, просто не сработает (скорее всего)
      • Отличия Cookie, LocalStorage, sessionStorage
      • Объекты
        • Массивы - это объекты?
        • Как сделать полную копию объекта со свойствами типа 'number' и 'string'.
          1. создать новый объект и воспроизвести структуру существующего, перебрав его свойства и скопировав их на примитивном уровне. Нпрмиер циклом for..in
          2. использовать метод Object.assign. (Object.assign(целевой_объект, [исходный_объект1, исходный_объект2, ...]))
          3. при глубоком копировании - использовать рекурсию или что-то вроде cloneDeep из библиотеки lodash
        • Как скопировать объект в JS?
        • Как удалить поле из объекта без копирования самого объекта?
          • метод delete. Но не использовать это в массивах! В массивах - .splice, slice, pop, .length - 1...
          • если нужен новый объект со всеми ключами оригинала, кроме некоторых — деструктурирование.
        • Создание объекта через функции-конструкторы
      • Загрузка скриптов — обычная, async и defer
      • Зачем нужна конструкция ??
        • оператор «логического или»
      • Что такое область видимости
      • Какие есть способы объявить переменную, чем они отличаются
      • Что такое блок кода
      • Метод массива .map()
      • В чём разница .preventDefault() и .stopPropagation()
        • .preventDefault() — метод для отмены действия браузера
        • .stopPropagation() — остановка всплытия события. По умолчанию событие будет всплывать до элемента , а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути. Любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие. Не использовать без явной нужды, очевидной и архитектурно прозрачной. Иногда вместо этого мы можем использовать event.defaultPrevented, чтобы просигналить другим обработчикам, что событие обработано.
      • Какие есть циклы в JS
      • Как работает цикл for, что у него под капотом? (Под капотом у него while, а у того — генератор)
      • Как из SetTimeout сделать Promise? (не очень понял вопрос, видимо имелось ввиду - как вызвать промис из setTimeout)
      • Что такое WebWorkers API?
      • Что такое Service Worker API?
      • ООП
        • Классы, объекты, ООП
        • Как работает класс в JS
    • React
      • что такое React
      • различия функциональных/классовых компонент
      • какие JS/React библиотеки использую
      • что такое прогрессивный рендеринг, гидратация
      • хуки
        • какие есть
        • как имитировать методы жизненного цикла
        • useState
        • useEffect, что даёт return
        • useMemo / useCallback (что вернёт)
      • отличия ReactRouter и ReactRouterDOM
      • Что такое VirtualDOM
      • Какие есть методы жизненного цикла
      • Какие стэйт-менеджменты использовал
      • Есть два react-компонента на разном уровне вложенности (меню в шапке и форма в боковой колонке). В форме что-то поменялось, надо прокинуть в шапку - какие есть варианты
      • Flux (Redux)
      • подъем пропсов до общего родителя
      • отслеживать изменения в DOM (совсем плохой вариант)
      • есть ещё какие-то варианты. Что-то про observer, библиотека RxJS
      • Вопрос по моему проекту. Есть Redux Toolkit - почему тогда использую connect? Какие альтернативы предлагает Redux Toolkit
        • Redux Toolkit предоставляет хуки useDispatch и useSelector
      • Как получать данные из Redux?
      • Что такое useSelector (React-Redux).
      • Где хранить селекторы - в отдельной папке, в папке компонента, в файле компонента. Duck
      • Что такое и как работает store
      • Что такое и как работает action
      • Что такое и как работает thunk middleware,
      • Какие ещё middleware приходилось использовать
      • Приходилось ли писать свои middleware
      • Нужно ли в редьюсере в switch...case делать default и возвращать в нём state ?
        • Ответ — «да». Редьюсеров может быть много, каждый action раскидывается по всем редьюсерам. Какой-то один его обрабатывает, и может внести изменения (вернёт обновлённый кусок стэйта), остальные по дефолту вернут старый кусок стэйта. Из ответов всех редюсеров соберётся новый объект state.
      • Если в компоненте один коллбэк вызывает последовательно несколько actions один за другим - они выполнятся в том же порядке?
        • Ответ — «да». Redux store не возьмёт в работу второй action, пока не выполнится первый. Иначе бы Redux не мог нормально управлять state.
      • пара вопросов про работу React Router
      • Когда вызывается рендер в React?
        • когда меняются state или props
          • в частности, когда мы вызываем функцию setState
        • когда меняется родительский компонент
      • Когда вызывается рендер в React для функциональных и классовых компонентов?
        • Классовые:
          • this.setState()
          • this.forceUpdate()
        • Функциональные
          • useState
          • useReducer
        • Все
          • Рендер родителя вызовет рендер всех его дочерних элементов (возможна оптимизация)
          • повторный рендеринг будет вызван, если повторно запустить ReactDOM.render(), что эквивалентно forceUpdate() на корневом компоненте.
      • Как оптимизировать рендер компонента?
        • shouldComponentUpdate — метод жизненного цикла классового компонента, если он вернет false то рендер не будет запущен
        • React.PureComponent — класс, реализующий типовой shouldComponentUpdate.
        • React.memo — HOC, который предотвращает повторный рендер, если входные props не изменились
        • useMemo() — чтобы в функциональном компоненте сохранить ссылки на объекты между рендерами
        • useCallback() — чтобы в функциональном компоненте сохранить ссылки на объекты между рендерами
        • аттрибуты key
        • Context /useContext() - Context API обеспечивает передачу переменных в дерево компонентов, без их непосредственной передачи в props данных компонентов.
        • оптимизация структуры компонет - помещать логику ближе к месту использования данных
      • Какие хуки использовать для оптимизации рендера?
        • useMemo() — чтобы в функциональном компоненте сохранить ссылки на объекты между рендерами
        • useCallback() — чтобы в функциональном компоненте сохранить ссылки на объекты между рендерами
        • useContext() - Context API обеспечивает передачу переменных в дерево компонентов, без их непосредственной передачи в props данных компонентов.
      • Как выполнить код на этапе между изменением state и render'ом?
      • Зачем нужен Virtual DOM?
      • Назови отличия useEffect от useLayoutEffect.
      • useEffect. Пустой массив зависимостей
      • useRef [
        • зачем используется
          • работа с DOM-объектами
          • объект со свойством useRef вместо useState - не вызовет ре-рендер при изменении?]()
      • «Порталы» — что это такое и зачем нужны.
        • Пример использования - создание модальных окон. Передаём только id, рендерим в другом месте DOM
      • ErrorBoundary
      • Мемоизация в React. useMemo, useCallback, React.memo
      • Как бороться с ререндерами в React
      • Key. Можно ли использовать случайные числа в качестве key
      • Из каких методов жизненного цикла делать запрос на сервер
      • Отличия хуков useMemo() и useCallback()
      • Для чего нужны файлы .lock в npm/yran
        • хранят зависимости зависимостей - т.е. полное дерево зависимостей
      • Стэйт-менеджменты кроме Redux (MobX и т.д.)
      • Возможности Redux Toolkit
      • Недостатки Redux
      • Как реализовать на React паттерн «singleton» (одиночка)
        • объект, существующий в единственном экземпляре на всё приложение
      • Что такое React
      • Основные хуки
      • Различия udeCallback и useMemo
      • Как работает Virtual DOM
      • Thunk, Middleware
      • Как оптимизировать рендер React-компонента?
      • Что такое React.Memo? Отличия от useMemo?
      • Какие ещё хуки используются для оптимизации работы React?
      • Как я реализовал бы сложную форму на React? Formik, или custom hooks + MobX.
    • Redux
      • Какие есть проблемы у Redux?
        • большая связность (?) - состояние всех компонент хранится в одном месте (глобальный store), сложно перенести модуль в другой проект, надо тянуть за собой структуру Redux. Концепции «изолированных модулей», «слои», реализация состояния хуками...
        • много «кода ради кода»
      • Что такое Redux
    • TypeScript
      • Что такое Interface
      • Отличие Interface от Type. Когда что использовать? Больше семантическое, пришло из ООП.
      • Utility Types - Partial
      • Tuples - отличия от Array
      • Generic в TypeScript
      • Что такое перегрузка в TypeScript?
      • TypeScript — какими возможностями пользуюсь?
      • TypeScript — Различия между any и unknow
      • TypeScript — Настройки в проекте — включаю ли поддержку any?
      • TypeScript — Настройки в проекте — включаю ли strict node check — не позволяет присваивать значение undefined
      • TypeScript — Omit, Pick, Readonly
      • Что такое useState<>() в TypeScript
      • Модификаторы доступов классов - public, protected, private в TS через декораторы/ ключевые слова
    • GIT
      • стратегии слияния merge
      • head
      • конфликты
      • git add
    • Сеть
      • Из чего состоит http запрос?
        • Стартовая строка, Заголовки, Тело
      • «Я знаю отличную шутку про UDP, но не факт, что она до вас дойдет». (шутка). UDP – это передача данных без установления соединения, не имеет подтверждения связи => нет гарантий доставки или порядка получения пакетов.
      • Что такое HTTP
      • Что такое HTTPS
      • Зачем нужны GET, POST и другие методы - почему не отправлять всё одним? Их различия
      • В чем различия если методом POST делать авторизацию (отправляем логин-пароль) или отправлять картинку?
      • Что за кракозябры появятся в адресной строке, если ввести туда что-то на русском - браузер использует кодировку ISO/IEC 8859-1, но там есть только латинские символы, так что любые другие приходится кодировать.
      • CORS
        • что это
        • JSONP, инъекции
        • простые и сложные
      • cookie
        • можно ли установить cookie из браузера?
        • любые ли cookie можно читать из кода?
      • Назови основные заголовки, отвечающие за кэширования веб-приложения.
      • HTTP, HTTP2, HTTPS
      • GrapQL
      • WebSocket
      • Что такое CORS?
    • Браузер
      • Как работает рендер браузера?
      • Что такое WebWorkers API?
      • Что такое Service Worker API?
    • Оптимизация web-страниц
      • Назови основные метрики производительности, на которые стоит обращать внимание, при разработке веб-приложения.
      • Назови основные заголовки, отвечающие за кэширования веб-приложения.
    • Webpack
      • Что такое Webpack и зачем он нужен
      • методы позиционирования
      • семантическая вёрстка
      • Что такое критичный CSS?
      • Что такое св-во gap в CSS?
      • Какой уровень вложенности блоков допустим в BEM?
        • любой
    • ООП
      • Как сделать метод иммутабельным?
        • Такой метод не должен менять входные данные. Возвращать копию объекта (т.к. объекты меняются «по ссылке»).
      • Что такое статический метод класса?
        • Метод самого класса. Может вызываться для классов, но не для отдельных объектов, созданных на его базе.
        • Не имеет доступа к состоянию (полям) объекта, то есть к переменной this.
        • Он не знает, какой именно объект его вызвал и, соответственно, у него нет доступа к полям объекта.
      • Инстансы (Экземпляры, instances)
        • Экземпляр — это объект, который содержит имена свойств и методы класса, но с уникальными значениями свойств (т. е. экземпляры класса имеют свои собственные уникальные идентификаторы). Грубо говоря, на основе класса «машина» сделал конкретный экземпляр — с опр. мощностью двигателя и т.д.
    • CSS
    • Soft skills
      • почему у вас два разных резюме (краткое под React и полное под Drupal)
      • почему сменили работу
      • какие результаты, достижения которыми гордишься? В жизни и в работе
      • что нравится / не нравится в работе
      • что предпочёл бы делать один, что предпочёл бы делать вместе, что предпочёл бы чтоб сделали вместо меня
      • сделал свои задачи, тим-лид отвечает долго, есть некий backlog задач на будущее (для всей команды, не факт что они пойдут мне) — что будешь делать? Отдыхать, ждать тим-лида, делать задачу из backlog (какую?)
      • что бы делал, если было бы неограниченное количество ресурсов (времени, сил, здоровья, денег)
    • Прочие вопросы
      • Принципы программирования
        • DRY
        • KISS
        • YAGNI
        • SOLID
      • Что такое архитектура во фронтенде?
      • Как организовать архитектуру приложения. Например, надо делить код между несколькими историями
      • GrapQL
      • Как сделать запрос на сервер из HTML, без использования JS?
        • использовать submit формы
      • Как искать ошибки
        • console.log, debugger, точки останова
      • В каких операционных системах работал
      • Не смущает ли необходимость зайти по SSH и исправить какой-то файл
      • «Как выйти из VIM» (шутка)
      • Безопасность - сталкивался ли с инъекциями и т.д.
      • Что такое Sourcemap - файл для связи между исходным кодом и скомпилированным кодом.
      • Есть компонент, выводит на экран кнопку. Но кнопке счётчик нажатий (менятеся при клике). Предложить как можно больше методов реализации - как хранить данные о состоянии счётчика нажатий. При этом, что они сохрнаялись при обновлении страницы. Хотели услышать про вариант записи в URL-адрес, как источник истины (после ?)



Из личного опыта — по фирмам

  • JS
    • Типы данных
    • Работа JS-движка - Event Loop, стэк, очередь задач, микро/макро задачи, веб-воркеры, SetInterval/Promises...
    • Асинхронность и однопоточность JS - что это значит и чем обусловлено.
    • Promises, Promises API, Async/Await
    • Прототипы
    • Замыкания
    • Передача "по значению" и "по ссылке"
    • Различие стрелочных функций и обычных
    • This, bind, call
    • Атрибуты async и defer у тега script
    • Лексическое всплытие
  • TypeScript
    • Дженерики
    • Интерфейсы, отличия от типов
    • Кортежи, отличие от Массивов
    • Утилиты - Partial, Omit, Exclude, Extract
  • Сеть
    • HTTP, HTTP2, HTTPS
    • Методы HTTP
    • CORS
    • WebSocket
    • Cookies
  • React
    • методы жизненного цикла
    • хуки
      • useEffect
      • useMemo & UseCallback
      • useState
      • useRef
    • Virtual DOM
    • React.memo
    • Key, почему нельзя в него писать индекс элемента
    • Порталы
    • Оптимизация React, ререндеры
    • Методы жизненного цикла компонента React - не просто заучить, а понимать с какой целью они были добавлены.
  • Redux
    • Недостатки Redux
    • Устройство Redux (store, createStore, state, reducer, actions, action creators, dispatch, provider, connect, middleware, mapDispatchToProps, mapStateToProps)
    • Redux Toolkit
  • Работа браузера — DOM, Render, Relayout, Repaint, "дорогие" операции...
  • Алгоритмическая сложность


Вопросы одного из рекуртёров на скриниге (август 2022)

  • Из чего состоит http запрос?
    • Стартовая строка, Заголовки, Тело
  • Как сделать метод иммутабельным?
    • Такой метод не должен менять входные данные. Возвращать копию объекта (т.к. объекты меняются «по ссылке»).
  • Что такое статический метод класса?
    • Метод самого класса. Может вызываться для классов, но не для отдельных объектов, созданных на его базе.
    • Не имеет доступа к состоянию (полям) объекта, то есть к переменной this.
    • Он не знает, какой именно объект его вызвал и, соответственно, у него нет доступа к полям объекта.


ГК «Самолёт», React-frontend middle+ (август 2022)

  • Общее
    • что такое прогрессивный рендеринг, гидратация
    • как искать ошибки (console.log, debugger, точки останова)
    • какие JS/React библиотеки использую
  • CSS
    • методы позиционирования
    • семантическая вёрстка
  • JS
    • загрузка скриптов — обычная, async и defer
    • замыкания
    • event loop, микро-макро таск
    • Отличия Cookie, LocalStorage, sessionStorage — https://learn.javascript.ru/localstorage
  • React
    • что это такое
    • различия функциональных/классовых компонент
    • хуки
      • какие есть
      • как имитировать методы жизненного цикла
      • useState
      • useEffect, что даёт return
      • useMemo / useCallback (что вернёт)
    • отличия ReactRouter и ReactRouterDOM
  • Задачки


«CryptoRocks», React-frontend middle (сентябрь 2022)

  • Что такое VirtualDOM
  • Какие есть методы жизненного цикла
  • Какие стэйт-менеджменты использовал
  • Есть два react-компонента на разном уровне вложенности (меню в шапке и форма в боковой колонке). В форме что-то поменялось, надо прокинуть в шапку - какие есть варианты
    • Flux (Redux)
    • подъем пропсов до общего родителя
    • отслеживать изменения в DOM (совсем плохой вариант)
    • есть ещё какие-то варианты. Что-то про observer, библиотека RxJS
  • TypeScript
  • Задачки


«РЖД» (Цифровые сервисы), Frontend developer (сентябрь 2022)

  • Soft skills
    • почему у вас два разных резюме (краткое под React и полное под Drupal)
    • почему смнеили работу
    • какие результаты, достижения которыми гордишься? В жизни и в работе
    • что нравится / не нравится в работе
    • что предпочёл бы делать один, что предпочёл бы делать вместе, что предпочёл бы чтоб сделали вместо меня
    • сделал свои задачи, тим-лид отвечает долго, есть некий backlog задач на будущее (для всей команды, не факт что они пойдут мне) — что будешь делать? Отдыхать, ждать тим-лида, делать задачу из backlog (какую?)
    • что бы делал, если было бы неограниченное количество ресурсов (времени, сил, здоровья, денег)
  • Hard skills. React, Redux
    • Вопрос по моему проекту. Есть Redux Toolkit - почему тогда использую connect? Какие альтернативы предлагает Redux Toolkit
      • Redux Toolkit предоставляет хуки useDispatch и useSelector
    • Как получать данные из Redux?
    • Что такое useSelector (React-Redux).
    • Где хранить селекторы - в отдельной папке, в папке компонента, в файле компонента. Duck
    • Что такое и как работает store
    • Что такое и как работает action
    • Что такое и как работает thunk middleware,
    • Какие ещё middleware приходилось использовать
    • Приходилось ли писать свои middleware
    • Нужно ли в редьюсере в switch...case делать default и возвращать в нём state ?
      • Ответ — «да». Редьюсеров может быть много, каждый action раскидывается по всем редьюсерам. Какой-то один его обрабатывает, и может внести изменения (вернёт обновлённый кусок стэйта), остальные по дефолту вернут старый кусок стэйта. Из ответов всех редюсеров соберётся новый объект state.
    • Если в компоненте один коллбэк вызывает последовательно несколько actions один за другим - они выполнятся в том же порядке?
      • Ответ — «да». Redux store не возьмёт в работу второй action, пока не выполнится первый. Иначе бы Redux не мог нормально управлять state.
    • пара вопросов про работу React Router
  • Hard skills. JS
    • зачем нужна конструкция ?? - оператор «логического или»
    • приведение 0 и '0' к boolean
    • есть компонент, выводит на экран кнопку. Но кнопке счётчик нажатий (менятеся при клике). Предложить как можно больше методов реализации - как хранить данные о состоянии счётчика нажатий. При этом, что они сохрнаялись при обновлении страницы. Хотели услышать про вариант записи в URL-адрес, как источник истины (после ?)


«InfoWatch»** Frontend developer middle/senior (сентябрь 2022)

  • Вопросов было много, это примерно 2/3
  • В каких операционных системах работал
  • Не смущает ли необходимость зайти по SSH и исправить какой-то файл
  • «Как выйти из VIM» (шутка)
  • «Я знаю отличную шутку про UDP, но не факт, что она до вас дойдет». (шутка). UDP – это передача данных без установления соединения, не имеет подтверждения связи => нет гарантий доставки или порядка получения пакетов.
  • Что такое HTTP
  • Что такое HTTPS
  • Зачем нужны GET, POST и другие методы - почему не отправлять всё одним? Их различия
  • В чем различия если методом POST делать авторизацию (отправляем логин-пароль) или отправлять картинку?
  • Что за кракозябры появятся в адресной строке, если ввести туда что-то на русском - браузер использует кодировку ISO/IEC 8859-1, но там есть только латинские символы, так что любые другие приходится кодировать.
  • Безопасность - сталкивался ли с инъекциями и т.д.
  • Типы данных в JS, что даёт typeof
  • Массивы - это объекты?
  • Что такое область видимости
  • Какие есть способы объявить переменную, чем они отличаются
  • Что такое блок кода
  • Наследование, прототипы
  • Можно ли как-то поменять прототип
  • Promises
  • This, bind, call
  • Отличие стрелочных функций от обычных
  • Метод массива .map()
  • Задачка — Найти все ошибки в компоненте React. Типизировать хук useState()
    • key ставить родительскому элементу внутри map(), а не вложенном элементу
    • почему в key лучше использовать id, а не index
    • onChange - использовать SetState() вместо прямого присваивания нового значения (state[index].status = e.target.checked)
    • вообще концептуально неправильно ориентироваться на e.target.checked — лучше оперировать pRevState
    • типизировать хук useState
    • Решение: Legmo notes — Задачки для собеседования frontend
    • Что такое useState<>() в TypeScript


«T.Hunter» Frontend developer (сентябрь 2022)

  • экспресс-интервью под видео-запись (скрининг)
  • Можно ли сделать .bind стрелочной функции
    • нет. У стрелочных функций нет this, он всегда будет определяться как контекст, в котором был определен.
    • Если требуется привязка this — надо использовать обычную функцию.
    • Ошибки не будет, просто не сработает (скорее всего)
  • Чему равен typeof null
    • Object. Официальная ошибка языка
  • В чём разница .preventDefault() и .stopPropagation()
    • .preventDefault() — метод для отмены действия браузера
    • .stopPropagation() — остановка всплытия события. По умолчанию событие будет всплывать до элемента , а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути. Любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие. Не использовать без явной нужды, очевидной и архитектурно прозрачной. Иногда вместо этого мы можем использовать event.defaultPrevented, чтобы просигналить другим обработчикам, что событие обработано.
  • Что находится в конце цепочки прототипов?
    • Object.prototype. Все объекты наследуют свойства и методы Object. Любая попытка поиска за пределами цепочки приводит к null.
  • Как сделать полную копию объекта со свойствами типа 'number' и 'string'.
    1. создать новый объект и воспроизвести структуру существующего, перебрав его свойства и скопировав их на примитивном уровне. Нпрмиер циклом for..in
    2. использовать метод Object.assign. (Object.assign(целевой_объект, [исходный_объект1, исходный_объект2, ...]))
    3. при глубоком копировании - использовать рекурсию или что-то вроде cloneDeep из библиотеки lodash
  • Как удалить поле из объекта без копирования самого объекта?
    • метод delete. Но не использовать это в массивах! В массивах - .splice, slice, pop, .length - 1...
    • если нужен новый объект со всеми ключами оригинала, кроме некоторых — деструктурирование.
  • Когда вызывается рендер в React?
    • когда меняются state или props
      • в частности, когда мы вызываем функцию setState
    • когда меняется родительский компонент
  • Когда вызывается рендер в React для функциональных и классовых компонентов?
    • Классовые:
      • this.setState()
      • this.forceUpdate()
    • Функциональные
      • useState
      • useReducer
    • Все
      • Рендер родителя вызовет рендер всех его дочерних элементов (возможна оптимизация)
      • повторный рендеринг будет вызван, если повторно запустить ReactDOM.render(), что эквивалентно forceUpdate() на корневом компоненте.
  • Как оптимизировать рендер компонента?
    • shouldComponentUpdate — метод жизненного цикла классового компонента, если он вернет false то рендер не будет запущен
    • React.PureComponent — класс, реализующий типовой shouldComponentUpdate.
    • React.memo — HOC, который предотвращает повторный рендер, если входные props не изменились
    • useMemo() — чтобы в функциональном компоненте сохранить ссылки на объекты между рендерами
    • useCallback() — чтобы в функциональном компоненте сохранить ссылки на объекты между рендерами
    • аттрибуты key
    • Context /useContext() - Context API обеспечивает передачу переменных в дерево компонентов, без их непосредственной передачи в props данных компонентов.
    • оптимизация структуры компонет - помещать логику ближе к месту использования данных
  • Какие хуки использовать для оптимизации рендера?
    • useMemo() — чтобы в функциональном компоненте сохранить ссылки на объекты между рендерами
    • useCallback() — чтобы в функциональном компоненте сохранить ссылки на объекты между рендерами
    • useContext() - Context API обеспечивает передачу переменных в дерево компонентов, без их непосредственной передачи в props данных компонентов.
  • Как выполнить код на этапе между изменением state и render'ом?


«IT-One» Frontend developer (сентябрь 2022)

  • Задачка на JS — Генерация строки из массива объектов
  • есть массив однотипных объектов, у каждого есть свойства value, order, expired.
  • надо написать функцию которая
    • исключить объекты с expired=true,
    • оставшиеся отсортировать по значению order (предполагалось использовать метод sort),
    • потом взять значения свойства value,
    • сделать каждому значению reverse,
    • записать всё это в строку,
    • при этом ни один символ в строке не должен повторяться дважды (предполагалось использовать коллекцию Set)
  • // Написать функцию, либо последовательность операций, которая вернёт результат следующих условий:
// результате есть строка из сконкатенированных value элементов коллекции, расположенных в обратном порядке
// реузльтат не содержит одинаковых букв, если буква уже добавлена в строку, она более не добавляется
// результат собирается только из непросроченных записей (т.е. из тех, у которых expired: false)
// результат конкатенируется в порядке возрастания order
  
const input = [
  {value: 'qweq', order: 4, expired: false},
  {value: 'asdq', order: 2, expired: true},
  {value: 'jkri', order: 1, expired: false},
  {value: 'oiod', order: 3, expired: false},
];
  • Решение: Legmo notes — Задачки для собеседования frontend
  • Задачка на JS — Порядок вывода console.log
  • TypeScript
    • что такое Utility Types
    • Utility Types Recod, Pick...
  • Задачка на TypeScript - типизировать функцию
    • Задачка 
      /* 
 Есть объект X (произвольный) и функция getProperty, которая на вход принимает произвольный объект 
 и строковое значение свойств
 необходимо при помощи TypeScript допилить функцию getProperty таким образомю чтобы на этапе написания кода 
 в строке getProperty(X, 'm') компилятор выдавал ошибку «Argument of type '"m"' is not assignable to parameter of type '"a"' | '"b"' | '"c"' | '"d"'»
*/
  
const X = {a:1, b: 2, c: 3, d:4}
  
let getProperty = function(obj, key){
  return obj[key]
}
  
//getProperty(X,a)
//getProperty(X,m) 
  
// Должно получиться что-то вроде: 
// let getProperty:<V extends Record<string, >, T extends keyof V> = function(obj: V, data: T) => number;


«Orion», Frontend developer React middle (сентябрь 2022)

  • Вопросы от рекуртёра на скрининге

    1. Назови основные метрики производительности, на которые стоит обращать внимание, при разработке веб-приложения.
    2. Назови основные заголовки, отвечающие за кэширования веб-приложения.
    3. Что такое таски и микротаски?
    4. Зачем нужен Virtual DOM?
    5. Назови отличия useEffect от useLayoutEffect.

  • Задачка на собеседовании

    // ВАРИАНТ 1
// Написать функцию getData, которая запрашивает данные по url и
// в случае неуспешного запроса, повторяет его еще 5 раз
// в случае неудачи возвращает ошибку “Заданный URL недоступен”
// Как делаем запрос (fetch или что-то ещё - не важно)

function getData() { }
  
getData('https://example.com')
.then(console.log)
.catch(console.error)

    Решение: Legmo notes — Задачки для собеседования frontend

    // ВАРИАНТ 2 
// Написать синхронную функцию
// Внутри функции генерируем случайное число
// Если число больше 0,5 - возвращаем его
// Если число меньше 0,5 - вызываем снова. И так 5 раз 
// Если 5 раз неудача - выводим console.log

    Решение: Legmo notes — Задачки для собеседования frontend

  • ???


«ВТБ», Frontend developer React middle (октябрь 2022)

Задачка на React. Console.log внутри setTimeout внутри UseEffect

//Что будет выведено в console.log если очень быстро нажать 3 раза подряд на кнопку?

import React, {useStae, useEffect} from "react";
import ReactDOM  from "react-dom"; 

function Exmple() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setTimeout(() => {
      console.log(`You clicked ${count} times`)
    }, 3000);
  });
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count +1)}>
        Click me
      </button>
    </div>    
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);


«Aston», Frontend developer React middle (октябрь 2022)

Собеседование более часа, под видео-запись.

Некоторые вопросы:

  • JS
    • Асинхронность
    • Промисы
    • Promise API - promise.all и т.д.
    • Делегирование, всплытие
    • Прототипы.
      • Как сделать свой метод сортировки который будет доступен любому объекту?
      • Хорошо ли расширять / менять глобальны прототип?
      • Когда допустимо расширение прототипов? - полифилы для старых браузеров
      • Как идёт поиск по цепочке прототипов?
      • __proto__ и [[Prototype]]
  • TypeScript
    • Что такое Interface
    • Отличие Interface от Type. Когда что использовать? Больше семантическое, пришло из ООП.
    • Utility Types - Partial
    • Tuples - отличия от Array
  • React
    • useEffect. Пустой массив зависимостей
    • useRef [
      • зачем используется
        • работа с DOM-объектами
        • объект со свойством useRef вместо useState - не вызовет ре-рендер при изменении?]()
    • «Порталы» — что это такое и зачем нужны.
      • Пример использования - создание модальных окон. Передаём только id, рендерим в другом месте DOM
    • ErrorBoundary
  • Network
    • CORS
      • что это
      • JSONP, инъекции
      • простые и сложные
    • cookie
      • можно ли установить cookie из браузера?
      • любые ли cookie можно читать из кода?
  • Принципы программирования
    • DRY
    • KISS
    • YAGNI
    • SOLID

«Digital Nomands», Frontend developer React middle (октябрь 2022)

Вначале тестовое задание

  • есть виджет, который долго грузится
  • есть набор строк, которые должны выводиться, пока виджет грузиться («подождите ещё чуть-чуть» и т.д.)
  • есть объект с переводами этих строк, который пришёл с сервера
  • делать компонент-обёртку, который будет ждать загрузки виджета, выводить переведённые строки через опр. промежуток времени, если виджет не загрузился за время Х - прерывать загрузку и выводить соответствующее сообщение.
  • Т.е. в обёртке совмещён инструмент перевода (i18n) + какой-то таймер-планировщик
  • всё это со структурой папок, типизацией, линтером и т.д.

Вопросы

  • Что такое архитектура во фронтенде?
  • Как скопировать объект в JS?
  • Как из SetTimeout сделать Promise? (не очень понял вопрос, видимо имелось ввиду - как вызвать промис из setTimeout)
  • Generic в TypeScript
  • Что такое перегрузка в TypeScript?
  • Какие есть проблемы у Redux?
    • большая связность (?) - состояние всех компонент хранится в одном месте (глобальный store), сложно перенести модуль в другой проект, надо тянуть за собой структуру Redux. Концепции «изолированных модулей», «слои», реализация состояния хуками...
    • много «кода ради кода»
  • Что такое критичный CSS?
  • Что такое св-во gap в CSS?
  • Какой уровень вложенности блоков допустим в BEM?
    • любой
  • Как сделать запрос на сервер из HTML, без использования JS?
    • использовать submit формы
  • Отличия хуков useMemo() и useCallback()
  • Для чего нужны файлы .lock в npm/yran
    • хранят зависимости зависимостей - т.е. полное дерево зависимостей


«Raiffeisen», Frontend developer React middle (октябрь 2022)

Рассказ о себе Обсудили мой pet-project - архитектура, почему такая структура папок, зачем использую Redux и т.д.

Вопросы:

  • Стэйт-менеджменты кроме Redux (MobX и т.д.)
  • Возможности Redux Toolkit
  • Недостатки Redux
  • Что такое CORS?
  • WebSocket
  • Что такое Sourcemap - файл для связи между исходным кодом и скомпилированным кодом.
  • Что такое Webpack и зачем он нужен
  • HTTP, HTTP2, HTTPS
  • GrapQL
  • Мемоизация в React. useMemo, useCallback, React.memo
  • Как бороться с ререндерами в React
  • Key. Можно ли использовать случайные числа в качестве key
  • Из каких методов жизненного цикла делать запрос на сервер

Задачки:

  • в каком порядке выведутся console.log
  • Обработка строки (вырезать N восклицательных знаков)
    • Задача
      • Напишите функцию, которая принимает строку и удаляет из неё N восклицательных знаков
        const removeExclamations = (str, count) => {};
  console.log(removeExclamations('!!!Hello, !!world!', 5)) //Hello, world!
    • Решение: Legmo notes — Задачки для собеседования frontend
  • Написать функцию находящую пересечение двух массивов чисел.
    • Эту задачку пропустили - сказали что вроде знания у меня есть.
    • Задача 
      const a = [1, 10, 2, 6, 9, -32];
const b = [-7, 1, 9, 8, 0, 1, 10];
const intersect = (a,b) => {
  //your code here
}
//console.log(intersect(a,b)); //[1,9,10]
    • Решение: Legmo notes — Задачки для собеседования frontend
  • Создать React-компонент, который по нажатию кнопки создаёт новый <input>. Все значения валидируются. Если форма невалидна — кнопка «Сохранить» disabled.
    • Задача
      • Добавление любого количества input'ов по кнопке
      • Валидация введённого во все input значения с помощью функции validate
      • Если форма не валидна - кнопка «Сохранить» должна быть disabled
    • Решение: Legmo notes — Задачки для собеседования frontend


«Интеллектуальные решения», Фронтенд разработчик (ноябрь 2022)

Рассказ о проекте. Рассказ о себе

Вопросы:

  • Что такое замыкания
  • Что такое промисы
  • Можно ли реализовать аналог callback-hell с использованием промисов (внутри промиса?)
  • Какие есть циклы в JS
  • Как работает цикл for, что у него под капотом? (Под капотом у него while, а у того — генератор)
  • Что такое React
  • Основные хуки
  • Различия udeCallback и useMemo
  • Как работает Virtual DOM
  • Что такое Redux
  • Thunk, Middleware
  • TypeScript — Omit, Pick, Readonly

Задачки:

  • реализовать алгоритм поиска квадратного корня, не используя pow и log
  • числа Фиббоначи — ок
  • формула расчёта длины отрезка в двумерной системе координат — долго не мог понять как, потом сделал
    • по сути надо было написать фукнцию для формулы Math.sqrt(pow((x2-x1),2) + pow((y2-y1),2)).
    • формулу можно было найти в поисковике
  • проверить строку на уникальность символов (т.е. нет ли в ней повторяющихся символов - да/нет)
    • есть три решения
      • приводим строку к массиву orig, символы из строки пишем в массив result, и сравниваем orig и result. Сложность O(n + n^2)
      • из строки символы по одному присваиваем в объект hashMap (ключ = символ, значение = индекс символа в строке). Тогда при попытке присвоить второй такой же символ - он присвоится существующему. Потом можно посмотреть размер массива, например. И сравнить с длиной строке. Сложность алгоритма будет проще
      • символы строки присвоить коллекции Set и сравнить str.length === Set.size. Сложность O(n)
    • сделал одну реализацию из трёх (первую)
    • не смог посчитать сложность алгоритма
    • запутался что такое hashMap
    • не придумал вариант с ключом объекта => можно проверять символ по ключу
    • не придумал вариант с str.length !== Set.size
    • Подробнее: Legmo notes — Задачки для собеседования frontend


«Kamaz» цифровая платформа, Фронтенд разработчик (ноябрь 2022)

Собеседование без кодинга, теоретические вопросы — ~30 минут

Вопросы:

  • Есть ли знания Node.JS? Желание изучить?
  • Как организовать архитектуру приложения. Например, надо делить код между несколькими историями
  • Как работает движок JS «под капотом» (event loop и т.д.)?
  • Что такое WebWorkers API?
  • Что такое Service Worker API?
  • Как работает рендер браузера?
  • Как оптимизировать рендер React-компонента?
  • Что такое React.Memo? Отличия от useMemo?
  • Какие ещё хуки используются для оптимизации работы React?
  • Как я реализовал бы сложную форму на React? Formik, или custom hooks + MobX.
  • TypeScript — нужен ли на проекте?
  • TypeScript — какими возможностями пользуюсь?
  • Различия между any и unknow в TS
  • Настройки использования TypeScript в проекте — включаю ли поддержку any?
  • Настройки использования TypeScript в проекте — включаю ли strict node check — не позволяет присваивать занчение undefined


«Kamaz» цифровая платформа, Фронтенд разработчик — переаттестация

  • GIT

    • стратегии слияния merge
    • head
    • конфликты
    • git add

  • JS

    • асинхроннность. Что такое окружение. Куча и стэк в в эвент лупе
    • почитать про garbage collector (You don't know JS)
    • класс, объекты, ООП,
    • инстансы
    • создание объекта через функции-конструкторы
    • как рабоатет класс в JS
    • Модификаторы доступов классов - public, protected, private в TS через декораторы/ ключевые слова

  • React - singleton

  • Задачки

    • промисы в консоль лог
    • Promise.all написать без promis.all
    • были ещё несколько задачек



Популярные задачки

См Legmo notes — Задачки для собеседования frontend


Алгоритм подготовки к собеседованию

  • Изучить описание вакансии. Выписать технологии, повторить
  • Просмотреть заметки Lebmo notes. Знать что в каком файле лежит.
  • Повторить темы из этого файла («Подборки вопросов-ответов для собеседования разработчика»). Особенно разделы:
    • «Повторять»
    • «Из личного опыта»
    • «Популярные задачки»
    • остальные можно «просканировать»
  • Перечитать свои резюме (hh.ru, linkedin, doc-файлы...)
  • Почитать переписку с рекуртёром, посмотреть свои заметки по вакансии
  • Полистать свои публичные проекты на GitHub — чтоб ответить на вопросы по своему коду
  • Подготовить открытые вкладки — подглядывать на собеседовании (Legmo notes, learnjs, mdm, reactjs.org, свои резюме, вакансия)
  • Открыть редактор с JS кодом — набирать-проверять код. Например plnkr.co
  • Подготовить свои достижения/неудачи. Яркие, красивые примеры из своего рабочего опыта — какую выгоду получила ваша предыдущая компания от вашей деятельности, как вы помогли спасти ее от кризиса, как вы вывели ее в лидеры и т.д.
  • Можно поискать в сети — как проходит собеседование в эту компании. Что спрашивают. Какие задачки задают.
  • Если дали тестовое задание — поискать его на GitHub, вероятно кто-то уже делал и выкладывал код своего решения.
  • Полистать код тестовых заданий, которые делал для других компаний
  • Пересмотреть IT-Kamasutra #100 - Теория ReactJS + Redux за 90 минут
  • Можно потренироваться в live coding


Уточнить у рекуртёра перед собеседованием

  • Сколько этапов? На этапе Х отсеиваются люди?

  • Собеседование будет на русском? Предусмотрено какое-то общение на английском?

  • Длительность?

  • Какая платформа (Скайп, Zoom, Телемост...)?

  • Видео потребуется?

  • Сколько человек кроме меня участвует в собеседовании? Кто они?

  • Есть примерный список тем/технологий, которые будем обсуждать?

  • Будет ли какой-то live-coding?


React.js

Вопросы на собеседовании React.js

JavaScript

  • Какие типы данных существуют в JavaScript?
  • Что такое цикл событий (event loop) и как он работает?
  • Что такое замыкание?
  • Что такое прототип объекта в JavaScript?
  • Как работает ключевое слово this?
  • Как работают методы apply(), call() и bind()?
  • Что такое Promise (Промис)?

React

  • Какие методы жизненного цикла компонента существуют в React?
  • Что такое Context в React и для чего он используется?
  • Что такое Виртуальная DOM?
  • Для чего нужен атрибут key при рендере списков?
  • В чем разница между управляемыми (controlled) и не управляемыми (uncontrolled) компонентами?
  • Что такое PureComponent?
  • Что такое Компонент высшего порядка (Higher-Order Component, HOC)?
  • Что такое хуки в React?
  • Что такое порталы в React?


Вопросы и ответы на собеседовании по React.js

Вопросы и ответы на собеседовании по React.js

  • Как заставить компонент React перерендерится?
  • Назовите методы жизненного цикла компонента?
  • Какие методы компонента могут быть вызваны после некоторых изменений состояния?
  • Почему важно использовать key для отображения элементов списка ?
  • Как обрабатывать событие нажатия кнопки в React.js ?
  • Как передать параметр обработчику события или в callback?
  • Что произойдет, если передать функцию в метод setState ?
  • Что такое поднятие состояния вверх по иерархии в React (Lifting State Up)?
  • Как получить значение input?
  • Что такое строгий режим в React.js
  • Что такое порталы(Portals)?
  • В каком методе жизненного цикла нужно сделать HTTP-запрос ?
  • Что такое чистый компонент и когда он должен использоваться ?
  • Как сделать условный рендер в React.js?
  • Как собрать React приложение в production режиме?
  • Где инициализировать состояние компонента?
  • Что представляют собой компоненты высшего порядка в React.js (HOC)?
  • Кода нужно использовать метод getDerivedStateFromProps(props, state)?
  • Что такое PropTypes и как их использовать?
  • Что такое stateless компоненты?


Вопросы для собеседования по хукам React

Вопросы для собеседования по хукам React

  • Что такое хуки в React?
  • Будут ли хуки React работать внутри классовых компонентов?
  • Зачем были введены хуки в React?
  • Как работает хук useState? Какие аргументы принимает этот хук и что он возвращает?
  • Задача на использование useState
  • Задача на использование useState 2 — callback
  • Задача на использование useState 3 — слияние объектов в setSteat()


Вопросы про React на собеседовании

Вопросы про React на собеседовании

  • Что происходит, когда вы вызываете setState?
  • Какая разница между Элементом и Компонентом в React?
  • Когда вам использовать Class Component вместо Functional Component?
  • Что за refs в React и в чем их важность?
  • Что за keys в React и чем их важность?
  • Если вы создали в React элемент Twitter как в примере ниже, то как бы он выглядел?
  • В чем разница между controlled и uncontrolled компонентами?
  • В какой момент жизненного цикла вы применяется AJAX запросы и почему?
  • Что делает и почему важен shouldComponentUpdate?
  • Как вы скажете React строить в режиме Production и как это сделать?
  • Опишите, как в React обрабатываются события?
  • В чем разница между createElement и cloneElement?
  • Какой второй аргумент можно передать опционально в setState и какова его цель?
  • Что не так с этим кодом?


Топ 15 вопросов о React.JS на собеседовании (другой перевод)

Топ 15 вопросов о React.JS на собеседовании (другой перевод)

  • Что делает setState?
  • В чем разница между элементом и компонентом React.JS?
  • В каких случаях Class Component лучше, чем Functional Component?
  • Что такое refs и с чем их едят?
  • React key – это…
  • Как бы выглядел приведенный ниже элемент Twitter в React?
  • Разница между компонентами controlled и uncontrolled
  • В каком моменте должны быть AJAX запросы и почему?
  • Что за зверь, этот shouldComponentUpdate?
  • Поговорим с React.JS: режим Production
  • Почему React.Children.map(props.children, () => ), а не props.children.map(() => )?
  • Опишите обработку событий в React.JS
  • В чем разница между cloneElement и createElement?
  • Какой второй аргумент может быть передан в setState?


Вопросы на собеседование по React / Redux

Вопросы на собеседование по React / Redux

  • Что такое React?
  • Что такое Виртуальная DOM?
  • В чем разница между состоянием и свойством?
  • Какие существуют фазы жизненного цикла компонентов React?
  • Как работает React?
  • Что такое потомки?
  • Что такое состояние в React?
  • Что такое контролируемые компоненты?
  • Что такое Flux?
  • Что такое Redux?
  • Как изменяется состояние в Redux?
  • Что такое «хранилище» в Redux?
  • Что такое чистая функция?
  • Как бы вы отключили хранилище Redux, чтобы оно не принимало никаких изменений в состоянии?


Козлова О - React.js + Redux

Козлова О - React.js + Redux — interview questions

  • Зачем вообще нужен реакт?
  • Что такое виртуальный DOM?
  • Жизненный цикл React компонента?
  • Что такое JSX?
  • Stateless vs Stateful React компоненты?
  • Functional vs Class React компоненты?
  • Smart vs Dumb React компоненты?
  • Отличия props и state?
  • Архитектура Redux


Козлова О - JS. Массивы

Козлова О - JS. Массивы

  • Какие способы создать массив вы знаете?
  • Какие особенности существуют у массивов в JavaScript по сравнению с массивами в других языках программирования — C, C#?
  • Как можно узнать длину массива?
  • Можно ли перезаписать length массива?
  • Как можно перебрать все элементы массива?
  • Какие методы для работы с массивом как со стеком Вы знаете?
  • Что будет в переменной result после исполнения этого кода? (Array.prototype.push.apply(arr, [3, 4]))
  • Какие методы для работы с массивом как с очередью Вы знаете?
  • Какие методы изменения порядка элементов массива Вы знаете?
  • Что будет в переменной result после исполнения этого кода? (array.sort())
  • Каким условиям должна удовлетворять функция-comparator передаваемая методу Array.prototype.sort()?
  • Как преобразовать массив в строку?
  • Метод объединения массивов?
  • Метод создания подмассива из массива?
  • Метод заполнения элементов массива
  • Методы перебора элементов массива
  • Методы поиска элементов в массиве
  • Методы редукции массивов
  • Как проверить, является ли элемент массивом?
  • Какой typeof у массива?
  • Почему не рекомендуется работать с разнотипными и разреженными массивами?
  • Преобразование массивов в другие типы данных


Козлова О - JS. Функции

Козлова О - JS. Функции

  • Какие способы создать функцию Вы знаете?
  • Какие способы вызвать функцию Вы знаете?
  • Какую функцию можно вызвать как конструктор?
  • Что происходит при вызове функции как конструктора?
  • Что будет в каждой переменной?
  • Что такое самоопределяемая функция? Приведите пример.
  • Как работает bind?
  • Что такое немедленно вызываемые функции? Примеры? Применение?
  • Что такое стрелочные фунцкии? Каковы их особенности?
  • Что такое вложенность функций?
  • Как можно работать с функцией как с объектом?
  • Как передаются аргументы в функцию? По ссылке или по значению?
  • Как получить все аргументы функции, если точное их количество не известно?
  • Каковы особенности работы с объектом arguments?
  • Что такое замыкания?
  • Как можно применять замыкания?
  • Какие проблемы могут вызвать замыкания?


Пацианский М - Вопросы для собеседования JS разработчика

Пацианский М - Вопросы для собеседования javascript разработчика

Основы

  • прицнипы ООП (хороший эффект производит знание трех слов: инкапсуляция, наследование, полиморфизм)
  • типы данных javascript
  • что такое свойство объекта, а что метод
  • написать функцию, add, чтобы вызов add(1)(2) вернул 3 (замыкания)
  • армия функций
  • кофеварка (один раз написать самому, подсматривая в учебник обязательно)
  • знать, что объекты передаются по ссылке
  • как сделать debounce функцию
  • map, filter, reduce
  • XMLHttpRequest и как его отменить, современный вариант fetch
  • promise

React

  • Какую проблему решает react?
  • Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен
  • Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента…
  • в каких методах жизненного цикла стоит выполнять xhr запросы? В каких стоит «обновлять state на основе props«?
  • Что будет если вызвать this.setState в render методе компонента?
  • Зачем нужен componenWIllUnmount, приведите пример
  • Контролируемые, не контролируемые компоненты
  • Как организовать роутинг в реакт приложении?
  • Зачем нужны propTypes? Что происходит с ними в production сборке?
  • Как можно удобно «отлаживать» чужой код приложения, написанного на react (намек в сторону React devtools)

Redux

  • Какую проблему решает redux?
  • Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое «действие», а что такое «создатель действия»…
  • Что такое редьюсер? Можете написать простой редьюсер без react/redux?
  • Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить «терминами» — асинхронный aciton)
  • Как компоненты приложения получают «пропсы» из «стора»?
  • Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
  • Почему в reducer’ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
  • Что возвращает функция connect (из react-redux)?

Общие вопросы (что это и для чего?)

  • package.json
  • Webpack, gulp, и т.д.
  • node.js
  • promise


Ещё





Legmo, 2019-2023