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

Авито Путешествия: скидка 10% на жилье для отпуска Бронируйте уютные квартиры и дома через Авито Путешествия. 🏠 Отдыхайте с комфортом! 💰 Авито Путешествия предлагает скидку 10% на посуточную аренду. ⚡ Промокод действует до 31.08 — бронируйте сейчас и экономьте! Получите скидку 10% по промокоду ZABUKAL! Забронировать #реклама 12+ avito.ru О рекламодателе

🤔 Зачем нужен eslint? ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода. 🚩Почему ESLint полезен? Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить. 🚩Проблемы без ESLint Разные стили написания кода Пропущенные точки с запятой или лишние пробелы Неиспользуемые переменные Ошибки, которые не выявляются во время компиляции (например, undefined переменные) 🚩Решение с ESLint: Автоматически находит ошибки и предупреждения Подсказывает лучшие практики Поддерживает кастомные правила Работает в IDE и CI/CD (автоматическая проверка) 🟠Как ESLint работает? ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

🟠Как установить и настроить ESLint? Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

🟠ESLint в IDE (VS Code, WebStorm) Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave"

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

🟠ESLint в CI/CD (автоматическая проверка на сервере) В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку.

"scripts": {
  "lint": "eslint src --fix"
}

Теперь перед коммитом можно запускать:

npm run lint

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

Скидки до 25% на технику для сада Преобразите свой участок с нашей техникой! Купить #реклама market.yandex.ru О рекламодателе

Ура, друзья! Изиоффер переходит в публичное бета-тестирование! 🎉 Что нового: 🟢Анализ IT собеседований на основе 4500+ реальных интервью 🟢Вопросы из собеседований с вероятностью встречи 🟢Видео-примеры ответов на вопросы от Senior, Middle, Junior грейдов 🟢Пример лучшего ответа 🟢Задачи из собеседований 🟢Тестовые задания 🟢Примеры собеседований 🟢Фильтрация всего контента по грейдам, компаниям 🟢Тренажер подготовки к собеседованию на основе интервальных повторений и флеш карточек 🟡Тренажер "Реальное собеседование" с сценарием вопросов из реальных собеседований (скоро) 🟢Автоотклики на HeadHunter 🟢Закрытое сообщество easyoffer 💎 Акция в честь открытия для первых 500 покупателей: 🚀 Скидка 50% на PRO тариф на 1 год (15000₽ → 7500₽) 🔥 Акция уже стартовала! 👉 https://easyoffer.ru/pro

🤔 Какой метод мы вызываем в контроллере? В контроллере вызывается метод, соответствующий действию: - generateCsvReport - generateHtmlReport - generatePdfReport Метод отвечает за получение данных, их обработку и передачу в модуль, формирующий нужный формат отчёта. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое делегирование? Делегирование событий (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);

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

В Битрикс24 теперь можно сделать сайт за 30 секунд Серьёзно. Пишешь, что нужно, и AI сам всё собирает: тексты, картинки, оформление. ✨Никакой магии, просто умный помощник. Попробуйте — закайфуете от скорости! Попробовать #реклама 16+ sites-24.bitrix24.ru О рекламодателе

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

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

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

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

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

🤔 Что такое DOM дерево - DOM (Document Object Model) — это программный интерфейс для HTML-документов, представляющий структуру страницы в виде дерева узлов. - DOM позволяет программам читать и изменять документ структурно, стилистически и содержательно, реагируя на пользовательские взаимодействия. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое функциональное программирование? Функциональное программирование (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 О рекламодателе