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

Бизнес образование в Moscow Business Academy (MBA) Получите современное бизнес образование от международных экспертов. ✅Более 37 направлений обучения. ✅Международные дипломы. ✅Online и очные форматы обучения. ✅Разборы практических бизнес-кейсов. Скидка на все программы online до 35%! Узнать больше #реклама 16+ moscow.mba О рекламодателе

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

26–27 апреля проводим Weekend Offer Frontend Устроиться в Яндекс за выходные — реально. Ищем крутых фронтендеров с опытом работы от 4 лет, готовых работать в офисном или гибридном режиме в России. Подавайте заявку до 23 апреля — и всего за два дня пройдите все технические собеседования. После сможете пообщаться с нанимающими менеджерами и выбрать из 10 команд ту, которая покажется самой интересной. Если всё сложится хорошо, сразу же пришлём вам офер. Зарегистрироваться #реклама yandex.ru О рекламодателе

🤔 Что делает babel? Babel – это транспилер для JavaScript, который преобразует современный код (ES6+ и JSX) в старый, совместимый с более старыми браузерами. 🚩Зачем нужен Babel? 🟠Поддержка старых браузеров Некоторые браузеры (например, Internet Explorer) не поддерживают новые фичи JavaScript. Babel переводит код на более старый стандарт, чтобы он работал везде. 🟠Поддержка современных стандартов (ES6, ES7, ES8...) Позволяет использовать новые возможности JavaScript, даже если браузер их пока не поддерживает. 🟠Компиляция JSX Babel преобразует JSX (используется в React) в обычный JavaScript. 🟠Оптимизация и эксперименты Можно использовать нестандартные предложения для JavaScript, такие как плагины для новых фич. 🚩Как это работает? Babel делает три шага: Парсинг – разбор кода в абстрактное синтаксическое дерево (AST). Трансформация – изменение AST (например, замена const на var). Генерация – создание нового кода из изменённого AST. 🚩Пример работы Babel Современный JavaScript (ES6+)

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice"));

После транспиляции Babel (ES5)

"use strict";

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice"));

🚩Использование Babel 1⃣Установка Babel через npm

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2⃣Создание конфигурации (.babelrc)

{
  "presets": ["@babel/preset-env"]
}

3⃣Транспиляция файла (script.js)

npx babel script.js --out-file script.compiled.js

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

Стать бэкендером в Яндексе за несколько дней 12–17 апреля устраиваем Week Offer Backend: за несколько дней можно пройти технические секции и попасть в Яндекс. Для этого нужно зарегистрироваться и решить несколько задач в Контесте. Ищем классных бэкенд-разработчиков с опытом работы от 3 лет на C++, Python, Java/Kotlin или Go, готовых работать в офисном или гибридном режиме в России. Вы сможете выбрать одну из команд: Яндекс Пэй, Яндекс ID, Яндекс Плюс, Яндекс Сплит, Яндекс Сейвы, Яндекс 360. Можно пообщаться с нанимающими менеджерами и выбрать самый интересный проект. Если всё пройдёт хорошо, сразу же получите офер. Зарегистрироваться #реклама yandex.ru О рекламодателе

🤔 Как отследить изменение модели? Способы: - watch: следим за конкретным полем или выражением. - @input или @update:modelValue — события от v-model. - computed с геттером и сеттером — можно ловить изменения при записи. - emit из компонента — в родителе можно слушать события. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Почему вы не используете Битрикс24 CRM с AI-помощником? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. ⚡Не тратьте время на рутину. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 Что такое нечистая функция? Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой. 🚩Признаки нечистой функции Зависит от внешнего состояния Изменяет глобальные переменные Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.) 🚩Примеры нечистых функций Использует внешнюю переменную (зависит от внешнего состояния)

let count = 0;

function increment() {
    count += 1; 
    return count;
}

console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)

Модифицирует переданный аргумент

function addElement(arr, item) {
    arr.push(item); // изменяет оригинальный массив
    return arr;
}

let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)

Выполняет побочные эффекты (например, изменяет DOM)

function changeTitle(newTitle) {
    document.title = newTitle;
}

changeTitle("Новая страница");
console.log(document.title); // "Новая страница"

Генерирует случайное значение

function getRandomNumber() {
    return Math.random();
}

console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)

🚩Чем отличается от чистой функции? Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния. Чистый вариант функции addElement() (не меняет исходный массив)

function addElementPure(arr, item) {
    return [...arr, item]; // создаёт новый массив, не изменяя старый
}

let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)

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

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе

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

Сколько приложений нужно вашей команде для работы? Всего один сервис — Битрикс24! А внутри десятки инструментов для совместной работы и бизнеса. Читайте подробнее в карточках. Регистрируйтесь сейчас, чтобы забрать их все себе бесплатно😊 Зарегистрироваться #реклама 16+ office-online.bitrix24.ru О рекламодателе

🤔 С помощью чего можно рассчитать идентификатор в js? В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований: 🟠 Генерация UUID UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx. Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

🟠Хеш-функции (SHA, MD5) Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции. SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

🟠Генерация случайного идентификатора Если нужна просто случайная строка, можно использовать Math.random(). Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

🟠Инкрементальные ID Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

🟠Хеширование строки (например, объекта) Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

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

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Открытые школы — это возможность за месяц прокачать свои навыки и получить оффер в ИТ-холдинг Т1. С тебя — год опыта работы в ИТ, с нас — бесплатный онлайн-интенсив и топовые преподаватели. Что ты получишь? ✅ Уникальный рыночный опыт. Наши проекты ежегодно получают награды на ИТ-конкурсах: Global CIO, Национальной банковской премии и др. ✅ Быстрый рост в ИТ при экспертной поддержке. ✅ Материалы от HR, которые помогут прокачать резюме и подготовиться к интервью в Т1. ✅ Поддержка опытных преподавателей и уникальный карьерный фаст-трек до мидла в Т1 для выпускников интенсива. ✅ Реальный шанс получить оффер в Т1. Подавай заявку до 11 апреля и приходи учиться! Старт ИТ-интенсива уже 14 апреля. Подать заявку #реклама 16+ t1.ru О рекламодателе

🤔 Какие особенности слежения за "глубокими" объектами? Если объект вложенный или содержит массивы, Vue может не отследить изменения в глубине, особенно в Vue 2: - В Vue 2: Нужно использовать watch с deep: true, но он менее эффективен — будет срабатывать на любую вложенную мелочь. - В Vue 3: Реактивность стала глубже и умнее благодаря Proxy. Но всё равно deep: true может потребоваться, если следить за вложенными структурами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Бесплатный доступ к MBA Intensive – для руководителей В Школе Генерального Директора сегодня открыт бесплатный доступ на 2 дня к полноценному онлайн-курсу MBA Intensive при переходе из поста. Вы сможете пройти 500+ практических уроков совершенно бесплатно и улучшить управленческие навыки и понимание бизнес-процессов. После сдачи тестов доступен сертификат о прохождении уроков. Вот какие темы вы успеете изучить – выбирайте любую и приступайте прямо сейчас: 1. Лидерство, личная эффективность и эмоциональный интеллект 2. Управление персоналом 3. Финансы и экономика 4. Торговля и сервис 5. Операционная деятельность и принятие решений 6. Project management 7. Управление маркетингом Оставляйте заявку по ссылке >>> Подать заявку #реклама 16+ gd.ru О рекламодателе

🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон

<тип>(<область>): <краткое описание>

🚩Основные типы коммитов 🟠feat добавление новой функциональности 🟠fix исправление ошибки 🟠docs изменение документации 🟠style исправления, не влияющие на логику (например, форматирование) 🟠refactor переработка кода без изменения функциональности 🟠test добавление или обновление тестов 🟠chore изменения, не влияющие на код (например, обновление зависимостей) 🚩Примеры 1⃣Добавление новой функции

feat(auth): добавлена аутентификация через Google

2⃣Исправление ошибки

fix(login): исправлен баг с неверным редиректом

3⃣Улучшение кода без изменения

refactor(api): оптимизирован алгоритм фильтрации данных

4⃣Обновление документации

docs(readme): добавлены инструкции по развертыванию

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

Бесплатное льготное обучение: 3 месяца Ищем людей, которые хотят обучиться и работать в IT-сфере из дома В конце обучения вы пройдете стажировку и устроитесь на работу с зп от 150.000 рублей Образование, место жительства, трудовой стаж — не важны! Для старта нужно: — пройти короткий тест — заполнить анкету На что можно рассчитывать, после обучения: ✅ удаленная работа ✅ зп от 150.000 рублей (потолка нет) ✅ стабильная подработка, если не хотите уходить с основной работы ⚡ Осталось всего 47 бесплатных мест. Успейте пройти тест и оставить заявку: Узнать больше #реклама 16+ technolium.ru О рекламодателе

🤔 Что такое слоты? Это механизм в веб-компонентах или фреймворках (например, Vue.js, Svelte) для передачи содержимого из родительского компонента в дочерний. Они позволяют создавать шаблоны с кастомным содержимым. Слот может быть обычным или именованным для управления разными частями содержимого. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи о действиях в vuex В Vuex (хранилище данных в Vue 2 и 3) actions используются для выполнения асинхронных операций, прежде чем изменить состояние (state). 🚩 Как работают actions? 🟠Определение action в `actions` В actions передаётся объект context, из которого можно вызвать commit() для изменения state.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit("increment"); // Вызываем мутацию через 1 сек
      }, 1000);
    }
  }
});

🟠Как вызвать action? Actions вызываются через dispatch(), а не commit().

store.dispatch("asyncIncrement");

🟠Actions с параметрами Можно передавать параметры в dispatch(), чтобы использовать их внутри action.

actions: {
  asyncIncrement(context, payload) {
    setTimeout(() => {
      context.commit("increment");
      console.log("Задержка:", payload.delay);
    }, payload.delay);
  }
}

store.dispatch("asyncIncrement", { delay: 2000 });

🟠Возвращение `Promise` в actions Если action должен дождаться завершения, можно вернуть Promise.

actions: {
  fetchData(context) {
    return fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(data => {
        console.log("Данные получены:", data);
      });
  }
}

store.dispatch("fetchData").then(() => {
  console.log("Данные загружены!");
});

🟠Использование `async/await` в actions Можно использовать async/await, чтобы код выглядел чище.

actions: {
  async fetchData(context) {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Данные:", data);
  }
}

await store.dispatch("fetchData");
console.log("Данные загружены!");

🟠Actions могут вызывать другие actions Если нужно выполнить несколько actions последовательно, можно вызывать один action внутри другого.

actions: {
  async firstAction(context) {
    console.log("Первый action выполнен");
  },
  async secondAction(context) {
    await context.dispatch("firstAction");
    console.log("Второй action выполнен");
  }
}

store.dispatch("secondAction");
// Выведет: "Первый action выполнен"
// Затем: "Второй action выполнен"

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

🤔 Сколько есть способов что-то сделать асинхронно? В JS основные способы работы с асинхронностью: 1. Callbacks – передача функции в аргумент (старый подход). 2. Promises – .then() / .catch() для управления асинхронным кодом. 3. Async/Await – более удобный синтаксис для работы с промисами. 4. Event Loop + Web APIs – механизм обработки асинхронных операций. 5. Web Workers – выполнение кода в отдельных потоках. 6. setTimeout / setInterval – отложенный запуск кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний