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

🤔 Что такое функциональное программирование? Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов. 🚩Основные принципы функционального программирования 🟠Чистые функции (Pure Functions) Функция называется чистой, если: При одинаковых входных данных всегда возвращает одинаковый результат. Не изменяет внешние переменные (нет побочных эффектов). Нечистая функция (изменяет внешнюю переменную)

let count = 0;
function increment() {
    count += 1; // изменяет внешнюю переменную
    return count;
}

Чистая функция (зависит только от аргументов)

function increment(num) {
    return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)

🟠Иммутабельность (Immutable Data) Данные не изменяются, а создаются новые версии объектов. Изменение объекта (нефункциональный подход)

const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объект

Создание нового объекта (функциональный подход)

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект

🟠Функции высшего порядка (Higher-Order Functions) Функция, которая принимает другую функцию в аргумент или возвращает функцию.

const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]

Пример: Функция, возвращающая другую функцию

const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10

🟠Функциональные методы массивов (map, filter, reduce) Функциональные методы позволяют не мутировать массив, а создавать новый. Используем map() для изменения элементов

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

Используем filter() для фильтрации

const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]

Используем reduce() для вычислений

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

🟠Каррирование (Currying) Разделение функции на несколько функций, каждая принимает по одному аргументу.

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

Пример: Каррированная функция

const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5

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

Бесплатный курс по дизайну: веб, графический и UX/UI Научись создавать дизайн сайтов и приложений, инфографику для карточек на маркетплейсах и работать в Figma! Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰 Этот курс для тебя, если ты: ✅ мечтаешь о новой профессии в digital, но не знаешь, с чего начать; ✅ чувствуешь, что хочешь большего — свободы, самореализации, творчества; ✅ полный новичок и хочешь систему, а не хаос; ✅ хочешь начать зарабатывать удалённо. Зарегистрироваться #реклама 16+ ydaev.ru О рекламодателе

🤔 Как наследуемся от классов? В JavaScript и TypeScript для наследования используется ключевое слово extends. Класс-потомок наследует все свойства и методы родителя. Если в дочернем классе нужно вызвать метод родителя, используется super. Такой подход позволяет расширять поведение классов без дублирования кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Черная пятница на easyoffer Скидка 70% на PRO до 29 ноября. 👉 https://easyoffer.ru/

🤔 Что такое элемент datalist в html 5? <datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение. 🚩Как работает `<datalist>`? Пример: автодополнение города

<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">

<datalist id="cities">
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
  <option value="Новосибирск">
</datalist>

🚩Можно ли использовать с `type="number"`? Нет, <datalist> не работает с type="number". Но с type="text" и type="email" — работает отлично.

<input type="number" list="numbers">
<datalist id="numbers">
  <option value="10">
  <option value="20">
</datalist>

Рабочий вариант

<input type="text" list="numbers">

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

Старт продаж квартир в Ялте с видом на гору Ай-Петри ✨Хотите инвестировать в недвижимость Крыма с умом? Для вас есть прекрасная новость: Только 10 квартир на старте продаж в Ялте по ставке всего 4.5% на весь срок! Проводим консультацию по приобретению с помощью ипотеки! 👌Преимущества жилого комплекса: -Номинант премии Urban 2025 -Малоэтажный комплекс с приватной территорией -Виды на гору Ай-Петри и морскую акваторию -5 минут до моря -Рядом Воронцовский дворец -Отделка white-box с просторными лоджиями -Все дома уже сданы Рядом Севастопольское шоссе и удобный проезд к Южнобережному шоссе 💰Доход на сдаче квартиры от 2 млн. рублей в год - надёжная и солидная инвестиция! 👍Получите актуальные планировки и цены + инвестиционную консультацию! Получить предложение #реклама mrqz.me О рекламодателе

🤔 Что такое хук? Хук — это функция в React, которая позволяет использовать состояние и другие возможности React в функциональных компонентах (например, useState, useEffect). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие типы данных существуют? Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты. 🚩Примитивные типы: 🟠Number представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14. 🟠String представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!". 🟠Boolean имеет два значения, true и false, и используется для работы с логическими операциями. 🟠Undefined переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения. 🟠Null специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript. 🟠Symbol уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах. 🟠BigInt тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number. 🚩Объекты могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как сделаем график изменения цены? - Храним историю в БД (timestamp + price). - Отдаём через API диапазон. - Рендерим через Chart.js, Highcharts, ECharts, Plotly. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 К какой категории относятся промисы? Промисы (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));

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

🤔 Какая разница между <script>, <script async>, <script defer>? - <script> — блокирует парсинг HTML, загружает и выполняет скрипт сразу. - <script async> — загружает скрипт параллельно и выполняет как только загрузится (не гарантирует порядок). - <script defer> — загружает параллельно, но выполняет после загрузки HTML, в порядке следования. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован. 🚩Зачем уничтожать Web Worker? Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется. 🚩Как использовать `terminate()`? Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

