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

🤔 Что такое функциональное программирование? Функциональное программирование (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 имеет динамическую типизацию, поддержку замыканий, однопоточность с асинхронностью, работу с прототипным наследованием и функции высшего порядка. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие типы данных существуют? Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты. 🚩Примитивные типы: 🟠Number представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14. 🟠String представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!". 🟠Boolean имеет два значения, true и false, и используется для работы с логическими операциями. 🟠Undefined переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения. 🟠Null специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript. 🟠Symbol уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах. 🟠BigInt тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number. 🚩Объекты могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов. Ставь 👍 и забирай 📚 Базу знаний

Такого ещё не было - Битрикс24 со скидкой 30% на год - Плюс бонус 100 000 рублей на ИИ-помощника ✨Автоматизируйте задачи, не теряйте клиентов и экономьте деньги. Выгодно? — Да. Надо брать? — Однозначно. 🏃‍♂️Успей Акция действует до 30 апреля при покупке лицензии Битрикс24 на 12 месяцев, AI-помощник предоставляется за 1 ₽. Правила акции на сайте по ссылке: Узнать больше #реклама 16+ ai-sale.bitrix24.ru О рекламодателе

🎉 Easyoffer 2.0 — самый успешный краудфандинг в истории рунета в категории "Технологии"! Мы это сделали! За считанные часы после старта, благодаря вашей поддержке, проект не просто стартовал — он взлетел. 💸 Собрано: 2 276 840 рублей Это не просто цифра — это ваше доверие, ваша вера в идею, и ваша инвестиция в будущее карьеры сотен (а скоро — тысяч) специалистов. 💼 Благодаря этой сумме мы уже: — Наняли ещё пару разработчиков и аналитиков — Запустили активный сбор и разметку новых данных — Ускорили разработку и подняли планку качества Спасибо каждому, кто поверил в нас на старте! Дальше — только масштабирование и развитие. Мы строим сервис, который станет must-have для всех, кто ищет работу в IT. 👉 Присоединяйтесь сейчас — это только начало.

🤔 Что такое JSX? JSX (JavaScript XML) — это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобный код внутри JavaScript, упрощая создание React-компонентов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🚀 Ваше IT-резюме — билет на собеседование. Оно точно работает? Рекрутеры пролистывают сотни резюме в день. Если ваше не зацепило за 10 секунд — его просто закроют. Как понять, что хотят видеть рекрутеры? Как попасть в топ кандидатов и обхитрить алгоритмы? Все ответы тут. Что вы получите: ✅ Раскрытие опыта так, чтобы было видно вашу реальную ценность ✅ Оптимизация резюме под поиск и ATS-фильтры, чтобы вас находили ✅ Правильная подача достижений и технологии, чтобы заинтересовать работодателя 🎯 Ваш опыт — это сильная сторона, важно уметь его показать! 👉 Отправьте резюме и получите БЕСПЛАТНЫЙ разбор!

Как топ-менеджер превратил GPT в "пояснительную бригаду" Александр — топ-менеджер в компании по разработке IT-решений. Иногда ему приходится лично включаться в конфликтные ситуации между клиентом и командой. Но прежде чем принимать решение, нужно разобраться: что вообще произошло? А это — десятки страниц переписок в почте, в чате, в таск-трекере. Чтение занимало часы. Теперь — 15 минут, максимум. На курсе GPT for Managers Александр научился использовать ChatGPT как "пояснительную бригаду". Он даёт модели историю общения — и получает краткое, понятное резюме: — В чём суть конфликта — Кто и что уже сделал — На каком этапе сейчас Это не магия. Это просто грамотная постановка задачи. Если вы тоже тонете в потоке информации — вас научат, как выйти сухим из воды. ⚡ Курс стартует скоро. Места ещё есть. Записаться онлайн #реклама 16+ gptmasters.ru О рекламодателе

🤔 Что происходит в момент запроса в браузере? Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. 🟠Ввод URL и начало запроса Пользователь вводит URL в адресную строку браузера. Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы. 🟠DNS-разрешение Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера. 🟠Установление TCP-соединения После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие: Браузер отправляет SYN-пакет серверу. Сервер отвечает SYN-ACK пакетом. Браузер отправляет ACK-пакет, подтверждая установление соединения. 🟠HTTPS и SSL/TLS Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS: Браузер и сервер обмениваются сертификатами и выполняют шифрование данных. 🟠Отправка HTTP-запроса Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

🟠Обработка запроса на сервере Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц. 🟠Получение и обработка HTTP-ответа Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

🟠Парсинг и рендеринг страницы Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы. В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки. 🟠Выполнение JavaScript После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы. JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки. Ставь 👍 и забирай 📚 Базу знаний

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