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

🤔 Какие проблемы решает Vuex? Vuex — это централизованное хранилище данных. Он решает проблему, когда нескольким компонентам нужно работать с одними и теми же данными. Вместо того чтобы передавать данные через props или события, всё состояние хранится в одном месте. Это упрощает управление состоянием, особенно в больших приложениях, и делает логику более предсказуемой. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Почему map используют чаще, чем объект? Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев. 🟠`Map` может использовать любые типы данных в качестве ключей В объектах {} ключи всегда автоматически приводятся к строке.

const obj = {};
const key1 = {};
const key2 = {};

obj[key1] = "value1";
obj[key2] = "value2";

console.log(obj); // { '[object Object]': 'value2' }
console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")

Пример с Map:

const map = new Map();
map.set(key1, "value1");
map.set(key2, "value2");

console.log(map.get(key1)); // "value1"
console.log(map.get(key2)); // "value2"

🟠`Map` хранит порядок ключей В объекте {} порядок ключей не гарантируется (особенно для числовых ключей).

const obj = { 2: "two", 1: "one", 3: "three" };
console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)

Пример с Map

const map = new Map();
map.set(2, "two");
map.set(1, "one");
map.set(3, "three");

console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)

🟠`Map` быстрее при частых добавлениях/удалениях Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки. Разница в скорости В Map операции .set(), .get(), .delete() выполняются быстрее. В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей. 🟠У `Map` есть удобные методы Объект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.

const map = new Map();
map.set("a", 1);
map.set("b", 2);

console.log(map.size); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")

В объекте {}

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа

🟠`Map` не имеет проблем с прототипами В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.

const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)

Чтобы обойти это, приходится делать так

const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"

В Map таких проблем нет

const map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)

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

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

🤔 Дай пояснение, для какой цели добавлены следующие элементы. article, aside, audio, canvas, figcaption, figure, footer, header, hgroup, output, section, video - article — самодостаточный, независимый фрагмент контента (пост, новость). - aside — боковое или дополнительное содержимое (сайдбар, заметка). - audio — встроенный аудиоплеер, проигрывает звук. - canvas — холст для динамической графики, рисования. - figcaption — подпись к изображению или другой визуализации в <figure>. - figure — контейнер для самостоятельного медиаконтента с подписью (графики, схемы). - footer — нижний блок страницы или раздела, часто содержит навигацию, контакты. - header — верхний блок, заголовки, логотип, меню. - hgroup — группировка заголовков (например, h1 и h2 вместе как один логический блок). - output — отображение результата (например, вычислений в формах). - section — логический блок документа (тема, раздел). - video — встроенный видеоплеер, воспроизводит видео. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 С помощью чего можно рассчитать идентификатор в 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"

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

Google Meet перестал работать в России: что дальше? 📞🏃‍♂️ Сперва в Telegram и WhatsApp заблокировали звонки, а теперь и Google Meet сбоит. Видеозвонки не проходят ни с телефонов, ни с ПК. Для бизнеса это означает: - сорванные онлайн-совещания и встречи с клиентами; - срыв собеседований и переговоров с подрядчиками; - потерю времени и простои в коммуникациях команд; - срочный поиск альтернативы для видеозвонков и онлайн-летучек. Что делать бизнесу, когда зарубежные сервисы один за другим перестают работать в России? ✅ В МТС Линк: видеозвонки, чаты, онлайн-доски и совещания без сбоев и ограничений 40 минут; дата-центры в России, соответствие 152-ФЗ и 149-ФЗ; готовые интеграции; русскоязычная техподдержка 24/7. Проверьте, подходит ли МТС Линк вашей компании Узнать больше #реклама 16+ mts-link.ru О рекламодателе

🤔 Как сравниваются массивы и объекты в JS? Сравнение объектов и массивов происходит по ссылке, а не по содержимому. Даже два идентичных массива/объекта считаются разными, если созданы отдельно. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

За опросы от 700₽ на мобильный Как это работает? 1. Подписывайтесь на бота МИНИОПРОС. 2. Выбираете и проходите опросы (2-5 минут). 3. Улучшаете качество товаров, услуг. 4. Получаете вознаграждения на смартфон. Зарегистрироваться #реклама 16+ focus5g.com О рекламодателе

🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние? Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Увеличение при наведении</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            transition: transform 0.3s;
        }
        .item:hover {
            transform: scale(1.2); /* Увеличение размера при наведении */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

🚩Почему это важно? 🟠Эффективность пользовательского интерфейса Увеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами. 🟠Стабильность макета Применение трансформации с transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов. 🟠Плавные анимации Использование transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как используются телепорты в Vue? Телепорт позволяет отрисовать элемент не внутри текущего компонента, а в другом месте DOM. Например, ты можешь открыть модальное окно или dropdown не внутри своей вложенной структуры, а сразу в body. Это решает проблемы с позиционированием и z-index — особенно для всплывающих элементов, которые не должны быть ограничены стилями родителя. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое массив? Это структура данных, которая представляет собой упорядоченный список элементов. В JavaScript массивы могут содержать любые типы данных: числа, строки, объекты, другие массивы и даже функции. 🚩Почему массивы нужны? Массивы помогают удобно хранить и обрабатывать наборы данных. Вместо того чтобы создавать множество переменных, можно использовать массив, чтобы хранить сразу несколько значений и работать с ними с помощью специальных методов. 🚩Как используются массивы? Массивы позволяют: Хранить несколько значений в одной переменной Перебирать элементы с помощью циклов Добавлять, удалять, изменять элементы Выполнять операции, например, сортировку и фильтрацию 🚩Как создать массив? В JavaScript массив можно создать разными способами: С использованием литерала массива

let fruits = ["яблоко", "банан", "апельсин"];

С использованием конструктора Array

let numbers = new Array(1, 2, 3, 4, 5);

🚩Как обращаться к элементам массива? Доступ к элементу массива осуществляется по индексу (начинается с 0):

let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"

🚩Основные методы работы с массивами Добавление элемента в конец push()

let arr = [1, 2, 3];
arr.push(4); 
console.log(arr); // [1, 2, 3, 4]

Удаление последнего элемента pop()

arr.pop();
console.log(arr); // [1, 2, 3]

Добавление элемента в начало unshift()

arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

Удаление первого элемента shift()

arr.shift();
console.log(arr); // [1, 2, 3]

Перебор массива forEach()

arr.forEach(item => console.log(item)); 

Фильтрация элементов filter()

let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]

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

ИИ в Битрикс24 умеет предсказывать повторные продажи ИИ-помощник сам найдёт «горячих» клиентов, создаст сделки, предложит, что продавать и как. Менеджеру остаётся нажать «позвонить». ⚡Никакой магии. Только данные и алгоритмы. Ваш отдел продаж работает проактивно. И растёт выручка — без лишнего бюджета. Попробовать #реклама 16+ bitrix24.ru О рекламодателе

🤔 Как сравнить объекты? 1. По ссылке: используется ===, который проверяет, ссылаются ли объекты на одно место в памяти. 2. По значению: необходимо пройти по ключам объектов и сравнить их значения вручную или с помощью библиотек, например Lodash. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Fairy со скидкой 20% по промокоду! Лови выгоду! Скидка 20% на Fairy. Введи промокод PLATINUM20 и забудь о жире на посуде. Купить #реклама market.yandex.ru О рекламодателе

🤔 Расскажи про mobx MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо. 🚩Основные принципы MobX 🟠Модели данных – `observable` (наблюдаемые) MobX делает объекты реактивными, автоматически отслеживая их изменения.

import { makeAutoObservable } from "mobx";

class Store {
  count = 0;

  constructor() {
    makeAutoObservable(this); // Автоматически делает свойства "наблюдаемыми"
  }

  increment() {
    this.count++;
  }
}

const store = new Store();

🟠Экшены (`actions`) Это методы, которые изменяют состояние.

store.increment(); // Увеличит count и автоматически обновит UI

🟠Компоненты подписываются на изменения – `observer` Чтобы React-компонент обновлялся при изменении данных, его нужно обернуть в observer (из mobx-react-lite).

import React from "react";
import { observer } from "mobx-react-lite";

const Counter = observer(({ store }) => (
  <div>
    <p>Счетчик: {store.count}</p>
    <button onClick={() => store.increment()}>+</button>
  </div>
));

export default Counter;

🟠Компьютед-свойства (`computed`) Это вычисляемые значения, которые пересчитываются только при изменении зависимостей.

class Store {
  count = 2;

  constructor() {
    makeAutoObservable(this);
  }

  get double() {
    return this.count * 2;
  }
}

const store = new Store();
console.log(store.double); // 4
store.count = 5;
console.log(store.double); // 10 (пересчиталось автоматически)

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

Вебинар - "Прорыв в AI: применяйте DeepSeek эффективно" ⚡ Практикум по топовой китайской ии DeepSeek! Узнайте, как экономить 20+ часов в неделю! Формат: Живой бесплатный вебинар! Подойдет даже новичкам! На вебинаре вы: - Разберетесь в нейросетях и их возможностях - Научитесь писать рабочие промпты - Автоматизируете рутину (контент, аналитика и др.) - Создадите ИИ-ассистента в прямом эфире! Мы преготовили подарки: ✨ Подарок №1: Полезные материалы по ИИ ✨ Подарок №2: Руководство «Как создать цифровой аватар» (сразу после регистрации)! Кому подойдет? Контент-мейкерам, предпринимателям, специалистам и всем, кто хочет освоить ИИ для карьеры или дохода. ✅Успейте зарегистрироваться Бесплатно! Не теряйте время на рутину – доверьте ее ИИ! Зарегистрироваться #реклама 16+ ed.bonnieandslide.com О рекламодателе

🤔 Какие примитивные данные в JavaScript есть? - string - number - bigint - boolean - undefined - null - symbol Они не являются объектами и имеют иммутабельную природу. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Постоянно получаешь отказы в ответ на отклики? Не получается пробиться на собеседование и получить оффер? Рынок найма в IT сейчас перегрет: сотни откликов — ноль ответов, автоотказы, HR, которые просто не видят кандидата. Многие застревают на этом этапе и не понимают, что делать дальше. Решение — разобраться, как реально работает рынок IT-найма, и выстроить процесс поиска работы системно: — оптимизировать резюме под алгоритмы поиска; — разработать стратегию откликов; — подготовить сильную самопрезентацию; — научиться проходить каждый этап воронки от отклика до оффера. Андрей, практикующий Senior Frontend разработчик, посвятил свой канал тому: — как оптимизировать резюме под поисковые алгоритмы площадок; — как строить воронку отклик → скрининг → собес → оффер; — как презентовать свои навыки; — как сохранить мотивацию, когда сотни откликов уходят в пустоту. 🎁 В закрепе уже доступен бесплатный гайд по трудоустройству для фронтенд-разработчиков. Если нужны актуальные стратегии трудоустройства в 2025 году и самые рабочие практики — присоединяйся 👉 @RusanovMentor

🤔 Когда использовать uselayuouteffect, а когда useeffect? Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются useEffect выполняется после рендера и отрисовки в браузере. useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере. То есть useLayoutEffect блокирует рендер, а useEffect — нет. 🚩Когда использовать `useEffect`? useEffect выполняется асинхронно, после того как браузер отрисовал страницу. Используется для: - Запросов к API. - Подключения WebSocket'ов или таймеров. - Логирования данных. - Изменения заголовка страницы (document.title).

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Запускается после рендера

  return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}

🚩Когда использовать `useLayoutEffect`? useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения. Используется для - Синхронных манипуляций с DOM. - Измерения размеров элементов (getBoundingClientRect). - Анимаций (например, при расчёте позиций).

import { useEffect, useLayoutEffect, useState } from "react";

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const box = document.getElementById("box");
    setWidth(box.offsetWidth);
  }, []);

  return (
    <div>
      <div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
      <p>Ширина: {width}px</p>
    </div>
  );
}

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

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