Don't get caught by a cheater! Telemetrio finds and tags such channels 👉 If you want to see the tag, subscribe

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

Open in Telegram

Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads

Network:easyoffer Russia37 727 Technologies & Applications7 459...

📈 Analytical overview of Telegram channel Frontend | Вопросы собесов

Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 17 418 subscribers, ranking 7 459 in the Technologies & Applications category and 37 727 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 17 418 subscribers.

According to the latest data from 29 October, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -230 over the last 30 days and by -11 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 6.92%. Within the first 24 hours after publication, content typically collects 4.34% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 206 views. Within the first day, a publication typically gains 757 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Thanks to the high frequency of updates (latest data received on 30 October, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

17 418

Subscribers

-1124 hours

-727 days

-23030 days

1 206

Post views

~ 75724 hours

~ 87448 hours

6.92%

Engagement rate

~ 2

Posts per day

Ads index

beta

Posts Archive

\n\n🚩Какие события есть в Drag and Drop? \n\nОсновные события: \ndragstart — когда начали тянуть элемент. \ndrag — когда элемент двигается (срабатывает много раз). \ndragenter — когда курсор заходит в зону сброса. \ndragover — когда элемент находится над зоной (нужно preventDefault()). \ndragleave — когда курсор покидает зону сброса. \ndrop — когда элемент отпущен в зоне сброса. \ndragend — когда перетаскивание завершено (даже если не сбросили). \n\n🚩Где используется Drag and Drop? \n\n- Перетаскивание файлов в (например, загрузка изображений). \n- Канбан-доски, как в Trello. \n- Онлайн-редакторы, как Figma. \n- Игры, где можно перемещать предметы. \n\n🚩Можно ли сделать Drag and Drop без HTML5 API? \n\nДа, можно использовать другие методы: \nЧерез события мыши (mousedown, mousemove, mouseup). \nЧерез CSS position: absolute и transform. \nЧерез JS-библиотеки (Sortable.js, React DnD, Draggable.js). \nНапример, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-11T09:05:41Z","dateModified":"2026-03-11T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2381},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2453","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2453","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2453","headline":"🤔 Как мониторить ошибки JS? - Через консоль браузера (DevTools); - Используя системы логирования: Sentry, Log…","articleBody":"🤔 Как мониторить ошибки JS?\n\n- Через консоль браузера (DevTools);\n- Используя системы логирования: Sentry, LogRocket, Bugsnag;\n- Локальный лог с console.error и передачей на сервер;\n- Performance API, window.onerror, unhandledrejection.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-10T16:10:40Z","dateModified":"2026-03-10T16:10:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2192},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2452","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2452","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2452","headline":"🤔 Расскажи про операторы сравнения Операторы сравнения в JavaScript позволяют сравнивать значения и возвращаю…","articleBody":"🤔 Расскажи про операторы сравнения\n\nОператоры сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. \n\n🚩Разница между `==` и `===` \n\n🟠`==` (нестрогое сравнение)\nПри == JavaScript приводит типы перед сравнением. \nconsole.log(5 == \"5\"); // true (строка \"5\" приводится к числу)\nconsole.log(0 == false); // true (false → 0)\nconsole.log(null == undefined); // true (особый случай)\n\n🟠`===` (строгое сравнение)\nПри === сравниваются и значение, и тип.\nconsole.log(5 === \"5\"); // false (разные типы)\nconsole.log(0 === false); // false (число !== логический тип)\nconsole.log(null === undefined); // false (разные типы)\n\n🚩🔹 Логические значения в сравнении \n\nJavaScript приводит значения к true или false \nconsole.log(1 == true); // true (1 → true)\nconsole.log(0 == false); // true (0 → false)\nconsole.log(\"\" == false); // true (\"\" → false)\nconsole.log([] == false); // true (пустой массив → false)\nconsole.log(null == false); // false (null не приводится к false)\n\n🚩Особые случаи \n\n- null == undefined → true (они считаются \"похожими\"). \n- null === undefined → false (разные типы). \n- null >= 0 → true (null превращается в 0). \n- null > 0 → false (но null >= 0 – true, странно, да?). \nconsole.log(null == undefined); // true\nconsole.log(null >= 0); // true\nconsole.log(null > 0); // false (WTF?)\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-10T09:05:38Z","dateModified":"2026-03-10T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2451},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2451","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2451","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2451","headline":"Покупайте Samsung Galaxy A серию на Яндекс Маркете Узнать больше #реклама market.yandex.ru О рекламодателе","articleBody":"Покупайте Samsung Galaxy A серию\n\nна Яндекс Маркете \n\nУзнать больше\n\n#реклама \nmarket.yandex.ru\nО рекламодателе","datePublished":"2026-03-10T03:11:22Z","dateModified":"2026-03-12T01:11:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/5296329464004416052?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1506},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2450","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2450","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2450","headline":"🤔 Для чего необходим атрибут rel тега ? Атрибут rel (relationship) указывает тип связи между текущим до…","articleBody":"🤔 Для чего необходим атрибут rel тега ?\n\nАтрибут rel (relationship) указывает тип связи между текущим документом и подключаемым ресурсом. Примеры:\n- stylesheet — для подключения CSS;\n- icon — для favicon;\n- preload, dns-prefetch — для оптимизации загрузки.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-09T16:10:39Z","dateModified":"2026-03-09T16:10:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2250},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2449","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2449","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2449","headline":"🤔 Что делает omit? omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект б…","articleBody":"🤔 Что делает omit?\n\nomit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей. \n\nВ JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce(). \n\nРеализация omit с Object.fromEntries() (современный способ)\nfunction omit(obj, keys) {\n return Object.fromEntries(\n Object.entries(obj).filter(([key]) => !keys.includes(key))\n );\n}\n\nconst user = { name: \"Alice\", age: 25, password: \"123456\" };\nconst safeUser = omit(user, [\"password\"]); \n\nconsole.log(safeUser); // { name: \"Alice\", age: 25 }\n\nРеализация omit с reduce() (альтернативный способ)\nfunction omit(obj, keys) {\n return Object.keys(obj).reduce((acc, key) => {\n if (!keys.includes(key)) acc[key] = obj[key];\n return acc;\n }, {});\n}\n\nconst data = { a: 1, b: 2, c: 3 };\nconsole.log(omit(data, [\"b\"])); // { a: 1, c: 3 }\n\nЕсли используете Lodash, можно просто вызвать \nimport { omit } from \"lodash\";\n\nconst user = { name: \"Alice\", age: 25, password: \"123456\" };\nconst safeUser = omit(user, [\"password\"]);\n\nconsole.log(safeUser); // { name: \"Alice\", age: 25 }\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-09T09:05:38Z","dateModified":"2026-03-09T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2463},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2448","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2448","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2448","headline":"IT-магистратура ИТМО, МИФИ в партнёрстве с Яндексом Освойте высокооплачиваемую IT-профессию. Актуальные прогр…","articleBody":"IT-магистратура ИТМО, МИФИ в партнёрстве с Яндексом\n\nОсвойте высокооплачиваемую IT-профессию. Актуальные программы ИТМО и МФТИ 2026 года, диплом гособразца, много практики от Яндекса. Гибкий график, обучение полностью онлайн, господдержка оплаты, отсрочка от армии \n\nУзнать больше\n\n#реклама 16+\npracticum.yandex.ru\nО рекламодателе","datePublished":"2026-03-08T23:15:36Z","dateModified":"2026-03-10T21:27:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/5291825864377048243?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1540}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2447","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2447","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2447","headline":"🤔 Что известно о жизненном цикле компонента Vue? Жизненный цикл включает этапы: инициализация (создание и нас…","articleBody":"🤔 Что известно о жизненном цикле компонента Vue? \n\nЖизненный цикл включает этапы: инициализация (создание и настройка компонента), монтирование (рендеринг в DOM), обновление (перерисовка при изменении данных) и уничтожение (удаление из DOM). Методы жизненного цикла (mounted, updated, destroyed) позволяют выполнять действия на каждом этапе.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-08T16:10:38Z","dateModified":"2026-03-08T16:10:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2166},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2446","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2446","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2446","headline":"🤔 Как общаться между iframe и самой страницой? Общение между iframe и родительской страницей может происходит…","articleBody":"🤔 Как общаться между iframe и самой страницой?\n\nОбщение между iframe и родительской страницей может происходить с помощью: \nМетода postMessage (лучший способ) \nДоступа к window.frames или window.parent (если тот же домен) \nПередачи данных через localStorage или cookies \n\n🟠`postMessage` – безопасный способ для разных доменов \nМетод window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах.\n\n🚩Передача данных из `iframe` в родительскую страницу \n\n*Код в iframe (child.html) \n// Отправляем сообщение родительскому окну\nwindow.parent.postMessage({ type: \"hello\", data: \"Привет, родитель!\" }, \"*\");\n\nКод в родительской странице (index.html) \nwindow.addEventListener(\"message\", (event) => {\n console.log(\"Получено сообщение от iframe:\", event.data);\n});\n\n* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например: \nwindow.parent.postMessage({ type: \"hello\" }, \"https://example.com\");\n\n🚩Передача данных из родителя в `iframe` \n\nКод в родительской странице (index.html) \nconst iframe = document.getElementById(\"myIframe\");\n\n// Ждём, когда iframe загрузится\niframe.onload = () => {\n iframe.contentWindow.postMessage({ type: \"greeting\", data: \"Привет, iframe!\" }, \"*\");\n};\n\nКод в iframe (child.html) \nwindow.addEventListener(\"message\", (event) => {\n console.log(\"Получено сообщение от родителя:\", event.data);\n});\n\n🚩Доступ к `window.frames` и `window.parent` (только если тот же домен!) \n\nЕсли iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую.\nРодительская страница → iframe \nconst iframe = document.getElementById(\"myIframe\");\n\n// Получаем объект `window` внутри `iframe`\niframe.contentWindow.document.body.style.backgroundColor = \"lightblue\";\n\niframe → Родительская страница \nconsole.log(window.parent.document.title); // Доступ к заголовку страницы\n\n🚩`localStorage` или `cookies` (если оба окна на одном домене) \n\nМожно сохранять данные в localStorage или cookies, а другая сторона будет их читать. \nЗапись в localStorage из iframe \nlocalStorage.setItem(\"message\", \"Привет от iframe!\");\n\nЧтение localStorage в родительской странице \nconsole.log(localStorage.getItem(\"message\")); // \"Привет от iframe!\"\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-08T09:05:38Z","dateModified":"2026-03-08T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2243},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}}]}

17 430

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

17 430

🤔 Почему 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); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")

