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

🤔 Почему map используют чаще, чем объект?Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев.🟠`Map` может использовать любые типы данных в качестве ключей В объектах {} ключи всегда автоматически приводятся к строке. const obj = {};const key1 = {};const key2 = {};obj[key1] = "value1";obj[key2] = "value2";console.log(obj); // { '[object Object]': 'value2' }console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")Пример с Map: const map = new Map();map.set(key1, "value1");map.set(key2, "value2");console.log(map.get(key1)); // "value1"console.log(map.get(key2)); // "value2"🟠`Map` хранит порядок ключей В объекте {} порядок ключей не гарантируется (особенно для числовых ключей). const obj = { 2: "two", 1: "one", 3: "three" };console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)Пример с Map const map = new Map();map.set(2, "two");map.set(1, "one");map.set(3, "three");console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)🟠`Map` быстрее при частых добавлениях/удалениях Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки.Разница в скорости В Map операции .set(), .get(), .delete() выполняются быстрее.В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей.🟠У `Map` есть удобные методыОбъект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.const map = new Map();map.set("a", 1);map.set("b", 2);console.log(map.size); // 2console.log(map.has("a")); // trueconsole.log(map.delete("b")); // true (удалит "b")В объекте {}const obj = { a: 1, b: 2 };console.log(Object.keys(obj).length)

🤔 Как передать данные из родительского компонента в дочерний?Данные передаются с использованием props.1. Родительский компонент передаёт данные через атрибуты в дочерний компонент.2. Дочерний компонент принимает их, определяя props в своей конфигурации.Ставь 👍 если знал ответ, 🔥 если нетЗабирай 📚 Базу знаний

🤔 Как определить что состояние является глобальным?Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux). // Глобальное состояние (например, Context API)const UserContext = createContext();function App() { const [user, setUser] = useState({ name: "Иван", isLoggedIn: true }); return ( <UserContext.Provider value={user}> <Navbar /> <Profile /> </UserContext.Provider> );}function Navbar() { const user = useContext(UserContext); return <div>Привет, {user.name}!</div>;}function Profile() { const user = useContext(UserContext); return <div>Профиль пользователя: {user.name}</div>;}🚩Должно ли состояние сохраняться при переходе между страницами? Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине Авторизация пользователя Темная/светлая тема приложения Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище. 🚩Может ли состояние изменяться в одном месте, а использоваться в другом? Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии. const ChatContext = createContext();function ChatProvider({ children }) { const [messages, setMessag

🤔 Можем ли мы получить картинку по HTTP?Да, браузер может получить картинку по HTTP, если сервер отдаёт правильный Content-Type (например, image/jpeg).Ставь 👍 если знал ответ, 🔥 если нетЗабирай 📚 Базу знаний

🤔 Примеры того, что можно использовать в useEffect помимо запросов на сервер:- Слежение за размерами окна (event listener);- Установка таймера или интервала;- Работа с локальным хранилищем (localStorage);- Изменение мета-тегов или заголовков документа;- Анимации, интеграции с библиотеками (например, chart.js).Ставь 👍 если знал ответ, 🔥 если нетЗабирай 📚 Базу знаний

🤔 Является ли, drag and drop частью спецификации?Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек. 🚩Как работает Drag and Drop API? В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие. <div id="drag-item" draggable="true">Перетащи меня</div><div id="drop-zone">Сюда можно сбросить</div><script> const dragItem = document.getElementById("drag-item"); const dropZone = document.getElementById("drop-zone"); dragItem.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", "Данные элемента"); }); dropZone.addEventListener("dragover", (event) => { event.preventDefault(); // Нужно, чтобы разрешить сброс }); dropZone.addEventListener("drop", (event) => { event.preventDefault(); const data = event.dataTransfer.getData("text/plain"); alert("Элемент сброшен: " + data); });</script>🚩Какие события есть в Drag and Drop? Основные события: dragstart — когда начали тянуть элемент. drag — когда элемент двигается (срабатывает много раз). dragenter — когда курсор заходит в зону сброса. dragover — когда элемент находится над зоной (нужно preventDefault()). dragleave — когда курсор покидает зону сброса. drop — когда элемент отпущен в зоне сброса. dragend — когда перетаскивание завершено (даже если не сбросили). 🚩Где используется Drag and Drop? - Перетаскивание файлов в <input type="file"> (например, загрузка изображений). - Канбан-доски, как в Trello. - Онлайн-редакторы, как Figma. - Игры, где можно перемещать предметы. 🚩Можно ли сделать Drag and Drop без HTML5 API? Да, можно использовать другие методы: Через события мыши (mousedown, mousemove, mouseup). Через CSS position: absolute и transform. Через JS-библиотеки (Sortable.js, React DnD, Draggable.js). Например, в мобил

🤔 Как мониторить ошибки JS?- Через консоль браузера (DevTools);- Используя системы логирования: Sentry, LogRocket, Bugsnag;- Локальный лог с console.error и передачей на сервер;- Performance API, window.onerror, unhandledrejection.Ставь 👍 если знал ответ, 🔥 если нетЗабирай 📚 Базу знаний

🤔 Расскажи про операторы сравненияОператоры сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. 🚩Разница между `==` и `===` 🟠`==` (нестрогое сравнение)При == JavaScript приводит типы перед сравнением. console.log(5 == "5"); // true (строка "5" приводится к числу)console.log(0 == false); // true (false → 0)console.log(null == undefined); // true (особый случай)🟠`===` (строгое сравнение)При === сравниваются и значение, и тип.console.log(5 === "5"); // false (разные типы)console.log(0 === false); // false (число !== логический тип)console.log(null === undefined); // false (разные типы)🚩🔹 Логические значения в сравнении JavaScript приводит значения к true или false console.log(1 == true); // true (1 → true)console.log(0 == false); // true (0 → false)console.log("" == false); // true ("" → false)console.log([] == false); // true (пустой массив → false)console.log(null == false); // false (null не приводится к false)🚩Особые случаи - null == undefined → true (они считаются "похожими"). - null === undefined → false (разные типы). - null >= 0 → true (null превращается в 0). - null > 0 → false (но null >= 0 – true, странно, да?). console.log(null == undefined); // trueconsole.log(null >= 0); // trueconsole.log(null > 0); // false (WTF?)Ставь 👍 и забирай 📚 Базу знаний

🤔 Для чего необходим атрибут rel тега <link>?Атрибут rel (relationship) указывает тип связи между текущим документом и подключаемым ресурсом. Примеры:- stylesheet — для подключения CSS;- icon — для favicon;- preload, dns-prefetch — для оптимизации загрузки.Ставь 👍 если знал ответ, 🔥 если нетЗабирай 📚 Базу знаний

🤔 Что делает 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 }Ставь 👍 и забирай 📚 Базу знаний