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

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"{}
    

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