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

🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура). - Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне. 🚩Почему DI полезен? 🟠Уменьшает связность кода (Loose Coupling) Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.

class UserService {
  constructor() {
    this.db = new Database(); // Прямо создаем зависимость
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

С DI (гибкость)

class UserService {
  constructor(db) {
    this.db = db; // DI передает зависимость извне
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);

🟠Улучшает тестируемость (Unit-тесты проще) С DI можно подменять зависимости на заглушки (mock, fake, stub).

const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔

С DI (можно подменить зависимость)

class FakeDatabase {
  findUserById(id) {
    return { id, name: "Тестовый пользователь" };
  }
}

const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);

console.log(userService.getUser(1)); // ✅ Тест без реальной БД

🟠Улучшает расширяемость (легко менять зависимости) Допустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase.

class UserService {
  constructor() {
    this.db = new MySQLDatabase(); // Нужно менять здесь
  }
}

С DI (добавляем новую зависимость без изменения кода UserService)

const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);

🟠Упрощает управление зависимостями (через DI-контейнеры) В крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript).

import "reflect-metadata";
import { Container, injectable, inject } from "inversify";

@injectable()
class Database {
  findUserById(id) {
    return { id, name: "База данных" };
  }
}

@injectable()
class UserService {
  constructor(@inject(Database) db) {
    this.db = db;
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();

// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));

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

Нужны 12 человек для работы с искусственным интеллектом Требования: 18-45 лет Работа из дома. График свободный. Пришло задание — изучили — выполнили — получили свои деньги. Деньги вы получаете в зависимости от сложности задания. Например: За задание могут платить 500-10.000 рублей. 500 рублей — это около 5-30 минут. 10 000 руб. это 5-6 часов. Работа может быть разной: Оживить фото, создать видео, реставрировать старое фото и т.д. 💰 В среднем новичок получает до 150.000 руб в месяц. А опытный может и 300-500т. Мы обучим вас сами: ✅ 3 дня уроков по 30 минут ✅ Домашки с проверкой и оплатой бонусами ✅ Платим 10 тыс за каждую выполненную домашку ⚡ Набор заканчивается завтра. Для регистрации жмите кнопку "Зарегистрироваться": Зарегистрироваться #реклама 16+ neuromachina.ru О рекламодателе

🤔 Какие методы общения имеются в протоколе HTTP? - GET — получение данных; - POST — отправка/создание; - PUT — обновление; - PATCH — частичное обновление; - DELETE — удаление; - OPTIONS, HEAD, CONNECT, TRACE — вспомогательные методы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). Основные значения float

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

🟠Почему родитель "схлопывается" при `float`? Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

🟠Как остановить обтекание (`clear`)? Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

🚩Почему `float` устарел и что использовать вместо него? Раньше float использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (display: flex;) – лучше для адаптивных макетов. CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

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

🤔 Как защитить cookie от JS? При установке cookie нужно использовать флаг HttpOnly, чтобы JavaScript не имел к ним доступа. Также полезны флаги Secure (только по HTTPS) и SameSite (ограничение кросс-доступа). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как оптимизировать страницы для печати? Если пользователи захотят распечатать вашу веб-страницу, важно, чтобы она выглядела чисто и профессионально. Для этого используется CSS-медиа-правило @media print, которое позволяет задать специальные стили для печати. 🟠Использование `@media print` Вы можете задать стили, которые будут применяться только при печати

@media print {
  body {
    font-size: 12pt; /* Оптимальный размер шрифта */
    color: black; /* Убираем цветной текст для экономии чернил */
    background: none !important; /* Убираем фон */
  }
}

🟠Убираем ненужные элементы (меню, рекламу, анимации) Некоторые элементы (например, навигация, футер, кнопки) не нужны при печати, их можно скрыть

@media print {
  nav, .sidebar, .ads, .button {
    display: none; /* Скрываем ненужное */
  }
}

🟠Изменяем ширину страницы и текст Обычно страницы шире, чем лист бумаги. Можно задать max-width для удобства

@media print {
  body {
    width: 100%; 
    max-width: 800px; /* Уменьшаем ширину */
    margin: auto; /* Центрируем */
  }
}

Заменяем цвета на чёрно-белые (экономия чернил)

@media print {
  a {
    color: black !important; /* Делаем ссылки чёрными */
    text-decoration: underline; /* Добавляем подчёркивание */
  }
}

🟠Добавляем URL ссылок в текст При печати гиперссылки не работают, поэтому можно показать их адрес

@media print {
  a::after {
    content: " (" attr(href) ")"; /* Добавляем URL рядом со ссылкой */
    font-size: 10pt;
    color: gray;
  }
}

Избегаем разрывов страниц в неудобных местах

@media print {
  h1, h2, h3 {
    page-break-after: avoid; /* Не разрываем страницу после заголовка */
  }
  p {
    page-break-inside: avoid; /* Не разрываем абзац на две страницы */
  }
}

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

Нужны 7 желающих для работы с искусственным интеллектом. Требования: 18-45 лет Работа из дома. График свободный. Пришло задание — изучили — выполнили — получили свои деньги. Деньги вы получаете в зависимости от сложности задания. Например: За задание могут платить 500-10.000 рублей. 500 рублей — это около 5-30 минут. 10 000 руб. это 5-6 часов. Работа может быть разной: Оживить фото, создать видео, реставрировать старое фото и т.д. 💰 В среднем новичок получает до 150.000 руб в месяц. А опытный может и 300-500т. Мы обучим вас сами: — 3 дня уроков по 30 минут — Домашки с проверкой и оплатой бонусами — Платим 10 тыс за каждую выполненную домашку ⚡ Набор заканчивается завтра. Для регистрации жмите кнопку "Зарегистрироваться": Зарегистрироваться #реклама 16+ ganstaagency.com О рекламодателе

🤔 Какие плюсы и минусы работы с MobX? Плюсы: - Меньше шаблонного кода — изменения происходят «автоматически» благодаря реактивности. - Простота обучения, ближе к привычному JS-подходу. - Более высокая производительность при грамотном применении (@observer). - Подходит для средних и больших проектов без сложного boilerplate. Минусы: - Магия — сложнее отследить, что и где меняется, особенно для новых участников команды. - Может вызывать лишние перерендеры, если неправильно использовать observable. - Меньшая распространённость по сравнению с Redux — меньше обучающих материалов и tooling. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Рекордный обмен в SOKOLOV Пора поменять всё! ⚡ В SOKOLOV рекордный курс обмена золота: 9 000 ₽ за каждый грамм 585 пробы. Успейте превратить ненужное старое в любимое новое и выбрать украшения SOKOLOV со скидкой до 100% Узнать больше #реклама sokolov.ru О рекламодателе

🤔 С помощью чего можно рассчитать идентификатор в js? В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований: 🟠 Генерация UUID UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx. Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

🟠Хеш-функции (SHA, MD5) Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции. SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

🟠Генерация случайного идентификатора Если нужна просто случайная строка, можно использовать Math.random(). Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

🟠Инкрементальные ID Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

🟠Хеширование строки (например, объекта) Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

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

Вы чувствуете? Праздники совсем близко! Не выбирай подарки к 8 Марта 🏃‍♂️ Пока не увидишь это ❤️⚡ 990 ₽: SOKOLOV SURPRISE Те самые коробочки из ТикТока 9 990 ₽: золотое кольцо-сердце Специальная цена на хит праздничного сезона 49 990 ₽: кольцо с бриллиантом 1 карат Мечта в реальной жизни. Количество ограничено — успеют только самые быстрые Заказать #реклама sokolov.ru О рекламодателе

🤔 Какие статусы есть у Promise? - pending — в процессе, ещё не завершён; - fulfilled — успешно завершён (вызван resolve); - rejected — завершён с ошибкой (вызван reject). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое делегирование? Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков. 🚩Как работает делегирование? Обычный способ (без делегирования) Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую

document.querySelectorAll("button").forEach((btn) => {
  btn.addEventListener("click", () => {
    console.log("Кнопка нажата");
  });
});

Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно. Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает. 🟠Делегирование событий (оптимальный способ) Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    console.log("Кнопка нажата:", event.target.textContent);
  }
});

🟠Пример с динамическими элементами Если мы добавляем кнопки динамически, обработчик все равно будет работать

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.classList.contains("btn")) {
    console.log("Нажата кнопка:", event.target.textContent);
  }
});

// Добавляем новую кнопку динамически
setTimeout(() => {
  const newButton = document.createElement("button");
  newButton.classList.add("btn");
  newButton.textContent = "Новая кнопка";
  document.getElementById("container").appendChild(newButton);
}, 2000);

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

Бесплатная конференция по PostgreSQL Регистрируйся на бесплатную конференцию по PostgreSQL — 19.03.2026.📅 Эксперты расскажут о разработке, администрировании и новинках мира Postgres. ✅ Бесплатное участие ✅ Опытные спикеры ✅ 25+ тематических докладов ✅ Рабочие кейсы Каждый участник получает именной Сертификат участника мероприятия. Одни из немногих спикеров конференции: — Андрей Бородин PostgreSQL Major contributor, руководитель подразделения разработки РСУБД с открытым исходным кодом Yandex Cloud — Родион Хабибов DevOps-инженер «СберСервис» — Андрей Овчаренко Руководитель отдела Java-разработки Московской биржи ... и многие другие. Регистрируйся, будет интересно! И бесплатно! Зарегистрироваться #реклама 16+ pgbootcamp.ru О рекламодателе

🤔 В чём отличия HTML5 от HTML4.01 и XHTML1.0? - HTML5 поддерживает больше API и новых тегов; - Он не требует строгой валидации и работает в "универсальном" режиме; - HTML5 заменил множество устаревших элементов; - XHTML1.0 требует строгий синтаксис и подаётся как XML; - HTML4.01 ограничен в функциональности, не поддерживает современные API. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как можно вставить svg в html документ? Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript. 🟠Прямой (inline) SVG-код в HTML Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

🟠Через тег `<img>` Если SVG не нужно изменять, можно вставить его как обычное изображение.

<img src="image.svg" alt="Описание изображения" width="100" height="100">

🟠Через CSS `background-image` SVG можно использовать как фоновое изображение.

<div class="icon"></div>

<style>
  .icon {
    width: 100px;
    height: 100px;
    background-image: url('image.svg');
    background-size: cover;
  }
</style>

🟠Через тег `<object>` Позволяет загружать SVG-файлы и взаимодействовать с ними.

<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

🟠Через тег `<iframe>` SVG можно загружать в iframe.

<iframe src="image.svg" width="100" height="100"></iframe>

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

IT-магистратура ИТМО, МИФИ в партнёрстве с Яндексом Освойте высокооплачиваемую IT-профессию. Актуальные программы ИТМО и МФТИ 2026 года, диплом гособразца, много практики от Яндекса. Гибкий график, обучение полностью онлайн, господдержка оплаты, отсрочка от армии Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

🤔 В чём разница между debugger и console.log? - console.log — выводит данные в консоль, не прерывает выполнение. - debugger — останавливает выполнение кода и открывает DevTools, позволяет пошагово отлаживать. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про области видимости В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы. 🚩Глобальная область видимости Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.

var globalVar = 'Я глобальная переменная';

function testFunction() {
  console.log(globalVar); // Доступно
}

testFunction();
console.log(globalVar); // Доступно

🚩Функциональная область видимости Переменные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.

function testFunction() {
  var functionVar = 'Я внутри функции';
  console.log(functionVar); // Доступно
}

testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна

🚩Блочная область видимости Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.

if (true) {
  let blockVar = 'Я внутри блока';
  console.log(blockVar); // Доступно
}

console.log(blockVar); // Ошибка: переменная blockVar недоступна

🚩Область видимости модуля (Module Scope) При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.

export const myVar = 'Я переменная из модуля';

import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"

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