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

Ir al canal en Telegram

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

Red:easyoffer Rusia36 827 Tecnologías y Aplicaciones7 139...

📈 Análisis del canal de Telegram Frontend | Вопросы собесов

El canal Frontend | Вопросы собесов (@easy_javascript_ru) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 17 871 suscriptores, ocupando la posición 7 139 en la categoría Tecnologías y Aplicaciones y el puesto 36 827 en la región Rusia.

📊 Métricas de audiencia y dinámica

Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 17 871 suscriptores.

Según los últimos datos del 28 agosto, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -168, y en las últimas 24 horas de -6, conservando un alto alcance.

Estado de verificación: No verificado
Tasa de interacción (ER): El promedio de interacción de la audiencia es 6.72%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 4.47% de reacciones respecto al total de suscriptores.
Alcance de las publicaciones: Cada publicación recibe en promedio 1 201 visualizaciones. En el primer día suele acumular 799 visualizaciones.
Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 4.
Intereses temáticos: El contenido se centra en temas clave como ставь, браузер, html, border, flex.

📝 Descripción y política de contenido

El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv”

Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 29 agosto, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.

17 871

Suscriptores

-624 horas

-457 días

-16830 días

1 201

Visitas de la publicación

~ 79924 horas

~ 90248 horas

6.72%

Tasa de compromiso

~ 3

Mensajes por día

Ads index

beta

Archivo de publicaciones

\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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2453","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2453","mainEntityOfPage":"https://telemetr.io/es/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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2452","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2452","mainEntityOfPage":"https://telemetr.io/es/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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2451","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2451","mainEntityOfPage":"https://telemetr.io/es/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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2450","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2450","mainEntityOfPage":"https://telemetr.io/es/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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2449","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2449","mainEntityOfPage":"https://telemetr.io/es/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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2448","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2448","mainEntityOfPage":"https://telemetr.io/es/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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2447","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2447","mainEntityOfPage":"https://telemetr.io/es/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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2446","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2446","mainEntityOfPage":"https://telemetr.io/es/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/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2445","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2445","mainEntityOfPage":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru/posts/2445","headline":"🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так…","articleBody":"🤔 В каком случае важен порядок: при копировании объекта или массива?\n\n- Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура).\n- Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-07T16:10:39Z","dateModified":"2026-03-07T16:10:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/es/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1878},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}}]}

17 867

🤔 Почему 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 867

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

17 867

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

17 867

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

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

17 867

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

17 867

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

17 867

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

17 867

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

17 867

🤔 Является ли, 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 867

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

17 867

🤔 Расскажи про операторы сравнения Операторы сравнения в 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 867

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

17 867

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

17 867

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

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

17 867

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

17 867

🤔 Как общаться между 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!"

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

17 867

🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура). - Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний