FrontendQuiz - задачи с собеседований по фронтенду
1.76K subscribers
246 photos
2 videos
2 files
163 links
Задачки для фронтендщиков:
алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения.

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Какое свойство CSS используется для создания границы вокруг элементов?
Anonymous Poll
27%
margin
70%
border
6%
outline
0%
frame
🤔 Какой метод JavaScript позволяет создать WeakSet с инициализацией от массива объектов?
Anonymous Poll
65%
new WeakSet()
15%
WeakSet.create()
20%
WeakSet.from()
0%
Set.createWeak()
🤔 Что делать, если один и тот же отчёт запросили много раз?

- Кешировать результат — на уровне БД, бэкенда, Redis или в браузере.
- Использовать идемпотентные API — чтобы повторные запросы не перегружали систему.
- Реализовать сигнатуры или токены запроса, чтобы одинаковые запросы возвращали закешированный ответ.
- Для тяжёлых отчётов — сохранять в хранилище и отдавать ссылку.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript позволяет создать объект с доступом к приватным методам другого объекта?
Anonymous Poll
26%
Object.create()
52%
Object.defineProperties()
17%
WeakMap()
4%
Reflect.construct()
🤔 Какое значение свойства CSS background-origin определяет, где начинается фон элемента?
Anonymous Poll
13%
padding-box
47%
content-box
40%
border-box
13%
margin-box
🤔 Что такое GraphQL?

GraphQL — это язык запросов к API, разработанный Facebook. Позволяет клиенту точно указать, какие данные ему нужны. Это альтернатива REST, с преимуществами:
- меньше перегрузки;
- один запрос на множество сущностей;
- гибкость на стороне клиента.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🔥1
🤔 Какой метод JavaScript используется для добавления одного или нескольких элементов в конец массива?
Anonymous Poll
89%
push
8%
append
0%
attach
3%
insert
🤔 Почему нельзя напрямую использовать браузерный DOM?

Потому что:
- Работа с DOM медленная;
- Частые манипуляции вручную могут привести к низкой производительности;
- Нарушается декларативный подход и целостность UI;
- React должен контролировать рендер, иначе появляются баги при повторной отрисовке.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой JavaScript API позволяет веб-приложениям отправлять обновленные данные на сервер в реальном времени без перезагрузки страницы?
Anonymous Poll
47%
WebSocket
3%
Server-Sent Events
23%
AJAX
40%
Fetch API
🤔 Что известно о своих знаниях в JS?

Можно указать знание:
- основ синтаксиса и работы с DOM;
- работы с событиями и асинхронностью (Promise, async/await);
- массивов и объектов, перебирающих методов;
- замыканий, областей видимости, this;
- опыт с инструментами разработки и отладки.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript позволяет обрабатывать каждое значение в массиве, создавая новый массив с результатами?
Anonymous Poll
10%
forEach()
83%
map()
13%
reduce()
0%
filter()
🤔 Как между собой связаны HTML, CSS и JS

HTML задаёт структуру, CSS отвечает за внешний вид, JS — за динамическое поведение. Они взаимодействуют через DOM: JS может читать и изменять HTML и CSS.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript используется для преобразования всех элементов массива в одно строковое значение?
Anonymous Poll
7%
Array.concat
11%
Array.combine
82%
Array.join
0%
Array.merge
🤔 Что такое блочная модель?

Блочная модель (Box model) описывает, как браузер отображает и рассчитывает размеры элементов:
- content → padding → border → margin.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение будет в переменной d после выполнения следующего кода?
let d = [1, 2, 3];
d = d.map(x => x + 1).filter(x => x > 2);
Anonymous Poll
0%
[1, 2, 3]
8%
[2, 3, 4]
88%
[3, 4]
4%
[2, 3]
🤔 Различия между let и const

- let позволяет переназначать значения переменных, в то время как const не позволяет это после инициализации.
- Обе директивы предоставляют блочную область видимости.
- let идеально подходит для использования в случаях, когда значение переменной может изменяться.
- const используется для объявления переменных с неизменным значением.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Что вернёт следующий код: console.log(!!"false");?
Anonymous Poll
60%
true
23%
false
14%
"false"
3%
Ошибка
🤔 Как мы можем ускорить загрузку ресурсов?

- Кэширование (Cache-Control, ETag).
- Сжатие (GZIP, Brotli).
- Lazy-loading изображений.
- CDN для статики.
- Минификация и объединение файлов.
- Асинхронная загрузка скриптов (defer, async).
- Отложенная загрузка нефокусных блоков (вкладки, карты).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение overflow используется в CSS, чтобы скрыть содержимое, выходящее за рамки элемента, без отображения полос прокрутки?
Anonymous Poll
96%
overflow: hidden;
0%
overflow: scroll;
4%
overflow: auto;
0%
overflow: visible;
🤔 Какое значение свойства CSS order определяет порядок отображения элементов Flexbox?
Anonymous Poll
9%
1
4%
0
0%
-1
91%
Все вышеперечисленные значения
🤔 Как проверить, является ли значение массивом?

Надёжный способ — использовать:
- Array.isArray(value) — вернёт true, если значение — массив.
Это предпочтительнее, чем проверка через typeof, так как typeof вернёт object для массивов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🔥1