➡️ Контекст this в JavaScript определяет, к какому объекту относится выполняемая функция. Значение this зависит от того, как функция вызывается: в методе объекта this ссылается на сам объект, в обычной функции — на глобальный объект (или undefined в строгом режиме).

const obj = {
  value: 42,
  method() {
    console.log(this.value); // this ссылается на obj
  }
};
obj.method();

При использовании стрелочных функций this берется из внешнего контекста, так как они не имеют собственного this.

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

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

🔥 Разница между visibility: hidden и display: none заключается в том, как они скрывают элементы на странице.

visibility: hidden делает элемент невидимым, но он продолжает занимать место в документе. Элемент остается частью потока, и его размеры влияют на расположение других элементов.

.element {
  visibility: hidden; /* Элемент невидим, но место остается */
}

display: none полностью удаляет элемент из потока документа. Элемент не отображается и не занимает место, как будто его нет в DOM.

.element {
  display: none; /* Элемент полностью удаляется из потока */
}

Выбор между ними зависит от задачи: если нужно скрыть элемент, но сохранить его место, используется visibility: hidden. Если элемент нужно полностью убрать из потока, применяется display: none.

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

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

Чтобы вернуть файл к состоянию последнего коммита, используется команда git checkout -- <file>. Это сбрасывает все изменения в файле, сделанные после последнего коммита, восстанавливая его содержимое.

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

🔴Чтобы предотвратить ненужные повторные рендеры компонента, можно использовать React.memo для функциональных компонентов или PureComponent для классовых. Эти инструменты позволяют избежать рендера, если пропсы и состояние не изменились.

const MyComponent = React.memo(({ prop1, prop2 }) => {
  return <div>{prop1} {prop2}</div>;
});

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

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

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

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

✅Для проверки наличия свойства в объекте можно использовать метод hasOwnProperty или оператор in.

const obj = { key: 'value' };

// Проверка с помощью hasOwnProperty
if (obj.hasOwnProperty('key')) {
  console.log('Свойство существует');
}

// Проверка с помощью оператора in
if ('key' in obj) {
  console.log('Свойство существует');
}

Разница между ними в том, что hasOwnProperty проверяет только собственные свойства объекта, игнорируя унаследованные, а оператор in проверяет как собственные, так и унаследованные свойства. Выбор зависит от задачи.

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

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

Функция calc() позволяет выполнять математические вычисления прямо в CSS, используя значения с разными единицами измерения, например, проценты, пиксели или em. Она часто применяется для динамического расчета размеров, отступов или позиционирования элементов на странице.

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

➡️Чтобы переключиться на другую ветку, используется команда git checkout <branch-name>. Если ветка существует, она будет активирована, а рабочая директория обновится до состояния этой ветки.

git checkout feature-branch

Для создания и переключения на новую ветку одновременно можно добавить флаг -b.

git checkout -b new-feature-branch

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

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

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

const LazyComponent = React.lazy(() => import('./LazyComponent'));

Для работы с лениво загружаемыми компонентами требуется обернуть их в Suspense, чтобы указать запасной контент (например, лоадер) на время загрузки.

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

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

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

data-* атрибуты позволяют хранить пользовательские данные прямо в HTML-элементах. Они используются для передачи информации между разметкой и JavaScript, не влияя на отображение или поведение элемента.

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

🟡Декларационные файлы (.d.ts) используются для описания типов в TypeScript, когда исходный код написан на JavaScript или когда типы нужно описать отдельно. Они позволяют TypeScript понимать структуру и типы данных в сторонних библиотеках или модулях.

declare module 'some-library' {
  export function someFunction(): void;
}

Такие файлы необходимы при работе с библиотеками, которые не имеют встроенной поддержки TypeScript, или для расширения типов существующих модулей.

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

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

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

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

▶️ Препроцессоры CSS — это инструменты, расширяющие возможности стандартного CSS. Они добавляют функции, такие как переменные, вложенные правила, миксины и математические операции, что упрощает написание и поддержку стилей.

Пример на SCSS:

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

- Переменная $primary-color хранит цвет, а функция darken() затемняет его.
- Вложенность позволяет группировать стили, улучшая читаемость.

Популярные препроцессоры: SASS, LESS, Stylus. Они компилируются в стандартный CSS, который понимают браузеры.

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

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

Объединение веток в Git выполняется с помощью команды git merge, которая интегрирует изменения из одной ветки в другую. Для создания коммита слияния используется стратегия merge, а для линейной истории — rebase.

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

▶️Hoisting (поднятие) — это механизм, при котором объявления переменных и функций перемещаются вверх своей области видимости перед выполнением кода. Это позволяет использовать переменные и функции до их фактического объявления в коде.

Пример с переменными:

console.log(x); // undefined
var x = 5;

- Переменные, объявленные через var, поднимаются, но их значение инициализируется как undefined.

Пример с функциями:

foo(); // "Hello"
function foo() {
    console.log("Hello");
}

- Объявления функций поднимаются полностью, поэтому их можно вызывать до объявления.

Hoisting не применяется к let и const, которые остаются в "временной мертвой зоне" до объявления.

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

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

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

Для создания портала используется ReactDOM.createPortal. Первый аргумент — это React-элемент, который нужно отрендерить, а второй — DOM-узел, куда будет вставлен элемент.

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

В этом примере компонент Modal рендерится в элемент с id modal-root, который может находиться вне основного дерева компонентов. Это позволяет управлять слоями интерфейса независимо от основной структуры приложения.

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

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

Тег <footer> используется для определения нижнего колонтитула (подвала) раздела или страницы. Обычно содержит информацию об авторе, ссылки на связанные документы, копирайт или контактные данные.

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

✅Центрирование элемента по горизонтали и вертикали можно реализовать несколькими способами. Один из самых популярных — использование Flexbox.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center;     /* Центрирование по вертикали */
  height: 100vh;          /* Высота контейнера на весь экран */
}

Другой способ — с помощью Grid:

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh;      /* Высота контейнера на весь экран */
}

Для абсолютно позиционированных элементов подойдет следующий подход:

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Каждый из этих методов обеспечивает точное центрирование элемента в зависимости от требований и контекста.

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

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

🔴Деструктуризация — это синтаксис, позволяющий извлекать данные из массивов или объектов в отдельные переменные. Упрощает работу с данными, делая код более читаемым.

Для массивов:

const numbers = [1, 2, 3];
const [first, second] = numbers;
// first = 1, second = 2

Элементы массива присваиваются переменным по порядку.

Для объектов:

const user = { name: 'Alice', age: 25 };
const { name, age } = user;
// name = 'Alice', age = 25

Имена переменных должны совпадать с ключами объекта. Можно использовать псевдонимы:

const { name: userName, age: userAge } = user;
// userName = 'Alice', userAge = 25

Деструктуризация часто используется для извлечения значений из параметров функций или возвращаемых данных.

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

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

➡️ Использование TypeScript с React повышает надежность и поддерживаемость кода за счет статической типизации. Основные преимущества:

1. Типизация пропсов и состояния
Позволяет явно указать типы для пропсов и состояния компонентов, что уменьшает вероятность ошибок.

interface Props {
   name: string;
   age: number;
}
const User: React.FC<Props> = ({ name, age }) => <div>{name}, {age}</div>;

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

3. Раннее обнаружение ошибок
Ошибки типов выявляются на этапе компиляции, что снижает вероятность багов в рантайме.

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

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

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

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

⏩ В HTML формах атрибуты action и method определяют, как данные будут отправлены на сервер.

action
Указывает URL, на который отправляются данные формы. Это может быть путь к серверному скрипту, который обрабатывает данные.

<form action="/submit-form" method="post">

В данном случае данные формы будут отправлены на /submit-form.

method
Определяет HTTP-метод, используемый для отправки данных. Основные значения:
- GET: Данные добавляются в URL как параметры запроса. Подходит для нечувствительных данных.
- POST: Данные отправляются в теле запроса. Используется для отправки конфиденциальной информации или больших объемов данных.

<form action="/search" method="get">

Здесь данные формы будут отправлены методом GET, и их можно увидеть в адресной строке.

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

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

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

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