Mapped types — это шаблонные типы, которые трансформируют свойства существующего типа, создавая новую модифицированную версию. Они используются для массового изменения модификаторов (readonly, optional) или преобразования типов полей без дублирования кода.

✈️ Frontend собеседования

Синтаксис async/await упрощает работу с промисами, делая асинхронный код похожим на синхронный.

async function fetchData() {
  const response = await fetch('url'); // Ожидание выполнения промиса
  const data = await response.json(); // Ожидание преобразования
  return data;
}

Функция с async всегда возвращает промис. await можно использовать только внутри async -функций и оно приостанавливает выполнение до разрешения промиса. Ошибки обрабатываются через try/catch.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Функция var() позволяет использовать CSS-переменные (кастомные свойства), объявленные через --prefix-name.

:root {
  --main-color: #3498db; /* Объявление переменной */
}

.element {
  color: var(--main-color); /* Использование переменной */
}

Если переменная не определена, можно указать fallback-значение вторым параметром:

.element {
  background: var(--unknown-color, #f1c40f); /* Используется #f1c40f, если переменной нет */
}

Переменные вычисляются во время выполнения и поддерживают каскадирование.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Для отмены локальных изменений в файлах используется git checkout -- <file>, а для сброса проиндексированных изменений — git reset HEAD <file>. Чтобы отменить последний коммит, применяется git reset --soft HEAD~1 с сохранением изменений или git reset --hard HEAD~1 для полного удаления.

✈️ Frontend собеседования

Компонент высшего порядка (HOC) — это функция, которая принимает компонент и возвращает новый улучшенный компонент с дополнительной логикой.

function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

HOC используются для повторного использования логики (логирование, авторизация, подписки). Это альтернатива хукам, но с менее явным потоком данных.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

ARIA-атрибуты (Accessible Rich Internet Applications) — это набор специальных атрибутов, которые делают веб-контент доступным для вспомогательных технологий, таких как скринридеры.

<button aria-label="Закрыть меню" aria-expanded="false">×</button>

Они описывают роли (role), состояния (aria-disabled, aria-checked) и свойства элементов (aria-labelledby), когда стандартного HTML недостаточно. Например, для кастомных виджетов или динамически изменяемого контента.

<div role="alert" aria-live="assertive">Ошибка загрузки</div>

Использование ARIA обязательно для соответствия стандартам доступности (WCAG).

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

✈️ Frontend собеседования

WeakMap и WeakSet — это коллекции, хранящие объекты как ключи (для WeakMap) или элементы (для WeakSet) без предотвращения их сборки мусора.

const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, 'data'); // Ключ — объект

Отличие от Map/Set:
- Не поддерживают перебор методовом forEach или size
- Ключи должны быть объектами
- Автоматически удаляют записи при удалении объекта-ключа

Используются для хранения метаданных или кеширования без утечек памяти.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

const set = new Set([1, 2, 3]);
set.add(4); // Добавить значение
set.has(2); // true – проверка наличия
set.delete(1); // Удалить значение

Map – коллекция пар ключ-значение, где ключом может быть любой тип. Удобен для хранения данных с нестроковыми ключами.

const map = new Map();
map.set('name', 'Alice'); // Добавить запись
map.get('name'); // 'Alice' – получить значение
map.delete('name'); // Удалить запись

Обе структуры поддерживают итерацию и имеют методы size, clear().

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

✈️ Frontend собеседования

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

<img src="image-default.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Example image">

В этом примере srcset содержит три версии изображения с указанием их ширины в пикселях. Атрибут sizes определяет, какое изображение использовать в зависимости от ширины экрана. Это улучшает производительность и адаптивность веб-страниц.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

useContext — это хук для доступа к данным контекста без пропсдриллинга.

Создание контекста:

const MyContext = createContext(defaultValue);

Обертывание компонентов провайдером:

<MyContext.Provider value={someValue}>
  <ChildComponent />
</MyContext.Provider>

Использование в компоненте:

const value = useContext(MyContext);

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Тег <code> используется для выделения фрагментов кода в HTML. Он отображает текст моноширинным шрифтом, сохраняя форматирование, но для многострочного кода лучше подходит <pre>.

✈️ Frontend собеседования

👉 HEAD в Git — указатель на текущий коммит или ветку. Он всегда показывает, где находится рабочая область (последний загруженный коммит). Если HEAD указывает на ветку, он перемещается при новых коммитах. В оторванном состоянии (detached HEAD) ссылается напрямую на коммит.

git show HEAD  # Просмотр текущего коммита

HEAD хранится в .git/HEAD и может ссылаться на другой указатель (например, ref: refs/heads/main) или хэш коммита.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Рендеринг массивов в React выполняется с помощью метода map(), который преобразует каждый элемент массива в JSX-элемент. Каждый элемент должен иметь уникальный key для оптимизации процесса обновления DOM.

const items = ['Apple', 'Banana', 'Orange'];
const listItems = items.map((item, index) => (
  <li key={index}>{item}</li>
));

Использование index в качестве key допустимо, но не рекомендуется для динамически изменяемых списков. Лучше применять уникальные идентификаторы из данных.

Для условного рендеринга можно комбинировать map() с проверками:

{items.length > 0 && items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

Если массив пуст, можно вывести fallback-контент.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Utility-типы в TypeScript позволяют трансформировать существующие типы для создания новых. Omit исключает указанные свойства, Pick выбирает только нужные, а Partial делает все поля необязательными.

✈️ Frontend собеседования

Объект arguments — это псевдомассив, доступный внутри обычных (не стрелочных) функций. Он содержит все переданные аргументы, даже если они не объявлены в параметрах.

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

arguments не является настоящим массивом, поэтому методы типа map или forEach недоступны без преобразования. В современных проектах вместо arguments чаще используют rest-параметры (...args).

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Свойство object-position определяет выравнивание содержимого внутри заменяемого элемента, такого как <img> или <video>, относительно его контейнера. Работает совместно с object-fit.

По умолчанию значение object-position: 50% 50% центрирует содержимое. Можно задать смещение в пикселях или процентах:

img {
  object-fit: cover;
  object-position: 20px 10%;
}

Первый параметр — горизонтальное смещение, второй — вертикальное. Отрицательные значения допустимы. Если указано одно значение, второе считается 50%.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Альтернативный текст для изображений задаётся через атрибут alt и нужен для доступности — он отображается, если изображение не загрузилось, и озвучивается скринридерами для слабовидящих. Также alt помогает поисковым системам понимать содержимое картинки.

✈️ Frontend собеседования

Рефы (refs) в React позволяют получать прямой доступ к DOM-элементам или React-компонентам, обходя механизм реактивности. Используются для управления фокусом, анимациями, интеграции со сторонними библиотеками.

Создаются через useRef (в функциональных компонентах) или createRef (в классовых). Реф присваивается элементу через атрибут ref:

const inputRef = useRef(null);  

<input ref={inputRef} />

После монтирования inputRef.current будет содержать DOM-узел. Изменения рефа не вызывают ререндер компонента.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Чтобы проверить чётность числа, можно использовать оператор остатка от деления %. Если число делится на 2 без остатка — оно чётное.

function isEven(num) {
  return num % 2 === 0;
}

Для отрицательных чисел результат также будет корректным. Альтернативный способ — проверка младшего бита:

const isEven = (num) => (num & 1) === 0;

Оба метода работают с целыми числами. Первый вариант более читаем, второй — быстрее.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования