🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

💡 Кроссворд для тех, кто давно пишет на JavaScript

Придётся вспомнить:

— приведение типов
— странности window
— atob() и Base64
— tagged templates
— регулярные выражения

⚠️ Часть ответов завязана на особенностях языка, которые редко встречаются в обычной разработке.

🔗 Ссылка

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#code_challenge

✅ Правильный ответ: fill() использует одну и ту же ссылку на объект

Array.fill() не создаёт новые массивы. Если передать в него объект или массив, все элементы будут ссылаться на один и тот же экземпляр.

🟢 Поэтому после:

arr[0].push(1);

🟢 результат будет:

[[1], [1], [1]]

👍 — ответил(а) правильно
🔥 — узнал(а) что-то новое

🐸 Библиотека фронтендера

#code_challenge

🤔 Что изменится после того, как пользователь введёт текст в <input>?

❤️ — атрибут value
🔥 — свойство value

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_challenge

🤔 Что сложнее поддерживать со временем?

❤️ — большой компонент
🔥 — слишком глубокую вложенность компонентов

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_challenge

🤔 После обновления CSS пользователь всё ещё видит старые стили. Что вероятнее?

❤️ — браузер использует кэш
🔥 — CSS не успел примениться

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_challenge

🤔 Что важнее для производительности длинного списка?

❤️ — обернуть каждый элемент в React.memo
🔥 — показывать только видимые элементы через виртуализацию

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_challenge

🔥 — 1 2 3
❤️ — undefined undefined undefined
🥰 — 3 3 3
🤔 — 0 1 2

🐸 Библиотека фронтендера

#code_challenge #js

🔥 — 1 2 5 3 4
❤️ — 1 2 3 5 4
🥰 — 1 2 5 4 3
🤔 — 1 5 2 3 4

🐸 Библиотека фронтендера

#code_challenge #js

Что выведет код?

🔥 — 3
❤️ — 1
🥰 — 2
🤔 — ошибка

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_challenge

✅ Правильный ответ: ❤️ 1

Почему: все три вызова используют значение count из текущего рендера. При count = 0 каждый вызов фактически планирует обновление до 1.

Если заменить на:

setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);

тогда результатом будет 3.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_challenge