🚩Важно помнить 1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения. 2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются. 3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker? Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое adaptive и responsive web-страницы? - Responsive (отзывчивый) дизайн — подстраивается под любое устройство с помощью гибкой сетки, процентов, vw/vh, media-запросов. - Adaptive (адаптивный) — использует фиксированные "точки останова", под каждое разрешение загружается заранее подготовленная верстка. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как проверить правильную иерархию html заголовков? Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы. 🚩Зачем нужна правильная иерархия заголовков? 🟠Логическая структура Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги. 🟠Доступность Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице. 🟠SEO Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы. 🚩Что значит "правильная иерархия заголовков"? 🟠`<h1>` Заголовок страницы (должен быть уникальным и только один на странице). 🟠`<h2>` Подразделы <h1>. 🟠`<h3>` Подразделы <h2>, и так далее.

<h1>Главный заголовок страницы</h1>
  <h2>Раздел 1</h2>
    <h3>Подраздел 1.1</h3>
    <h3>Подраздел 1.2</h3>
  <h2>Раздел 2</h2>
    <h3>Подраздел 2.1</h3>
      <h4>Подраздел 2.1.1</h4>

🚩Как проверить иерархию заголовков? 🟠Ручная проверка HTML-кода Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, <h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>). 🟠Использование браузерных DevTools В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность. 🟠Инструменты для проверки доступности Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков. 🟠Скрипт для автоматической проверки Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.

const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
  console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});

🟠Плагин для анализа заголовков Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO. 🚩Примеры ошибок в структуре и как их исправить Ошибка: Пропуск уровней заголовков

<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->

Исправление

<h1>Главный заголовок</h1>
  <h2>Подраздел</h2>

Ошибка: Несколько <h1> на одной странице

<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>

Исправление

<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>

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

🤔 Как выбрать правильные библиотеки для подключения к проекту? Ориентируйся на: - актуальность и поддержку; - количество скачиваний и звёзд (на GitHub, npm); - документацию и сообщество; - совместимость с текущим стеком; - размер и влияние на bundle. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое макро и микро задачи? Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают. 🚩Микро-задачи (Microtasks) Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу. then, catch, finally queueMicrotask() 🚩Макро-задачи (Macrotasks) Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче. setTimeout setInterval setImmediate (Node.js) I/O операции Интерактивные действия, такие как клики мыши и нажатия клавиш 🚩Различия и порядок выполнения Основное различие между макро- и микро-задачами заключается в их приоритете выполнения: После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами. Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются.

setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));

setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));

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

Рекомендуйте МТС Линк и зарабатывайте от 10% со сделок Как ИТ-интеграторам, диджитал-агентствам и экспертам зарабатывать больше без активных продаж и разработки собственного продукта? Рекомендуйте сервисы МТС Линк коллегам, партнёрам, клиентам и подписчикам. Получайте от 10% с каждого чека. От вас - только рекомендация. Мы сами свяжемся с клиентом, проведем демо, заключим договор и переведем вам комиссию Присоединиться легко: -вознаграждение за покупку любого из семи сервисов МТС Линк -достаточно 1 участника -только для ИП и юридических лиц Вы получаете: -комиссию от 10% с каждого нового клиента -менеджер, который поможет на старте и доведёт до первой продажи -готовые лендинги и маркет-материалы -статистика переходов и выплат Присоединяйтесь к реферальной программе МТС Линк по ссылке и увеличивайте заработок Подать заявку #реклама mts-link.ru О рекламодателе

🤔 Как бы эмулировал поведение position: sticky? С помощью JavaScript, отслеживая скролл (scroll), и вручную добавляя/удаляя классы position: fixed и top в зависимости от позиции элемента в viewport. Это нужно, если браузер не поддерживает sticky или требуется кросс-браузерная совместимость. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем em отличается от rem? 🟠Как работает `em`? em зависит от размера шрифта родителя (font-size).

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}

🟠Как работает `rem`? rem всегда зависит от font-size у <html>.

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

🟠Когда использовать `em`, а когда `rem`? Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте em, если хотите, чтобы элементы зависели от родителя Ставь 👍 и забирай 📚 Базу знаний

🤔 Зачем переписывать легаси на новые технологии? - Легаси-технологии могут: - не поддерживаться; - быть уязвимыми; - тормозить развитие и найм. - Новые технологии: - упрощают поддержку; - ускоряют разработку; - позволяют внедрять CI/CD, тестирование, масштабирование. Важно: не переписывать ради переписывания, а по конкретной цели и этапам Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний