Frontend | Interview questions

🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. 🚩Почему нужен Docker? 🟠Решает проблему "работает у меня, но не у тебя" В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. 🟠Автоматизирует развертывание Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. 🟠Легко масштабировать Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). 🟠Разделяет зависимости Каждое приложение работает в изолированной среде, и конфликты библиотек исключены. 🟠Работает везде (Windows, Mac, Linux, серверы, облако) Контейнер можно запустить где угодно, где установлен Docker. 🚩Как работает Docker? 🟠Создаем `Dockerfile` (инструкция для сборки контейнера) Пример для Node.js-приложения # Базовый образ с Node.js FROM node:18 # Устанавливаем рабочую директорию WORKDIR /app # Копируем файлы проекта COPY package.json ./ RUN npm install COPY . . # Запускаем приложение CMD ["node", "server.js"] Собираем образ Docker (создаем "упакованный" контейнер) docker build -t my-app . Запускаем контейнер docker run -p 3000:3000 my-app Ставь 👍 и забирай 📚 Базу знаний

🤔 Зачем нужен Docker? Docker позволяет упаковать приложение и все его зависимости в контейнер, обеспечивая одинаковую среду для разработки, тестирования и продакшна. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как изменить стили кнопок с атрибутом disabled? C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled. 🚩Пример использования 🟠Селектора [disabled] Этот селектор выбирает все элементы, у которых присутствует атрибут disabled. button[disabled] { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */ opacity: 0.6; /* Уменьшает непрозрачность */ } 🟠Псевдокласса :disabled Этот селектор выбирает все элементы, которые находятся в состоянии disabled. button:disabled { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } 🚩Полные примеры С HTML Disabled Button Styling • Active Button Disabled Button С CSS /* Стили для активных кнопок */ button { background-color: blue; color: white; border: 1px solid #000; padding: 10px 20px; cursor: pointer; } /* Стили для кнопок с атрибутом disabled */ button[disabled] { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } /* Альтернативный способ с использованием псевдокласса :disabled */ button:disabled { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } 🟠Комбинированный подход Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей. /* Стили для кнопок с классом .special, которые имеют атрибут disabled */ button.special[disabled] { background-color: darkgray; color: black; border: 1px dashed #999; cursor: not-allowed; opacity: 0.7; } Ставь 👍 и забирай 📚 Базу знаний

🤔 Что делает omit? omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей. В JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce(). Реализация omit с Object.fromEntries() (современный способ) function omit(obj, keys) { return Object.fromEntries( Object.entries(obj).filter(([key]) => !keys.includes(key)) ); } const user = { name: "Alice", age: 25, password: "123456" }; const safeUser = omit(user, ["password"]); console.log(safeUser); // { name: "Alice", age: 25 } Реализация omit с reduce() (альтернативный способ) function omit(obj, keys) { return Object.keys(obj).reduce((acc, key) => { if (!keys.includes(key)) acc[key] = obj[key]; return acc; }, {}); } const data = { a: 1, b: 2, c: 3 }; console.log(omit(data, ["b"])); // { a: 1, c: 3 } Если используете Lodash, можно просто вызвать import { omit } from "lodash"; const user = { name: "Alice", age: 25, password: "123456" }; const safeUser = omit(user, ["password"]); console.log(safeUser); // { name: "Alice", age: 25 } Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие преимущества у 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)); Ставь 👍 и забирай 📚 Базу знаний

🤔 Что значит type="submit"? Атрибут type="submit" у тега или указывает, что элемент при нажатии должен отправить форму. Он запускает действие, определенное в action формы, и передаёт данные, собранные с полей. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем нужен 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 Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём разница между макро- и микро-задачами? Макро-задачи (например, setTimeout, setInterval) выполняются в основном цикле событий после выполнения текущего стека. Микро-задачи (например, Promise, queueMicrotask) имеют более высокий приоритет и выполняются сразу после текущего выполнения кода, до обработки макро-задач. Микро-задачи используются для обработки данных в реальном времени, а макро-задачи — для отложенных действий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как происходит tostring? Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. 🟠toString() у примитивов Числа, строки, булевы значения, null, undefined Для примитивных типов toString() работает просто — возвращает строковое представление значения: console.log((123).toString()); // "123" console.log(true.toString()); // "true" console.log(false.toString()); // "false" console.log((3.14).toString()); // "3.14" Но null и undefined не имеют метода toString() и вызов приведёт к ошибке console.log(null.toString()); // ❌ Ошибка: Cannot read properties of null console.log(undefined.toString()); // ❌ Ошибка Поэтому для них лучше использовать String() console.log(String(null)); // "null" console.log(String(undefined)); // "undefined" 🟠toString() у массивов Для массивов toString() преобразует их в строку, разделяя элементы запятой console.log([1, 2, 3].toString()); // "1,2,3" console.log(["яблоко", "банан"].toString()); // "яблоко,банан" console.log([].toString()); // "" (пустая строка) 🟠`toString()` у объектов По умолчанию метод toString() у объекта возвращает строку вида [object Object] const obj = { a: 1, b: 2 }; console.log(obj.toString()); // "[object Object]" Если нужно другое поведение, можно переопределить toString() в объекте const user = { name: "Иван", age: 30, toString() { return `Имя: ${this.name}, Возраст: ${this.age}`; } }; console.log(user.toString()); // "Имя: Иван, Возраст: 30" 🟠`toString()` у классов Можно переопределять метод toString() в классах class Person { constructor(name, age) { this.name = name; this.age = age; } toString() { return `${this.name} (${this.age} лет)`; } } const person = new Person("Анна", 25); console.log(person.toString()); // "Анна (25 лет)" 🟠`toString()` у функций Функции тоже имеют метод toString(), но он возвращает их исходный код function hello() { return "Привет!"; } console.log(hello.toString()); // "function hello() { return 'Привет!'; }" Для стрелочных функций const sum = (a, b) => a + b; console.log(sum.toString()); // "(a, b) => a + b" 🟠Использование `String()` вместо `.toString()` Лучше использовать String(значение), потому что toString() не работает на null и undefined console.log(String(null)); // "null" console.log(String(undefined)); // "undefined" console.log(String(42)); // "42" console.log(String({ a: 1 })); // "[object Object]" Ставь 👍 и забирай 📚 Базу знаний