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

🤔 Что будет, если забиндить два контекста подряд? Если контексты в DI фреймворке (например, в Angular, React или NestJS) перекрывают друг друга, то: - Последний контекст (или более локальный) переопределит предыдущий. - Может возникнуть конфликт зависимостей или непредсказуемое поведение. Важно понимать иерархию инжекторов и область действия каждого контекста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работает settimeout? Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

function: Будет вызвана после задержки. functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности). delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0. arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

🚩Отмена выполнения setTimeout Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

🚩Особенности поведения 🟠Минимальная задержка В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения. 🟠Задержка в неактивных вкладках Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано. 🟠Асинхронность setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания. Ставь 👍 и забирай 📚 Базу знаний

Регистрируйтесь на вебинар SIEM UserGate 💻Расскажет о том, как консалтинг в области информационной безопасности помогает решить проблему кадрового голода и повышает устойчивость бизнес-процессов. 📊На вебинаре будет: - Угрозы и вызовы в области ИБ. Зачем нужен консалтинг? - Виды консалтинговых услуг. Преимущества и наши подходы - Консалтинг - ориентация на бизнес - Практическая безопасность. С чего начать? - Ответы на вопросы 👌Расскажем, как защитить вашу компанию. Регистрируйтесь — будет интересно! Зарегистрироваться #реклама 16+ webinar.usergate.com О рекламодателе

🤔 Для чего существует тег <q>? Тег <q> используется для встроенных (коротких) цитат. Браузер автоматически добавляет кавычки вокруг содержимого. Для длинных цитат используется <blockquote>. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем var отличается от const ? Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🚩Область видимости (Scope) 🟠Var Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. 🟠Const Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🚩Переназначение и изменение 🟠Var Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. 🟠Const Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🚩Поднятие (Hoisting) 🟠Var Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. 🟠Const Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🚩Инициализация 🟠Var Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. 🟠Const Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

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

Купить Solaris HС выгодно в автокредит Специальное предложение! Solaris HС в автокредит. Низкие ставки. ✨Срок от 1 до 8 лет Комфортные условия для покупки стильного, полноприводного кроссовера Solaris HC. Кредит на выгодных условиях только до 30 июня. Узнайте все условия. Узнать цену Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО "Совкомбанк", АО "Альфа-Банк". #реклама solaris.auto О рекламодателе

🤔 Что такое хэш-таблица? Хэш-таблица — это структура данных, которая хранит пары ключ–значение. Ключи обрабатываются через хэш-функцию, что обеспечивает быстрый доступ к значениям — обычно за константное время. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🎉Разыгрываем пожизненный доступ к AI-ассистенту для поиска работы для 3 подписчиков До запуска Софи остается меньше месяца, поэтому мы решили порадовать вас и устроить конкурс, приуроченный к этому событию. Кто такая Софи? Это первый в России ассистент по поиску работы, который будет сам делать отклики, писать сопроводительные письма, поможет с резюме и подготовкой к собесу, а еще избавит тебя от отказов. Мы работали над ней более полугода, и сейчас хотим подарить бесплатный пожизненный доступ для 3 наших подписчиков. Мы посчитали, стоимость одной такой подписки ну хотя бы на 10 лет составляла бы 420.000 руб. Условия конкурса простые: 1. Подписаться на 4 наших канала: Софи и партнёры Young & Junior - вакансии IT Young Стажёр - стажировки ИТ IT мероприятия для стажеров и студентов 2. Нажать кнопку "участвую" под этим постом. 15 июля, в 19:00, мы в прямом эфире проведем запуск Софи, а в 20:00 опубликуем результаты конкурса в канале Софи и Партнёры. Каждый победитель получит бесплатный доступ к Софи навсегда. Всем удачи и до встречи в прямом эфире🚀

Скидки на электрические зубные щетки Oral-B ORAL-B Genius-X с искусственным интеллектом – первая в мире зубная щетка, которая распознает стиль чистки зубов и дает рекомендации по улучшению. Купить #реклама market.yandex.ru О рекламодателе

🤔 Что можешь рассказать об version? version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API. Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими. 🟠Семантическое версионирование (SemVer) Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат

MAJOR.MINOR.PATCH

Пример в package.json (Node.js-проекты):

{
  "name": "my-app",
  "version": "1.2.3"
}

Команда для обновления версии в package.json

npm version major   # 2.0.0
npm version minor   # 1.3.0
npm version patch   # 1.2.4

🟠Версионирование API При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.

https://api.example.com/v1/users
https://api.example.com/v2/users

🟠Версионирование в Git В Git версиями называют теги (tags), привязанные к коммитам.

git tag v1.0.0
git push origin v1.0.0

Чтобы посмотреть все версии

git tag

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

🤔 В чём преимущество синтаксического сахара в виде async/await над Promise? - Легче читать и писать последовательный асинхронный код; - Упрощает обработку ошибок с try/catch; - Позволяет писать код, похожий на синхронный; - Устраняет вложенность .then(). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? Оба подхода используются в веб-разработке для обеспечения доступности и совместимости веб-приложений на разных устройствах и браузерах. 🚩Progressive Enhancement (Прогрессивное улучшение) Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах. 🚩Graceful Degradation (Постепенное упрощение) Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров. Используем CSS Grid, но добавляем @supports для fallback'а на Flexbox Приложение на React, но показываем простой HTML, если JavaScript отключён. Ставь 👍 и забирай 📚 Базу знаний

Материалы для разработчиков, которые помогут получить оффер от 200тыс до 350тыс₽ и успешной пройти испытательный срок. [Гайд] Как упаковать резюме разработчику, чтобы звали на собеседования? [Скрипт] Что говорить на интервью, чтобы каждый второй собес заканчивался оффером 200к+? [Статья] Откровения СТО.. самый короткий путь разработчика к большим деньгам [Разбор] Где искать валютную удаленку? Учимся работать с LinkedIn Канал ведет СТО с 13-ти летним стажем. Поэтому в текстах куча тонкостей, как готовиться и проходить собесы в 2025 году. Подписывайтесь и читайте закреп с бонусами.

🤔 Как работает браузер? Браузер выполняет четыре основные задачи: 1. Запрос к серверу: отправляет HTTP/HTTPS-запрос для получения веб-страницы. 2. Парсинг данных: создаёт DOM из HTML и CSSOM из CSS. 3. Рендеринг: объединяет DOM и CSSOM в Render Tree, выполняет раскладку и отрисовку. 4. JavaScript: интерпретируется для динамических изменений и взаимодействий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 К какой категории относятся промисы? Промисы (Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами). Категория: Асинхронные программные конструкции (Async Objects / Async Patterns) Тип: Объект (Promise Object)* Используются в: Асинхронном программировании (Async/Await, then/catch) 🚩Почему промисы – асинхронная конструкция? Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Данные загружены!"); // Успех
  }, 2000);
});

fetchData.then(data => console.log(data));

🚩Promise – это не просто колбэк До появления Promise в JavaScript использовались колбэки, но они приводили к "callback hell".

function fetchData(callback) {
  setTimeout(() => {
    callback("Данные загружены!");
  }, 2000);
}

fetchData(data => console.log(data));

Решение с Promise

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

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

🤔 Как сделать разные типы отчётов: CSV, HTML, PDF? Для генерации отчётов в разных форматах используют разные подходы: - CSV — формируется из данных в виде строк, разделённых запятыми или точками с запятой, обычно это просто текстовая сериализация табличных данных. - HTML — отчёт можно рендерить через шаблонизаторы или прямо в DOM, если речь про frontend. - PDF — создаётся с помощью библиотек (например, jsPDF, Puppeteer в JS, ReportLab в Python), которые преобразуют HTML или структурированные данные в документ. Приложение может предоставлять пользователю возможность выбора формата, а контроллер — вызывать соответствующий генератор. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое dispatch? В контексте Frontend-разработки, dispatch — это метод, который отправляет (диспатчит) событие или действие. В зависимости от технологии dispatch может использоваться в Redux, EventTarget или React. 🟠`dispatch` в Redux В Redux dispatch(action) используется для отправки (диспатча) действий (actions) в хранилище (store).

import { useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Увеличить
    </button>
  );
};

🟠`dispatchEvent` в JavaScript (EventTarget API) В нативном JavaScript метод dispatchEvent() используется для генерации пользовательских событий на DOM-элементах.

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

// Создаём событие
const event = new Event("myCustomEvent");

// Добавляем слушатель событий
button.addEventListener("myCustomEvent", () => {
  console.log("Событие вызвано!");
});

// Диспатчим событие
button.dispatchEvent(event); // Выведет: "Событие вызвано!"

🟠`dispatch` в React (useReducer) В React-хуке useReducer dispatch используется для изменения состояния компонента.

import { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
};

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

🤔 Что известно про недостатки и модульные системы, используемые в JS и Node.js? - CommonJS (Node.js) — синхронная загрузка, неудобна для браузеров. - ECMAScript Modules (ESM) — асинхронная, современная, но требует поддержки платформы. - Недостатки: разрозненность, несовместимость между системами, затруднения в миграции и тестировании. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про отдельные домены для статики Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей: 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;
  }

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

🤔 Как происходит загрузка страницы? - Запрос отправляется на сервер; - Загружается HTML; - HTML парсится и создаётся DOM; - Загрузка и выполнение CSS, JS и внешних ресурсов; - После загрузки всех блокирующих ресурсов вызывается DOMContentLoaded, затем load. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний