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

🤔 В чём преимущество синтаксического сахара в виде async await над promise? Оба способа позволяют работать с асинхронным кодом в JavaScript, но async/await делает код чище, проще и удобнее. 🟠`async/await` проще читать и писать Код на Promise.then() часто становится вложенным и запутанным

fetch("https://api.example.com/user")
  .then(response => response.json())
  .then(user => {
    return fetch(`https://api.example.com/orders/${user.id}`);
  })
  .then(response => response.json())
  .then(orders => {
    console.log("Заказы:", orders);
  })
  .catch(error => console.error("Ошибка:", error));

Решение: async/await

async function getUserOrders() {
    try {
        const response = await fetch("https://api.example.com/user");
        const user = await response.json();

        const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
        const orders = await ordersResponse.json();

        console.log("Заказы:", orders);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getUserOrders();

async/await лучше обрабатывает ошибки

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    throw new Error("Ошибка в обработке данных");
  })
  .catch(error => console.error("Ошибка:", error));

async/await + try/catch – мощная обработка ошибок

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Ошибка HTTP " + response.status);
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}
fetchData();

async/await удобен в for и try/catch

const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));
});

async/await в for of

async function fetchAll(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }
}
fetchAll(["url1", "url2", "url3"]);

async/await работает с try/finally

async function fetchData() {
    try {
        console.log("Запрос данных...");
        const response = await fetch("https://api.example.com");
        const data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка:", error);
    } finally {
        console.log("Закрываем соединение...");
    }
}
fetchData();

async/await можно использовать внутри Promise.all() Иногда Promise.all() быстрее, потому что запускает промисы параллельно.

async function fetchMultiple() {
    const [user, orders] = await Promise.all([
        fetch("https://api.example.com/user").then(res => res.json()),
        fetch("https://api.example.com/orders").then(res => res.json())
    ]);

    console.log(user, orders);
}
fetchMultiple();

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

🤔 Что такое боксовая модель, из чего она состоит и какие бывают виды? Боксовая модель определяет, как рассчитываются размеры и отступы элементов. Состоит из: - Content — содержимое; - Padding — внутренние отступы; - Border — рамка; - Margin — внешние отступы. Виды: - content-box — по умолчанию, ширина/высота задаются только для content; - border-box — ширина включает padding и border (удобнее в практике). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое webgl? WebGL (Web Graphics Library) — это JavaScript API для рендеринга 2D и 3D-графики в браузере без необходимости установки дополнительных плагинов. Он основан на OpenGL ES и работает внутри HTML5-элемента <canvas>. WebGL позволяет использовать мощность графического процессора (GPU) для отрисовки сложных сцен, анимаций и интерактивных приложений прямо в браузере. 🚩Зачем нужен WebGL? 🟠Рендеринг 3D-графики в браузере Без WebGL для создания сложных 3D-сцен в вебе приходилось использовать Flash, Java-апплеты или другие технологии. WebGL делает это нативно в браузере. 🟠Использование аппаратного ускорения WebGL использует мощность видеокарты (GPU), а не только центрального процессора (CPU), что значительно ускоряет обработку графики. 🟠Работа в разных браузерах и на разных устройствах WebGL работает на большинстве современных браузеров (Chrome, Firefox, Edge, Safari) и поддерживается на Windows, macOS, Linux, iOS и Android. 🟠Поддержка интерактивных приложений Используется в играх, 3D-графике, симуляциях, картографических сервисах (например, Google Maps, Cesium.js), визуализациях данных. 🟠🚩ак использовать WebGL? WebGL управляет графикой через шейдеры — небольшие программы, которые выполняются на видеокарте. Для работы с WebGL обычно используются библиотеки, упрощающие разработку, например: - Three.js — высокоуровневая библиотека для удобной работы с WebGL. - Babylon.js — мощный движок для создания 3D-приложений. - PixiJS — библиотека для 2D-графики с поддержкой WebGL.

<canvas id="webgl-canvas"></canvas>
<script>
  // Получаем WebGL-контекст
  const canvas = document.getElementById("webgl-canvas");
  const gl = canvas.getContext("webgl");

  if (!gl) {
    console.error("WebGL не поддерживается");
  }

  // Устанавливаем цвет фона и очищаем экран
  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Черный фон
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

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

👩‍💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много! Специально для Вас, собираем лучшие вакансии, только с прямыми контактами в Telegram! 👩‍💻 Frontend 👩‍💻 Node.js 👩‍💻 DevOps 👩‍💻 Python 👩‍💻 C# 👣 Go 🖼️ PHP 🔎 QA 🖥 SQL 🤖 ML & DS 👩‍💻 UX/UI 👩‍💻 Java 👩‍💻 Mobile 📋 Analyst 💼 1C 👩‍💻 IT HR Подпишись чтобы не упустить свой шанс получить лучший оффер!

🤔 Как браузер понимает, что нужно отображать именно картинку, а не текст? По MIME-типу, заголовкам ответа и контексту тега. Если заголовки верны — картинка отобразится, если нет — может быть воспринята как бинарный поток или текст. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое async и await? Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises). 🚩Ключевое слово async Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.

async function fetchData() {
  return 'данные';
}

fetchData().then(data => console.log(data)); // выводит "данные"

🚩Ключевое слово await Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.

async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  let json = await data.json();
  return json;
}

🚩Плюсы ➕Улучшение читаемости кода Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание ➕Упрощение обработки ошибок В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее. ➕Избегание "callback hell" Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками. Ставь 👍 и забирай 📚 Базу знаний

🤔 Сколько в один кадр eventloopа может войти reflow и repaint? Обычно браузер пытается выполнить один reflow и один repaint за один кадр (примерно 16.6 мс при 60 fps), объединяя их по возможности. Если операции слишком тяжёлые, кадры могут пропускаться. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего необходим viewport? Viewport – это область видимой части веб-страницы в браузере пользователя. 🟠`meta viewport` – ключ для адаптивного дизайна Чтобы страница корректно отображалась на мобильных устройствах, используется мета-тег viewport:

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

🟠Проблема без `meta viewport` (почему он нужен?) Без viewport (по умолчанию) На мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить. 🟠Дополнительные параметры `meta viewport` Управление масштабом

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

Отключение адаптации iOS Safari

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

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

🤔 Какие проблемы решает 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]

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