В объекте {}

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа

🟠`Map` не имеет проблем с прототипами В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.

const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)

Чтобы обойти это, приходится делать так

const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"

В Map таких проблем нет

const map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)

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

17 430

Бесплатный курс: веб-дизайн, графика, интерфейсы Научись создавать дизайн сайтов и приложений, инфографику для карточек на маркетплейсах и работать в Figma! Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰 Этот курс для тебя, если ты: ✅ мечтаешь о новой профессии, но не знаешь, с чего начать; ✅ чувствуешь, что хочешь большего — свободы, самореализации, творчества; ✅ полный новичок и хочешь систему, а не хаос; ✅ хочешь начать зарабатывать удалённо. Зарегистрироваться #реклама 16+ ydaev.ru О рекламодателе

17 430

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

17 430

🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В 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, setMessages] = useState([]);

  const sendMessage = (text) => {
    setMessages([...messages, { text, id: Date.now() }]);
  };

  return (
    <ChatContext.Provider value={{ messages, sendMessage }}>
      {children}
    </ChatContext.Provider>
  );
}

function ChatList() {
  const { messages } = useContext(ChatContext);
  return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
  const { sendMessage } = useContext(ChatContext);
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      onKeyPress={(e) => {
        if (e.key === "Enter") {
          sendMessage(text);
          setText("");
        }
      }}
    />
  );
}

🚩Зависит ли состояние от URL (адресной строки)? Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path). ID открытого товара: /products/123 Фильтры товаров: /shop?category=shoes&sort=price Страница чата с пользователем: /chat?user=ivan Ставь 👍 и забирай 📚 Базу знаний

17 430

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

17 430

Бесплатный онлайн-марафон для руководителей Два дня практических онлайн-встреч с топ-экспертами в области управления — на них расскажем, как выстроить слаженную работу сотрудников и забыть о хаосе с помощью автоматизации. Спикеры Битрикс24, SETTERS EDUCATION, «ВкусВилл» и Максим Батырев расскажут: — как обеспечить рост команды без регламентов и ручного управления — как мотивировать сотрудников и давать обратную связь — как управлять большим потоком задач и контролировать их выполнение — как выстраивать эффективную коммуникацию с командой Бонусы для всех участников: — чек-лист: «Как обезопасить команду от кибермошенников?» — бесплатная консультация по автоматизации командной работы Бесплатно. 17–18 марта. Подробная программа мероприятия и регистрация — на сайте. Узнать больше #реклама 16+ marathon.bitrix24.works О рекламодателе

17 430

Найти работу фронтендера трудно? Ты просто не там ищешь! @job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑‍💻

17 430

Яндекс Практикум: 8 суперсил Руководителя - бесплатно Пройдите бесплатный интенсив Руководитель будущего от Яндекс Практикума и соберите 8 ключевых суперсил современного лидера. Каждый день — одно практическое задание в Telegram-боте, всего 20 минут. Вас ждут кейсы и опыт экспертов из Яндекса, Ozon, СберЗдоровья и других компаний. Прокачайте: - ИИ - Антихрупкость - Мышление роста - Навыки саморазвития - Работа с поколениями - Эффективная обратная связь - Кризисное лидерство - Биохакинг Подойдёт специалистам и действующим руководителям, готовым к новому уровню. Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

