*когда не проходит один из тестов на литкоде 😅

Типы задач на livecoding. Часть 1.

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

Два указателя — одна из самых популярных тем из алго-секции на фронт-собеседованиях, и пока не теряет обороты.

Какие задачи в целом часто дают на фронт-собеседованиях?
- Алгоритмические (два указателя, скользящее окно, хэш-таблица, стек)
- Особенности языка (асинхронность, контекст, замыкания, метод промиса или массива)
- Основы фреймворка (рефакторинг, асинхронность, особенности)

В этой серии, мы посмотрим решения самых частых алгоритмических задач, потому что задачи на JS мы многократно решали на стримах, и наверняка вы и так их помните) 👇

Заметка: без знания алгоритмической сложности тема может быть непонятной.

Что в может указывать на то, что задача решается указателями?

— Отсортированный массив
— Два массива
— Палиндром

Задача 1. Вариация на TwoSum.

Наверняка все, кто заходил на литкод ее знают.

Дан массив чисел и target, нужно найти в массиве два числа, которые в сумме дают target.

Например: [1, 3, 5, 7, 9, 13]

Решение 1.

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

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

function twoSumSorted(arr, target) {
  let left = 0;
  let right = arr.length - 1;

  while (left < right) {
    const sum = arr[left] + arr[right];

    if (sum === target) {
      return [left, right];
    } else if (sum < target) {
      left++;
    } else {
      right--;
    }
  }

  return null;
}

Задача 2. Обьединить два отсортированных массива в один.

Частое решение в JS — собрать массивы через spread оператор, и далее отсортировать через sort(). И оно неверное 😅

Надо помнить, что sort() имеет линейно-логарифмическую сложность, то есть работает дольше, чем если мы просто пройдемся указателями по массивам: линейная сложность.

Решение 2.

У задачи есть два варианта. Базовый и более интересный.

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

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

Если начать с первых элементов, можно затереть первый элемент, и получится не тот результат, который мы ожидаем)

Поэтому фишка этого варианта — делать все тоже самое, но начинать с последних элементов массива. Ну и само собой, записывать элементы тоже в конец. 🌚

function mergeSortedArraysInPlace(arr1, m, arr2, n) {
  let i = m - 1;
  let j = n - 1;
  let k = m + n - 1;

  while (i >= 0 && j >= 0) {
    if (arr1[i] >= arr2[j]) {
      arr1[k] = arr1[i];
      i--;
    } else {
      arr1[k] = arr2[j];
      j--;
    }
    k--;
  }

  // если в arr2 остался остаток
  while (j >= 0) {
    arr1[k] = arr2[j];
    j--;
    k--;
  }
}

Эта тема одна из самых популярных, следующая за ней по частоте и популярности -> скользящее окно, которая плавно выходит из темы указателей.

Если было интересно и такой формат разборов полезен — ставьте 👍, и мы сделаем следующие посты на оставшиеся частые темы с фронт-собеседований: скользящее окно, хэш-таблица.

@codepunks_bro

Как удобнее всего оплачивать зарубежные сервисы?

Вообще вариантов очень много, самый базовый и на все случаи: eResidency Казахстана и карта Freedom Bank. Я сам им пользуюсь, но чтобы получить резиденство КЗ нужно будет отдать 120$, зато оформление карты бесплатное. Пластиковую карту можно доставить в любой город России.

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

И дальше, для меня, идут виртуальные карты, например WantToPayBot, но в итоге с комиссиями при регулярных переводах выходит дороже, чем если сделать свою карту в банке. Также этим способом оплатить можно не все сервисы, например с claude очень сложно.

А как вы оплачиваете сервисы?

Что могут спросить на собеседовании по теории React?

Собрал популярные вопросы с 1617 собеседований, которые прошел со своей группой за год с небольшим, со ссылками на официальную документацию и подробные разборы по каждому пункту.

Основы
- Что такое React?
- Что нового в React 18, 19?
- Перечислите особенности React
- Назовите преимущества использования React
- Является ли React реактивным?
- Разница между JSX и HTML
- Что такое JSX и как он компилируется?
- Как отрендерить HTML код в React-компоненте?

Virtual DOM -> Fiber
- Что такое Virtual DOM? Как он работает с React?
- Что такое React Reconciliation?
- Что такое React Fiber?
- Назовите основную цель React Fiber
- Разница между теневым (Shadow) и виртуальным (Virtual) DOM

Компоненты
- Разница между классовым и функциональным компонентами
- Разница между элементом и компонентом
- Разница между компонентом и контейнером
- Разница между управляемыми (controlled) и неуправляемыми (uncontrolled) компонентами
- Что такое компонент-переключатель (Switching Component)?
- Что такое распределённый компонент?
- Что такое Компонент высшего порядка (HOC)?
- Что такое инверсия наследования (Inheritance Inversion)?
- Методы жизненного цикла компонента в React
- Стадии жизненного цикла компонента в React
- Разница между рендерингом и монтированием

Пропсы, состояние, поток данных
- Как React обрабатывает / ограничивает использование пропсов определённого типа?
- Что такое «бурение пропсов» (Prop Drilling)? Как его избежать?
- Как передавать пропсы в React Router?
- Что такое поднятие состояния вверх (Lifting State Up)?
- Как в React реализовать двустороннее связывание данных?
- Что такое обратный поток данных в React?

Хуки (Hooks)
- Что такое React хуки (Hooks)?
- Преимущества хуков?
- Недостатки хуков?
- Правила (ограничения) использования хуков?
- Когда использовать useMemo, а когда useCallback?
- useId: https://ru.react.dev/reference/react/useId
- useTransition: https://ru.react.dev/reference/react/useTransition
- useDeferredValue: https://ru.react.dev/reference/react/useDeferredValue
- useSyncExternalStore: https://ru.react.dev/reference/react/useSyncExternalStore
- useInsertionEffect: https://ru.react.dev/reference/react/useInsertionEffect

Рендеринг
- Что такое условный рендеринг (Conditional Rendering)?
- Что такое «ленивая» (Lazy) функция?
- Что такое синтетические события в React (SyntheticEvent)?
- Что такое события указателя (Pointer Events)?
- Что такое Error Boundary?
- Что такое строгий режим (StrictMode)? Его преимущества?

Маршрутизация и стейт-менеджмент
- Чем React Router отличается от обычной маршрутизации?
- Какие хуки были добавлены в React Router версии 5, 6, 7?
- Что такое Reselect и как он работает?

Прочее
- Что такое «опрос» (Polling)? Как его реализовать в React?
- Техники оптимизации производительности в React?
- Практики безопасности в React

Вообще вопросов по React не больше 100, может показаться что это много, но допустим в разделе "Безопасность, браузер, веб" уникальных вопросов как минимум в 4 раза больше, буквально 400+, поэтому я все-никак не могу найти способ уместить это в один лаконичный пост.. 👨‍💻

Но если вы поставите много очкариков 🤓, я постараюсь все это осилить и подготовить пост по вопросам из этой категории тоже)

Какие еще вопросы вы встречали на собеседованиях?

Кто я | Кейсы | Менторство