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

Нейросеть проверит 100% закупок на стройке за минуты! 👍Контроль закупок за 15 минут в день. Нейросеть "Тринити" экономит ваше время и миллионы рублей Вы - генеральный директор строительной компании, и у вас катастрофически не хватает времени? Работаете 12+ часов в день и не можете контролировать каждую закупку? 💰Тратите миллионы на закупки, но не уверены, что получаете лучшие цены и качество? Хотите спать спокойно, зная, что ваши деньги под защитой? Просто загрузите счет или тендерный протокол в Telegram-бот Получите детальный анализ по 18 параметрам за 1 минуту Экономьте до 10% на каждой закупке без дополнительных усилий В 3-5 раз дешевле, чем содержать штат контролеров! Работает 24/7 без выходных и отпусков. 👌Узнайте про наш телеграм-бот и тестируйте бесплатно 7 дней! Экономия в первый же день. Перейти на сайт #реклама 16+ trinitysafe.ru О рекламодателе

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

🤔 Что такое шаблонные литералы, и для чего они нужны? Были введены в 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{}
    

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

Увеличьте память телефона до бесконечности Безлимитное место для фото и видео с телефона в Облаке — 3 месяца за 0 ₽ Незаменимо, когда память телефона переполнена, а нужно фотографировать прямо сейчас Узнать больше #реклама 16+ cloud.mail.ru О рекламодателе

🤔 Что такое псевдоэлемент? Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как считается вес селектора? Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.

    
        ( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент ){}
    

Пример

    
        /* Специфичность: (0, 1, 0, 0) */
#header { color: red; }

/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }

/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }{}
    

🟠Примеры сравнения специфичности Пример 1

    
        h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */{}
    

Пример 2

    
        h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */{}
    

Пример 3 (комбинированные селекторы)

    
        h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */{}
    

Пример 4 (инлайн-стиль всегда сильнее)

    
        <h1 style="color: green;">Заголовок</h1>{}
    

    
        h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */{}
    

🟠Как повысить вес селектора? Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!).

    
        h1 { color: red !important; } /* Всегда будет красным */{}
    

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

Бесплатная конференция по PostgreSQL — уже 19 марта! Регистрируйся на бесплатную конференцию по PostgreSQL — 19.03.2026. В фокусе — практический опыт эксплуатации PostgreSQL, ее внутреннее устройство, производительность, взаимодействие с другими системами и реальные кейсы из highload-среды. Мероприятие в формате онлайн+офлайн, 25+ тематических докладов, 3 потока. Вот некоторые темы конференции: ✅ Опыт выноса OLAP-нагрузки на реплику ✅ Временные таблицы в PostgreSQL: почему это критично для платформы 1С и что можно улучшить ✅ Разделение Compute и Storage: архитектурный прорыв для PostgreSQL в облаке ✅ Highload «из ниоткуда»: когда узкое место — не в СУБД, а в клиентской архитектуре ✅ Работа с логами PostgreSQL Регистрируйся, будет интересно! И бесплатно! Зарегистрироваться #реклама 16+ pgbootcamp.ru О рекламодателе

🤔 Какие способы сортировки массива есть? В JavaScript массивы сортируются с помощью метода sort() Также можно использовать: - Сортировку по строкам (по умолчанию): arr.sort() - Сортировку по свойствам объектов: - users.sort((a, b) => a.age - b.age); - Создание новых отсортированных массивов без мутации: - const sorted = [...arr].sort(); Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое merge и rebase, в чем отличие друг от друга? Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев. 🚩Merge (слияние) Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите объединить изменения из feature в main.

    
        git checkout main
git merge feature{}
    

🚩Rebase (перебазирование) Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите перенести изменения из feature на текущий конец main.

    
        git checkout feature
git rebase main{}
    

🚩Основные отличия 🟠История коммитов Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток. Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений. 🟠Коммиты слияния Merge: Создает новый коммит слияния, который объединяет изменения из двух веток. Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую. 🟠Конфликты Merge: Конфликты решаются один раз при слиянии. Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно. 🟠Применение Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе. Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как работает поток данных между Redux и компонентом? Компонент получает данные из Redux через функции useSelector или connect(). При изменении состояния Redux происходит перерисовка. Чтобы изменить состояние, компонент диспатчит action через dispatch. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний