Frontend | Вопросы собесов

🤔 Почему при обращении к примитивной строке, можно обратиться и как к объекту?

Потому что временно происходит боксинг — JS оборачивает примитив во временный объект (String, Number, и т.д.), чтобы можно было вызывать методы (length, toUpperCase и др.).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как определить что состояние является глобальным?

Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов:

🚩Используется ли это состояние в нескольких независимых компонентах?

Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux).

// Глобальное состояние (например, Context API)
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });

  return (
    <UserContext.Provider value={user}>
      <Navbar />
      <Profile />
    </UserContext.Provider>
  );
}

function Navbar() {
  const user = useContext(UserContext);
  return <div>Привет, {user.name}!</div>;
}

function Profile() {
  const user = useContext(UserContext);
  return <div>Профиль пользователя: {user.name}</div>;
}

🚩Должно ли состояние сохраняться при переходе между страницами?

Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине
Авторизация пользователя
Темная/светлая тема приложения
Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище.

🚩Может ли состояние изменяться в одном месте, а использоваться в другом?

Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии.

const ChatContext = createContext();

function ChatProvider({ children }) {
  const [messages, setMessages] = useState([]);

  const sendMessage = (text) => {
    setMessages([...messages, { text, id: Date.now() }]);
  };

  return (
    <ChatContext.Provider value={{ messages, sendMessage }}>
      {children}
    </ChatContext.Provider>
  );
}

function ChatList() {
  const { messages } = useContext(ChatContext);
  return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
  const { sendMessage } = useContext(ChatContext);
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      onKeyPress={(e) => {
        if (e.key === "Enter") {
          sendMessage(text);
          setText("");
        }
      }}
    />
  );
}

🚩Зависит ли состояние от URL (адресной строки)?

Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path).
ID открытого товара: /products/123
Фильтры товаров: /shop?category=shoes&sort=price
Страница чата с пользователем: /chat?user=ivan

Ставь 👍 и забирай 📚 Базу знаний

🤔 По какому алгоритму сравниваются deps (dependencies) между собой?

React использует поверхностное сравнение ссылок (Object.is). Если хотя бы один элемент в массиве зависимостей изменился по ссылке — эффект будет вызван заново.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как понять что код работает корректно?

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

🚩Проверка требований

Прежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований.
Например: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове add(2, 3) результат будет 5.

🚩Тестирование (Test Cases)

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

function add(a, b) {
    return a + b;
}

Мы можем протестировать её так

console.log(add(2, 3)); // Должно вывести 5
console.log(add(0, 0)); // Должно вывести 0
console.log(add(-1, -1)); // Должно вывести -2

Однако лучше использовать автоматическое тестирование. Например, с помощью Jest

test('add function works correctly', () => {
    expect(add(2, 3)).toBe(5);
    expect(add(0, 0)).toBe(0);
    expect(add(-1, -1)).toBe(-2);
});

🚩Обработка крайних случаев

Иногда код может работать корректно для обычных данных, но давать сбои в "необычных" случаях. Эти ситуации называют крайними случаями.
Пустой ввод (например, add() вместо двух чисел).
Очень большие числа.
Неправильные типы данных (например, строка вместо числа).

   console.log(add()); // undefined или ошибка
   console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы
   

🚩Отладка (Debugging)

Если код не работает как надо, нужно использовать инструменты для отладки
🟠console.log()
Вывод данных для проверки логики.
🟠Инструменты разработчика в браузере
Для работы с JavaScript в реальном времени.
🟠Дебаггер
Позволяет пошагово выполнять код.

🚩Проверка производительности

Иногда корректная работа кода связана не только с правильным результатом, но и с его скоростью. Если код работает слишком медленно, это может быть проблемой. Инструменты, такие как performance.now() в JavaScript, позволяют измерять время выполнения функций.

🚩Code Reviews и тестирование пользователями

После тестов полезно показать код другим разработчикам для проверки (code review) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как работает new?

Ключевое слово new создаёт новый объект, основанный на конструкторе.
1. Создаётся пустой объект, связанный с прототипом конструктора.
2. Вызывается функция-конструктор, передающая объекту свои свойства и методы.
3. Если конструктор не возвращает объект явно, возвращается новый объект.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Когда брать абсолютные величины а когда относительные?

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

🚩Абсолютные величины (например, px, pt, cm, in)

Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.

🚩Когда использовать

1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

🚩Относительные величины (например, %, em, rem, vw, vh)

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

🟠Проценты (`%`)
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

🟠Эм (`em`)
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

🟠Рем (`rem`):
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

🟠Вьюпорт (`vw`, `vh`):
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

🚩Комбинированное использование

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

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как понять, что код написан хорошо?

Хороший код легко читать, он разделён на логические части, переиспользуем, тестируем, расширяем и сопровождаем. Применяются принципы SOLID, DRY, читаемые имена, чистая архитектура.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Для чего в js нужна асинхронность?

JavaScript – однопоточный язык, где код выполняется **последовательно, но иногда мы ждём ответа (запрос в интернет, чтение файла, таймер). Если всё делать синхронно, программа зависнет.

🟠Проблема синхронного кода
Представьте, что мы загружаем данные из API синхронно:

const data = fetch("https://api.example.com/users"); // ❌ Ожидание ответа
console.log("Данные загружены:", data);

🟠Асинхронность решает эту проблему
Асинхронный код не блокирует выполнение программы

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");

🚩Как работает асинхронность в JS?

Callbacks (обратные вызовы) – старый способ.
Promises (fetch(), then/catch) – современный вариант.
async/await – удобный синтаксис для асинхронного кода.
async/await – лучший способ писать асинхронный код

async function getData() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка загрузки:", error);
    }
}

getData();
console.log("Этот код выполняется, пока ждём данные!");

🚩Где нужна асинхронность?

Запросы к серверу
Чтение файлов
Таймеры
Работа с базами данных
Взаимодействие с пользователем (ожидание ввода)

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие есть и как работают циклы в JS?

- for — классический.
- while, do...while — пока условие.
- for...in — по ключам объекта.
- for...of — по значениям массива/итерируемых.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как браузер понимает что картинка является картинкой?

Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее.

🟠MIME-тип (Media Type)
MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например:
- image/png → PNG
- image/jpeg → JPEG
- image/svg+xml → SVG
- image/gif → GIF
- image/webp → WebP

Content-Type: image/png

🟠Расширение файла
Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif).

<img src="picture.jpg" alt="Картинка">

🟠HTML-теги и атрибуты
Когда браузер встречает в коде такие теги, как <img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.

<img src="image.png" alt="Пример картинки">

🟠Формат и сигнатура файла
Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например:
- PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII).
- JPEG — FF D8 FF.
- GIF — 47 49 46 38 (GIF89a).

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как работают computed-свойства?

- При первом обращении вызывается функция — результат сохраняется.
- При изменении зависимостей — помечается как «грязное», и при следующем обращении — пересчитывается.
- Используется для оптимизации, чтобы не вызывать вычисления каждый раз, как у methods.
Важно: computed не вызывает сайд-эффекты, его задача — вычислять значения, а не "что-то делать".

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Расскажи про операторы сравнения

Операторы сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах.

🚩Разница между `==` и `===`

🟠`==` (нестрогое сравнение)
При == JavaScript приводит типы перед сравнением.

console.log(5 == "5");  // true (строка "5" приводится к числу)
console.log(0 == false); // true (false → 0)
console.log(null == undefined); // true (особый случай)

🟠`===` (строгое сравнение)
При === сравниваются и значение, и тип.

console.log(5 === "5"); // false (разные типы)
console.log(0 === false); // false (число !== логический тип)
console.log(null === undefined); // false (разные типы)

🚩🔹 Логические значения в сравнении

JavaScript приводит значения к true или false

console.log(1 == true);  // true (1 → true)
console.log(0 == false); // true (0 → false)
console.log("" == false); // true ("" → false)
console.log([] == false); // true (пустой массив → false)
console.log(null == false); // false (null не приводится к false)

🚩Особые случаи

- null == undefined → true (они считаются "похожими").
- null === undefined → false (разные типы).
- null >= 0 → true (null превращается в 0).
- null > 0 → false (но null >= 0 – true, странно, да?).

console.log(null == undefined); // true
console.log(null >= 0); // true
console.log(null > 0);  // false (WTF?)

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какую проблему решает Redux?

Redux решает проблему глобального управления состоянием в React-приложениях. Он помогает:
- Избежать "prop-drilling" — передачи данных через множество компонентов.
- Централизовать и предсказуемо управлять состоянием.
- Облегчить отладку, благодаря единообразному подходу к изменениям через actions и reducers.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как защитить Cookie от JavaScript?

Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting).

🟠Используем флаг `HttpOnly` (основная защита)
HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS
Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак
SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно)
Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое псевдоклассы?

