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

🤔 Какая особенность state в React? Состояние (state) в React имеет ряд особенностей: - Асинхронность — обновления могут группироваться и не происходят мгновенно. - Иммутабельность — state нельзя изменять напрямую. - Перерендер компонента — каждое изменение state вызывает повторный рендер. - Локальность — state живёт внутри компонента, пока не вынесен выше (лифтинг) или не обобщён (через Context или Redux). Эти особенности делают state мощным механизмом управления UI, но требуют аккуратного подхода при обновлениях. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как происходит tostring? Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. 🟠toString() у примитивов Числа, строки, булевы значения, null, undefined Для примитивных типов toString() работает просто — возвращает строковое представление значения:

console.log((123).toString());     // "123"
console.log(true.toString());      // "true"
console.log(false.toString());     // "false"
console.log((3.14).toString());    // "3.14"

Но null и undefined не имеют метода toString() и вызов приведёт к ошибке

console.log(null.toString());   // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка

Поэтому для них лучше использовать String()

console.log(String(null));       // "null"
console.log(String(undefined));  // "undefined"

🟠toString() у массивов Для массивов toString() преобразует их в строку, разделяя элементы запятой

console.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)

🟠`toString()` у объектов По умолчанию метод toString() у объекта возвращает строку вида [object Object]

const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"

Если нужно другое поведение, можно переопределить toString() в объекте

const user = {
  name: "Иван",
  age: 30,
  toString() {
    return `Имя: ${this.name}, Возраст: ${this.age}`;
  }
};

console.log(user.toString()); // "Имя: Иван, Возраст: 30"

🟠`toString()` у классов Можно переопределять метод toString() в классах

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  toString() {
    return `${this.name} (${this.age} лет)`;
  }
}

const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"

🟠`toString()` у функций Функции тоже имеют метод toString(), но он возвращает их исходный код

function hello() {
  return "Привет!";
}

console.log(hello.toString());
// "function hello() { return 'Привет!'; }"

Для стрелочных функций

const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"

🟠Использование `String()` вместо `.toString()` Лучше использовать String(значение), потому что toString() не работает на null и undefined

console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42));        // "42"
console.log(String({ a: 1 }));  // "[object Object]"

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

🤔 В каких случаях на проект стоит брать TypeScript? - При средних и крупных проектах. - Когда работает несколько разработчиков. - В случае модульной архитектуры и повторного использования кода. - При потребности в автоматической проверке типов, IDE-подсказках, снижении багов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про отдельные домены для статики Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей: CSS, JavaScript Изображения, видео Шрифты, иконки Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN. 🚩Зачем использовать отдельные домены для статики? 🟠Разгрузка основного сервера Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее 🟠Ускорение загрузки сайта Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно. 🟠Кэширование и CDN Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру 🟠Уменьшение размера cookie Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (static.example.com), это снижает трафик 🚩Как настроить отдельный домен для статики? 🟠Создать поддомен для статики Обычно статику размещают на поддомене: static.example.com cdn.example.com assets.example.com 🟠Настроить веб-сервер или CDN Если используем NGINX:

  server {
    server_name static.example.com;
    root /var/www/static;
  }

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

Реклама для бизнеса любого уровня в Яндекс Директе Создайте эффективную рекламную кампанию с алгоритмами Яндекс Директа 👌 Начните прямо сейчас ⚡ Зарегистрироваться #реклама direct.yandex.ru О рекламодателе

🤔 Какие проблемы решает event loop? Event loop обеспечивает неблокирующее выполнение кода. Он позволяет обрабатывать асинхронные события (таймеры, события DOM, сетевые запросы) без блокировки основного потока, организуя очереди микротасков и макротасков и обрабатывая их поэтапно. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 В чем отличие атрибутов от свойств в html тегах? Атрибуты — это то, что записано в HTML. Свойства — это то, что появляется в JavaScript-объекте element. Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают! 🟠Атрибуты (`attributes`) Хранятся в HTML. Всегда являются строками. Их можно получить с помощью .getAttribute() и изменить через .setAttribute(). Они не меняются динамически при изменении свойства элемента в JS.

<input id="myInput" type="text" value="Hello">

const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"

