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

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Какие хранилища есть в браузере? В браузере доступно несколько механизмов хранения данных: 1. localStorage — постоянное хранилище строковых пар ключ-значение, сохраняется между сессиями браузера. 2. sessionStorage — аналогично localStorage, но очищается при закрытии вкладки. 3. cookies — небольшие объёмы данных, могут передаваться на сервер, доступны и клиенту, и серверу. 4. IndexedDB — асинхронная база данных в браузере, подходит для хранения больших объёмов данных, включая объекты. 5. CacheStorage — используется в PWA и сервис-воркерах для кэширования запросов и ответов. Каждое хранилище имеет своё назначение, ограничения и особенности использования. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Устроиться фронтендером в Яндекс за выходные 26–27 апреля устраиваем Weekend Offer Frontend. До 23 апреля оставьте заявку на участие, 26 апреля пройдите технические собеседования, а 27 апреля познакомьтесь с командами и получите офер. В мероприятии участвует 10 команд. Это команды Поиска: Еком-сценарии, Архитектура, Международный Поиск, Красота, Финансы, Видеопоиск. И команды Вертикалей: Путешествия, Недвижимость, Аренда, Авто.ру. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным. Узнать подробности и зарегистрироваться можно здесь.

📅 Осталось 7 дней до конца краудфандинга Мы на финишной прямой! Если ты планировал присоединиться, но ещё не успел, сейчас идеальный момент. Вознаграждения за поддержку: 🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование 👉 Поддержать easyoffer 2.0 Не откладывай на последний момент 📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

🤔 Какие статические методы promise знаешь? Promise – это объект, представляющий отложенный результат (асинхронную операцию). Помимо new Promise(), у Promise есть статические методы, которые помогают работать с несколькими промисами. 🟠`Promise.resolve(value)` – создаёт выполненный промис Возвращает успешно выполненный Promise с переданным значением.

Promise.resolve(42).then(console.log); // 42

🟠`Promise.reject(error)` – создаёт отклонённый промис Возвращает промис в состоянии "отклонён" (rejected).

Promise.reject("Ошибка!").catch(console.error); // "Ошибка!"

🟠`Promise.all(promises)` – ждёт ВСЕ промисы или первый `reject` Выполняет все промисы параллельно и ждёт, пока ВСЕ выполнятся. Если один промис отклонится, Promise.all немедленно выдаст ошибку.

Promise.all([
    Promise.resolve(10),
    Promise.resolve(20),
    Promise.resolve(30),
]).then(console.log); // [10, 20, 30]

Ошибка прерывает выполнение

Promise.all([
    Promise.resolve(1),
    Promise.reject("Ошибка!"),
    Promise.resolve(3),
]).catch(console.error); // "Ошибка!"

🟠`Promise.allSettled(promises)` – ждёт ВСЕ промисы, не падает при `reject` Возвращает массив состояний (fulfilled или rejected) каждого промиса. Никогда не отклоняется, даже если есть ошибки.

Promise.allSettled([
    Promise.resolve(100),
    Promise.reject("Ошибка!"),
    Promise.resolve(300),
]).then(console.log);

Выведет

[
  { status: "fulfilled", value: 100 },
  { status: "rejected", reason: "Ошибка!" },
  { status: "fulfilled", value: 300 }
]

🟠`Promise.race(promises)` – ждёт ТОЛЬКО первый завершённый промис Возвращает результат ПЕРВОГО выполненного или отклонённого промиса.

Promise.race([
    new Promise(res => setTimeout(() => res("Промис 1"), 500)),
    new Promise(res => setTimeout(() => res("Промис 2"), 300)),
]).then(console.log); // "Промис 2" (он быстрее)

🟠`Promise.any(promises)` – ждёт ПЕРВЫЙ успешный промис Возвращает результат ПЕРВОГО выполненного (fulfilled) промиса. Если ВСЕ промисы отклонены (rejected), возвращает AggregateError.

Promise.any([
    Promise.reject("Ошибка 1"),
    Promise.resolve("Успех!"),
    Promise.reject("Ошибка 2"),
]).then(console.log); // "Успех!"

Ошибка, если все промисы reject

Promise.any([
    Promise.reject("Ошибка 1"),
    Promise.reject("Ошибка 2"),
]).catch(console.error); // AggregateError: Все промисы отклонены

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

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе. 2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!

Искусственный интеллект помогает больше продавать Битрикс24 CRM + Ai упрощает работу менеджера. Расшифровывает записи звонков клиентам и сам заполняет карточку сделки. Менеджер в это время уже звонит следующему клиенту. Попробуйте умную CRM Попробовать #реклама 16+ bitrix24.ru О рекламодателе

🤔 Какая особенность в поведении у асинхронных callback? Асинхронные callback-и не выполняются мгновенно. Они ставятся в очередь событий (event loop) и запускаются после завершения текущего стека вызовов. Это означает, что: - Код после вызова асинхронного callback-а продолжается немедленно. - Callback может сработать позже, вне текущего потока. - Нужно учитывать асинхронный контекст при работе с состоянием, рендером и логикой приложения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое функциональное программирование? Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов. 🚩Основные принципы функционального программирования 🟠Чистые функции (Pure Functions) Функция называется чистой, если: При одинаковых входных данных всегда возвращает одинаковый результат. Не изменяет внешние переменные (нет побочных эффектов). Нечистая функция (изменяет внешнюю переменную)

let count = 0;
function increment() {
    count += 1; // изменяет внешнюю переменную
    return count;
}

Чистая функция (зависит только от аргументов)

function increment(num) {
    return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)

🟠Иммутабельность (Immutable Data) Данные не изменяются, а создаются новые версии объектов. Изменение объекта (нефункциональный подход)

const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объект

Создание нового объекта (функциональный подход)

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект

🟠Функции высшего порядка (Higher-Order Functions) Функция, которая принимает другую функцию в аргумент или возвращает функцию.

const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]

Пример: Функция, возвращающая другую функцию

const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10

🟠Функциональные методы массивов (map, filter, reduce) Функциональные методы позволяют не мутировать массив, а создавать новый. Используем map() для изменения элементов

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

Используем filter() для фильтрации

const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]

Используем reduce() для вычислений

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

🟠Каррирование (Currying) Разделение функции на несколько функций, каждая принимает по одному аргументу.

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

Пример: Каррированная функция

const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5

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

ML-митап от ГИД Дата – решения, которые двигают бизнес 24 апреля в 18:00 разберём: –Кейсы, где ML-решения дали +% к доходам медиасервисов –Что сработало: рекомендации, поиск, генерация контента –Спикеры — Senior ML-инженеры с опытом внедрения в PREMIER, Rutube и др. 🏃‍♂️ Для кого: ML-инженеры, Data Scientists, MLOps, продакт-менеджеры ✨Бонусы: мерч, нетворкинг, afterparty Москва+online, офис ГИД Дата Участие бесплатное ✅ Залетай, регистрация и подробности ниже Узнать больше #реклама giddata.timepad.ru О рекламодателе

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

📺 Уникальная база IT собеседований 456+ реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 Что делает 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 }

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

Переходим на микросервисную архитектуру с Kubernetes 24 апреля на бесплатном вебинаре «К микросервисам через построение управляемой контейнерной среды» эксперты СберТеха расскажут о требованиях к контейнеризации и поделятся опытом их реализации в продуктах: ✨ Platform V DropApp — инструменте для управления контейнерными приложениями, ✨ Platform V Synapse Service Mesh — инструмент для управления взаимодействием микросервисов с собственным менеджером политик и мультикластерной федерацией. Поговорим о том, почему важно правильно выбрать дистрибутив Kubernetes, какие инструменты помогают в защите контейнерных сред, обсудим опыт эксплуатации продуктов в высоконагруженных средах. Зарегистрироваться #реклама 16+ platformv.sbertech.ru О рекламодателе

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

Полезные данные для работы с медийной рекламой Яндекса В новом исследовании Яндекса о медийной рекламе рассказываем: — Какова динамика популярности и эффективности брендформанс-подхода — Как меняется VTR в зависимости от длины роликов — Какие форматы показываются чаще всего и какие ресайзы — must have для любой медийной кампании — Что мы планируем на этот год Переходите на Портал Рекламы, читайте и делитесь с коллегами. Узнать больше #реклама yandex.ru О рекламодателе

Что такое PRO-подписка на easyoffer 2.0? easyoffer PRO — это не просто доступ к базе, а полноценный инструмент для получения оффера. 🧠 База вопросов с собеседований + Анализ на основе 4,000 собеседований + Вероятность встречи каждого вопроса + Фильтрация по грейдам, компаниям, типам интервью + Примеры ответов: текстовые и видео + Готовьтесь к собеседованию в конкретную компанию 🛠 Тренажер "Проработка вопросов" + Флеш-карточки + интервальные повторения + Персональная система показа карточек в зависимости от ваших ответов + Упор на наиболее частые вопросы + Фокус на слабые места и быстрый прогресс 🎭 Тренажер "Реальное собеседование" + Сценарии на основе реальных интервью + Подготовка к конкретным компаниям + Итоговая статистика: прошёл/не прошёл 🧩 База задач с собеседований + Live-coding и System Design задачи + Оценка вероятности встречи задачи + Подготовка к задачам по конкретным компаниям 📋 База тестовых заданий + Задания из реальных вакансий + Фильтрация по технологиям и грейдам + Лучшие решения в доступе 📈 Тренды технологий в вакансиях + Топ-100 навыков, которые требуют компании + Динамика популярности технологий + Фильтрация по грейдам 🎁 Специальная цена до релиза: 3200 руб. за целый год Сейчас PRO на 1 год стоит как будет стоить 1 месяц после релиза. Покупка также открывает доступ к закрытому бета-тестированию. + Вы можете активировать подписку в любой момент, например, когда начнете искать работу. Предзаказ здесь: https://planeta.ru/campaigns/easyoffer 📌 Цена поднимется сразу после запуска. Если вы хотите перестать угадывать, что спросят на собеседовании, и начать точечно готовиться на основе реальных данных — easyoffer PRO именно для вас. Экономьте время. Получайте оффер легко.

🤔 Что такое шаблонные литералы, и для чего они нужны? Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений. 🚩Примеры использования 🟠Интерполяция переменных и выражений Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

🟠Многострочные строки Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

🟠Встроенные выражения Внутри шаблонных литералов можно использовать любые JavaScript-выражения.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

🟠Вызов функций внутри шаблонных литералов Можно вызывать функции и методы внутри шаблонных литералов.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

🟠Тегированные шаблонные литералы Тегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

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

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

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