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

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

Получи грант до 1,2 млн руб. на обучение в магистратуре Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

🤔 Почему асинхронность — это важно? - Позволяет не блокировать основной поток и обрабатывать другие задачи. - Обеспечивает реактивный UI, особенно при запросах к сети или базе. - Улучшает производительность и отзывчивость. - Это обязательное условие масштабируемости в современном вебе. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое flexbox? Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки. Главные особенности 🟠Гибкое выравнивание элементов в строку или колонку 🟠Равномерное распределение пространства между элементами 🟠Упрощает адаптивную верстку без float и position 🟠Легкое центрирование элементов 🚩Основные термины Flexbox Когда включается display: flex;, элементы внутри него становятся флекс-элементами. Flex-контейнер → родительский элемент (display: flex;) Flex-элементы → дочерние элементы контейнера Главная ось (main axis) → ось, вдоль которой расположены элементы Поперечная ось (cross axis) → перпендикулярная ось

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

🚩Основные свойства Flexbox 🟠`display: flex;` Включает Flexbox для контейнера.

.container {
  display: flex;
}

🟠`flex-direction` – направление оси Определяет, как располагаются элементы (по горизонтали или вертикали).

.container {
  flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
  flex-direction: column; /* В столбик */
  flex-direction: row-reverse; /* Справа налево */
  flex-direction: column-reverse; /* Вниз-вверх */
}

🟠`justify-content` – выравнивание по главной оси

.container {
  justify-content: flex-start; /* По умолчанию, слева направо */
  justify-content: center; /* Центр */
  justify-content: flex-end; /* Справа налево */
  justify-content: space-between; /* Равномерное распределение */
  justify-content: space-around; /* С отступами */
  justify-content: space-evenly; /* Равномерные промежутки */
}

🟠`align-items` – выравнивание по поперечной оси

.container {
  align-items: stretch; /* По умолчанию (растягивает) */
  align-items: center; /* Центр по вертикали */
  align-items: flex-start; /* Вверх */
  align-items: flex-end; /* Вниз */
  align-items: baseline; /* По базовой линии текста */
}

🟠`flex-wrap` – перенос элементов на новую строку

.container {
  flex-wrap: nowrap; /* По умолчанию – все в одной строке */
  flex-wrap: wrap; /* Элементы переносятся */
  flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}

🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`) Работает, когда элементы занимают несколько строк.

.container {
  align-content: flex-start; /* Вверх */
  align-content: flex-end; /* Вниз */
  align-content: center; /* По центру */
  align-content: space-between; /* Равномерное распределение */
  align-content: space-around; /* С отступами */
  align-content: stretch; /* Растянуть (по умолчанию) */
}

🚩Управление отдельными элементами (`flex`-элементы) flex-grow – рост элемента

.item {
  flex-grow: 1; /* Растянется, если есть место */
}

flex-shrink – сжатие элемента

.item {
  flex-shrink: 0; /* Не уменьшаться */
}

flex-basis – начальный размер элемента

.item {
  flex-basis: 200px; /* Фиксированный размер */
}

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

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

🤔 Как сделать стили локальными для компонента? Чтобы стили применялись только внутри одного компонента и не влияли на другие, их можно ограничить локально. Для этого используется специальная настройка, которая говорит системе Vue изолировать эти стили от внешней среды. Это удобно, если ты хочешь, чтобы классы с одинаковыми названиями не конфликтовали между компонентами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Какая есть важная особенность у pipe? Это популярная концепция в программировании, особенно в функциональных языках и библиотеках вроде RxJS (в контексте реактивного программирования). Она используется для последовательного применения функций к данным. 🚩Почему это важно? 🟠Чистота pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода. 🟠Композиция Вместо вложенных вызовов функций (когда результат одной функции передается в другую) pipe упрощает цепочку, делая её линейной. 🟠Читаемость Код становится проще для понимания, особенно если функций много. 🟠Легкость модификации Можно легко добавлять или удалять шаги в цепочке, не меняя структуру кода. 🚩Как работает `pipe`? pipe принимает несколько функций в качестве аргументов и применяет их слева направо к переданным данным. То есть результат одной функции передается как вход в следующую. 🚩Пример реализации простого `pipe`

const pipe = (...functions) => (input) => 
  functions.reduce((acc, fn) => fn(acc), input);

// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;

// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);

console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121

🚩Использование в RxJS В контексте RxJS pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);

// Используем pipe для применения операторов
numbers$
  .pipe(
    filter((num) => num % 2 === 0), // Оставляем только четные
    map((num) => num * 10)          // Умножаем их на 10
  )
  .subscribe((result) => console.log(result)); 
// Вывод: 20, 40

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

Высшее образование онлайн — поменяйте жизнь в 2025 году! ✅Набор в августе: от 6700 ₽/мес.* Московский технологический институт предлагает: — Высшее образование в московском вузе без выезда на сессии — Полностью дистанционный онлайн-формат — Возможность обучаться дома, на работе, в путешествии — Диплом государственного образца — Более 60 направлений на выбор (IT, инженерные, экономические, педагогические, управленческие и другие) — 5 способов оплаты обучения — Поддержка персонального куратора: от поступления до получения диплома Узнать больше #реклама 16+ mti-vuz.ru О рекламодателе

🤔 Какие особенности использования v-model в Vue 2 и 3? Vue 2: - v-model работает только с одним пропом: value. - Событие по умолчанию — input. - Используется для двусторонней привязки в form-элементах и компонентах. - В кастомных компонентах нужно явно прописывать props: ['value'] и эмитить input. Vue 3: - v-model стал более гибким: - Можно задавать имя пропа и события: v-model:foo="bar" → проп foo, событие update:foo. - Можно иметь несколько v-model на компонент. - Поведение более явно выражено, лучше читаемость и масштабируемость. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какими способами мы можем получить картинку с сервера? В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.). <img> – самый простой способ (браузер сам загружает)

<img src="https://example.com/image.jpg" alt="Картинка">

CSS (background-image) – если нужно фоновое изображение

.element {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

🟠`fetch()` – если нужно обработать картинку в JS Можно загрузить изображение как Blob и создать временный URL.

fetch("https://example.com/image.jpg")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById("img").src = url;
  });

XMLHttpRequest – старый метод (устарел, но работает)

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";

xhr.onload = function () {
  const url = URL.createObjectURL(xhr.response);
  document.getElementById("img").src = url;
};

xhr.send();

🟠`<canvas>` – если нужно редактировать изображение Можно загрузить картинку и нарисовать её на <canvas>.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

img.src = "https://example.com/image.jpg";

WebSocket – если изображение передаётся в реальном времени

const socket = new WebSocket("wss://example.com/socket");

socket.onmessage = function (event) {
  const url = URL.createObjectURL(event.data);
  document.getElementById("img").src = url;
};

data URL (Base64) – если нужно хранить изображение в тексте

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

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

Дима Билан на Yandex Ecom Open Air 8 августа Море инсайтов для бизнеса, музыкальный open-air, лекции и нетворкинг. Участие бесплатно! Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе

⚡ Официальный релиз easyoffer 2.0 состоится уже в течение нескольких дней. Напоминаю, что в честь релиза запускаем акцию. Первые 500 покупателей получат: 🚀 Скидку 50% на PRO тариф на 1 год 🎁 Подарок ценностью 5000₽ для тех, кто подписан на этот канал 🔔 Подпишитесь на этот канал: https://t.me/+b2fZN17A9OQ3ZmJi В нем мы опубликуем сообщение о релизе в первую очередь

🤔 Что такое margin collapse и для чего? Margin collapse — это схлопывание внешних отступов между вертикально соседствующими элементами. Если один элемент имеет margin-bottom, а следующий — margin-top, будет применён наибольший из них, а не сумма. Это упрощает вертикальные отступы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 В чем различие методов call apply bind? Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении. 🚩Сall Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

🚩Apply Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

🚩Bind Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

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

🤔 Как растянуть элемент на 100%? - Через CSS: width: 100%; - Убедиться, что родительский элемент имеет ширину (не auto, не inline). - Иногда нужно указать display: block или flex-grow: 1 в флекс-контейнере. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чего стоит и не стоит избегать в оптимизации сайта? 🟠Оптимизация изображений Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя. 🟠Минификация и объединение файлов Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один. 🟠Использование CDN (Content Delivery Network) Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов. 🟠Кэширование На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx. 🟠Асинхронная загрузка и критический CSS Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы. 🟠Улучшение производительности сервера Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов. 🟠Использование современных технологий Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов. 🟠Мониторинг и анализ Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic. 🚩Чего стоит избегать при оптимизации сайта 🟠Избегайте чрезмерной минимизации Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку. 🟠Не используйте большие, несжатые изображения Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем. 🟠Не загружайте все ресурсы сразу Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки. 🟠Не пренебрегайте кэшированием Отсутствие кэширования: Увеличивает время загрузки для повторных посещений. 🟠Избегайте блокирующих ресурсов JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами. 🟠Не злоупотребляйте анимациями и большими скриптами Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах. 🟠Избегайте чрезмерного использования плагинов Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью. 🟠Не забывайте про оптимизацию для мобильных устройств Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства. Ставь 👍 и забирай 📚 Базу знаний

На каждый день и для офиса: новая коллекция MAAG В центре внимания — деним, натуральная кожа и продуманный крой. Обновите гардероб к осени вещами, которые будут актуальными сезон за сезоном. Рассмотреть новинки можно в ближайшем магазине MAAG и на официальном сайте maag-fashion.com. Приятных покупок!❤️ Купить #реклама maag-fashion.com О рекламодателе

🤔 Сходство и отличия Observable от Promise? Сходства: - Оба асинхронные; - Позволяют работать с отложенными значениями. Отличия: - Promise — одноразовый, сразу запускается; - Observable — ленивый, запускается при подписке, может вернуть несколько значений и быть отменён. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое meta теги? Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. 🚩Зачем нужны meta-теги? Улучшают SEO (поисковую оптимизацию) Управляют отображением в соцсетях и поисковиках Настраивают адаптивность страницы (например, на мобильных устройствах) Определяют кодировку, язык и авторство страницы 🚩Основные meta-теги с примерами Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Социальные сети (Open Graph, Twitter Cards) Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

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