🟠Свойства (`properties`) Хранятся в объекте элемента (HTMLElement). Имеют разные типы данных (строки, числа, булевые и т. д.). Меняются динамически при взаимодействии с DOM.

console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)

Пример с checked у чекбокса

<input type="checkbox" id="myCheckbox" checked>

const checkbox = document.getElementById("myCheckbox");

console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)

checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)

🟠Как правильно работать с атрибутами и свойствами? Если хотите работать с DOM → используйте свойства (element.value, element.checked и т. д.). Если хотите работать с атрибутами в HTML → используйте .getAttribute() и .setAttribute().

const img = document.querySelector("img");

// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");

// Меняем свойство width
img.width = 300;

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

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

🤔 Что происходит, когда мы запрашиваем веб-страницу? 1. Ввод URL → преобразование через DNS в IP. 2. Устанавливается соединение с сервером. 3. Отправляется HTTP-запрос. 4. Сервер обрабатывает запрос и возвращает HTML. 5. Браузер начинает разбор, построение DOM, загрузку ресурсов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое git-flow? Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы. 🚩Основные ветки 🟠master Содержит стабильную версию кода, готовую к выпуску (release). 🟠develop Основная ветка для разработки, содержит последние изменения кода для следующего выпуска. 🚩Вспомогательные ветки 🟠feature Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop. 🟠release Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop. 🟠hotfix Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как следишь за код-стайлом? - Использую линтеры: ESLint, Prettier; - Соблюдаю командные code style гайды; - Использую автоматические форматтеры в IDE; - Настраиваю pre-commit хуки (через Husky, lint-staged). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое inline стили, и какой они имеют приоритет? Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.

<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>

🚩Приоритетность inline стилей Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут style, то они будут применены. 🚩Порядок приоритетов CSS Inline стили (наивысший приоритет) ID селекторы Классы, псевдоклассы и атрибуты Элементы и псевдоэлементы (наименьший приоритет) Стоит отметить, что существует способ переопределить даже их с помощью правила !important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей. Ставь 👍 и забирай 📚 Базу знаний

Нейросеть проверит 100% закупок на стройке за минуты! 👍Контроль закупок за 15 минут в день. Нейросеть "Тринити" экономит ваше время и миллионы рублей Вы - генеральный директор строительной компании, и у вас катастрофически не хватает времени? Работаете 12+ часов в день и не можете контролировать каждую закупку? 💰Тратите миллионы на закупки, но не уверены, что получаете лучшие цены и качество? Хотите спать спокойно, зная, что ваши деньги под защитой? Просто загрузите счет или тендерный протокол в Telegram-бот Получите детальный анализ по 18 параметрам за 1 минуту Экономьте до 10% на каждой закупке без дополнительных усилий В 3-5 раз дешевле, чем содержать штат контролеров! Работает 24/7 без выходных и отпусков. 👌Узнайте про наш телеграм-бот и тестируйте бесплатно 7 дней! Экономия в первый же день. Перейти на сайт #реклама 16+ trinitysafe.ru О рекламодателе

🤔 Что значит type="submit"? Атрибут type="submit" у тега <button> или <input> указывает, что элемент при нажатии должен отправить форму. Он запускает действие, определенное в action формы, и передаёт данные, собранные с полей. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 В чём преимущество синтаксического сахара в виде async await над promise? Оба способа позволяют работать с асинхронным кодом в JavaScript, но async/await делает код чище, проще и удобнее. 🟠`async/await` проще читать и писать Код на Promise.then() часто становится вложенным и запутанным

fetch("https://api.example.com/user")
  .then(response => response.json())
  .then(user => {
    return fetch(`https://api.example.com/orders/${user.id}`);
  })
  .then(response => response.json())
  .then(orders => {
    console.log("Заказы:", orders);
  })
  .catch(error => console.error("Ошибка:", error));

Решение: async/await

async function getUserOrders() {
    try {
        const response = await fetch("https://api.example.com/user");
        const user = await response.json();

        const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
        const orders = await ordersResponse.json();

        console.log("Заказы:", orders);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getUserOrders();

async/await лучше обрабатывает ошибки

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    throw new Error("Ошибка в обработке данных");
  })
  .catch(error => console.error("Ошибка:", error));

async/await + try/catch – мощная обработка ошибок

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Ошибка HTTP " + response.status);
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}
fetchData();

async/await удобен в for и try/catch

const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));
});

async/await в for of

async function fetchAll(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }
}
fetchAll(["url1", "url2", "url3"]);

async/await работает с try/finally

async function fetchData() {
    try {
        console.log("Запрос данных...");
        const response = await fetch("https://api.example.com");
        const data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка:", error);
    } finally {
        console.log("Закрываем соединение...");
    }
}
fetchData();

async/await можно использовать внутри Promise.all() Иногда Promise.all() быстрее, потому что запускает промисы параллельно.

async function fetchMultiple() {
    const [user, orders] = await Promise.all([
        fetch("https://api.example.com/user").then(res => res.json()),
        fetch("https://api.example.com/orders").then(res => res.json())
    ]);

    console.log(user, orders);
}
fetchMultiple();

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

Чат-боты под ключ за 3 дня 💻Проектируем сценарии под любые задачи в WhatsApp, Telegram, VK и MAX. ✅С ИИ и интерактивными кнопками. ⚡Опишите идею, мы оценим проект за 1 день и реализуем его под ключ. 👌От ТЗ до запуска. Подать заявку #реклама chat2desk.com О рекламодателе

🤔 Что такое flex-flow сокращение? Свойство flex-flow — это шорткат для двух свойств: flex-direction и flex-wrap. Упрощает запись. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое нотация о-большое? O-большое (Big O) — это способ описания эффективности алгоритма в зависимости от размера входных данных. Она показывает, как быстро растёт время выполнения или использование памяти при увеличении количества входных данных. 🚩Зачем нужна O-большое? Когда мы пишем код, важно понимать, насколько он эффективен, особенно при работе с большими массивами или сложными вычислениями. Big O помогает: - Оценить время работы алгоритма. - Понять, как алгоритм масштабируется. - Сравнить разные алгоритмы и выбрать лучший. 🚩Примеры сложности алгоритмов O(1) – Константное время

function getFirstElement(arr) {
  return arr[0]; // Не зависит от размера массива
}

O(N) – Линейное время

function findElement(arr, target) {
  for (let i = 0; i < arr.length; i++) { 
    if (arr[i] === target) return i;
  }
  return -1;
}

O(N²) – Квадратичное время (плохо)

function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[i] > arr[j]) {
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
    }
  }
  return arr;
}

O(log N) – Логарифмическое время (оптимально)

function binarySearch(arr, target) {
  let left = 0, right = arr.length - 1;
  
  while (left <= right) {
    let mid = Math.floor((left + right) / 2);
    
    if (arr[mid] === target) return mid;
    if (arr[mid] < target) left = mid + 1;
    else right = mid - 1;
  }

  return -1;
}

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

🤔 Чем отличаются между собой Shadow DOM, Virtual DOM и Regular DOM? - Shadow DOM — изолированный мини-DOM внутри компонента; - Virtual DOM — абстрактная копия DOM в памяти (используется React, Vue); - Regular DOM — основной объект модели документа браузера. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как достигается изоляция при использовании бэм? БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым. 🚩Как БЭМ предотвращает конфликты? 🟠Все стили зависят только от конкретного блока В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.

<div class="button">Кнопка</div>

.button {
  background: blue;
  color: white;
}

Плохой пример без БЭМ

.container .button {
  background: blue;
}

🟠Элементы (`__`) зависят только от своего блока Стили элемента никогда не зависят от родителя — только от блока.

<div class="card">
  <h2 class="card__title">Заголовок</h2>
  <p class="card__text">Текст карточки</p>
</div>

.card__title {
  font-size: 20px;
}

.card__text {
  color: gray;
}

🟠Модификаторы (`--`) изменяют только нужные стили Модификаторы позволяют изменять внешний вид без переписывания базовых стилей.

<button class="button button--red">Кнопка</button>
<button class="button button--blue">Кнопка</button>

.button {
  padding: 10px;
  border-radius: 5px;
}

.button--red {
  background: red;
}

.button--blue {
  background: blue;
}

🟠Имена классов уникальны, нет глобальных стилей В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей.

h1 {
  color: red;
}

БЭМ-версия

.card__title {
  color: red;
}

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