Псевдоклассы в CSS используются для определения специальных состояний элементов. Например, :hover применяется к элементам, когда пользователь наводит на них курсор, а :first-child выбирает первый дочерний элемент в своем контейнере.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое боксинг?

Это процесс упаковки примитивного типа данных в объект. Это делается, чтобы примитивные типы могли работать как объекты в тех ситуациях, где объекты необходимы, например, в коллекциях (таких как ArrayList или HashMap) или при вызове методов, ожидающих объект в качестве аргумента.

🚩Зачем нужен боксинг?

🟠Единый подход к данным
Примитивы сами по себе не являются объектами. Они имеют меньший размер и работают быстрее, но иногда нужно обернуть их в объект, чтобы пользоваться методами или хранить их в структурах данных, предназначенных для объектов.

🟠Совместимость
Во многих случаях требуется, чтобы данные могли быть использованы в объектно-ориентированных конструкциях, где примитивы недоступны.

🟠Гибкость
Примитивы нельзя присвоить переменной типа Object, а после боксинга это становится возможным.

🚩Как это работает?

Примитивные типы, такие как int, double или boolean, автоматически упаковываются в их соответствующие классы-обертки, такие как Integer, Double и Boolean. Это действие называется автобоксингом.

// Боксинг вручную
int primitiveInt = 42;
Integer boxedInt = Integer.valueOf(primitiveInt); // Боксинг

// Автобоксинг
Integer autoBoxedInt = 42; // Примитив int автоматически упакован в Integer

// Распаковка (unboxing)
int unboxedInt = autoBoxedInt; // Integer автоматически преобразован обратно в int

Коллекции в Java (например, ArrayList) работают только с объектами. Поэтому, если вы хотите сохранить int в коллекции, он автоматически упаковывается в Integer.

import java.util.ArrayList;

public class Example {
    public static void main(String[] args) {
        ArrayList<Integer> numbers = new ArrayList<>();
        numbers.add(10); // Автобоксинг: int превращается в Integer
        numbers.add(20);
        
        int num = numbers.get(0); // Авто-распаковка: Integer превращается в int
        System.out.println(num); // 10
    }
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что известно про вёрстку под разные размеры экранов?

- Используются медиа-запросы (@media).
- Применяется flexbox и grid для адаптивных макетов.
- Используются относительные единицы (%, vh, vw, em) вместо фиксированных.
- Можно применять mobile-first стратегию.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как растянуть элемент на 100%?

Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.

🟠Растяжение элемента на 100% ширины (`width: 100%;`)
Элемент займет всю ширину своего родителя.

<div style="width: 300px; background: lightblue;">
  <div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>

🟠Растяжение элемента на 100% высоты (`height: 100%;`)
Элемент займет всю высоту родительского элемента.

<div style="height: 300px; background: lightblue;">
  <div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>

🟠Растяжение элемента на 100% ширины и высоты
Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

🟠Растяжение относительно окна браузера (`viewport`)
Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

Для исключения полосы прокрутки можно использовать

width: calc(100vw - 16px); /* Учитывается ширина скролла */

🟠Использование `position: absolute`
Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

🟠Растяжение внутри Flexbox-контейнера
Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

🟠Растяжение внутри Grid-контейнера
CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

🟠Растяжение с учетом отступов
Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое шаблоны и строки?

- Шаблоны — это заготовки для HTML или текста с переменными.
- В JS часто реализуются как шаблонные строки: поддерживают интерполяцию через строка ${переменная}.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Почему у нас в css нет селектора на родителе?

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

🚩Как работают селекторы в CSS?

Обычные селекторы идут от родителя к дочерним элементам.

.parent .child {
  color: red;
}

Что было бы с селектором родителя?

.child:has-parent(.parent) { 
  color: red;
}

🚩Использовать `:has()` (в современных браузерах)

В CSS4 появился :has(), который позволяет изменять родителя, если в нём есть определённый потомок.

.parent:has(.child) {
  border: 2px solid red;
}

🚩Использовать Flexbox/Grid вместо селектора родителя

Иногда можно поменять структуру HTML и стилизацию, чтобы избежать проблемы.

.parent {
  display: flex;
  gap: 10px;
}

🚩Использовать JavaScript

Если нужно изменить родителя динамически, можно использовать JavaScript.

document.querySelectorAll(".child").forEach(child => {
  child.parentElement.classList.add("has-child");
});

.has-child {
  border: 2px solid blue;
}

Ставь 👍 и забирай 📚 Базу знаний