17 430

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

17 430

🤔 Является ли, 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). Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend. Ставь 👍 и забирай 📚 Базу знаний

17 430

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

17 430

🤔 Расскажи про операторы сравнения Операторы сравнения в 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); // true
console.log(null >= 0); // true
console.log(null > 0);  // false (WTF?)

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

17 430

Покупайте Samsung Galaxy A серию на Яндекс Маркете Узнать больше #реклама market.yandex.ru О рекламодателе

17 430

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

17 430

🤔 Что делает 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 }

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

17 430

IT-магистратура ИТМО, МИФИ в партнёрстве с Яндексом Освойте высокооплачиваемую IT-профессию. Актуальные программы ИТМО и МФТИ 2026 года, диплом гособразца, много практики от Яндекса. Гибкий график, обучение полностью онлайн, господдержка оплаты, отсрочка от армии Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

17 430

🤔 Что известно о жизненном цикле компонента Vue? Жизненный цикл включает этапы: инициализация (создание и настройка компонента), монтирование (рендеринг в DOM), обновление (перерисовка при изменении данных) и уничтожение (удаление из DOM). Методы жизненного цикла (mounted, updated, destroyed) позволяют выполнять действия на каждом этапе. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 430

🤔 Как общаться между iframe и самой страницой? Общение между iframe и родительской страницей может происходить с помощью: Метода postMessage (лучший способ) Доступа к window.frames или window.parent (если тот же домен) Передачи данных через localStorage или cookies 🟠`postMessage` – безопасный способ для разных доменов Метод window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах. 🚩Передача данных из `iframe` в родительскую страницу *Код в iframe (child.html)

// Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");

Код в родительской странице (index.html)

window.addEventListener("message", (event) => {
    console.log("Получено сообщение от iframe:", event.data);
});

* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например:

window.parent.postMessage({ type: "hello" }, "https://example.com");

🚩Передача данных из родителя в `iframe` Код в родительской странице (index.html)

const iframe = document.getElementById("myIframe");

// Ждём, когда iframe загрузится
iframe.onload = () => {
    iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};

Код в iframe (child.html)

window.addEventListener("message", (event) => {
    console.log("Получено сообщение от родителя:", event.data);
});

🚩Доступ к `window.frames` и `window.parent` (только если тот же домен!) Если iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую. Родительская страница → iframe

const iframe = document.getElementById("myIframe");

// Получаем объект `window` внутри `iframe`
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";

iframe → Родительская страница

console.log(window.parent.document.title); // Доступ к заголовку страницы

🚩`localStorage` или `cookies` (если оба окна на одном домене) Можно сохранять данные в localStorage или cookies, а другая сторона будет их читать. Запись в localStorage из iframe

localStorage.setItem("message", "Привет от iframe!");

Чтение localStorage в родительской странице

console.log(localStorage.getItem("message")); // "Привет от iframe!"

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