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

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

Открыть в Telegram

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

Больше
easyofferСеть:easyofferРоссия36 945Технологии и приложения7 153

📈 Аналитический обзор Telegram-канала Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 17 725 подписчиков, занимая 7 153 место в категории Технологии и приложения и 36 945 место в регионе Россия.

📊 Показатели аудитории и динамика

С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 17 725 подписчиков.

Согласно последним данным от 15 сентября, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -229, а за последние 24 часа — -9, при этом общий охват остаётся высоким.

  • Статус верификации: Не верифицирован
  • Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 5.95%. В первые 24 часа после публикации контент обычно набирает 4.54% реакций от общего числа подписчиков.
  • Охват публикаций: В среднем каждый пост получает 1 054 просмотров. В течение первых суток публикация набирает 804 просмотров.
  • Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 4.
  • Тематические интересы: Контент сосредоточен на ключевых темах, таких как ставь, браузер, html, border, flex.

📝 Описание и контентная политика

Автор описывает ресурс как площадку для выражения субъективного мнения:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv”

Благодаря высокой частоте обновлений (последние данные получены 16 сентября, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.

17 725
Подписчики
-924 часа
-457 дней
-22930 дней

Загрузка данных...

Похожие каналы
FrontEndDev
25.9K
FrontEndDev
React Job | JavaScript | Вакансии
16.1K
React Job | JavaScript | Вакансии
Frontend Interview - собеседования по Javascript / Html / Css
10.5K
Frontend Interview - собеседования по Javascript / Html / Css
HTML Academy
9.6K
HTML Academy
progway — программирование, IT
2.6K
progway — программирование, IT
avatar
1
Больше каналов
Облако тегов
ставь82
браузер56
html46
border35
flex34
javascript32
await26
css26
строка22
dom21
async20
div20
false19
radius17
url17
tostring16
тег16
контекст15
input14
загрузка14
Входящие и исходящие упоминания
---
---
---
---
---
---
Привлечение подписчиков
сентябрь '26
сентябрь '26
+5
в 0 каналах
август '26
+28
в 0 каналах
Get PRO
июль '26
+29
в 0 каналах
Get PRO
июнь '26
+26
в 2 каналах
Get PRO
май '26
+41
в 0 каналах
Get PRO
апрель '26
+28
в 0 каналах
Get PRO
март '26
+28
в 0 каналах
Get PRO
февраль '26
+42
в 0 каналах
Get PRO
январь '26
+97
в 1 каналах
Get PRO
декабрь '25
+15
в 2 каналах
Get PRO
ноябрь '25
+120
в 0 каналах
Get PRO
октябрь '25
+89
в 0 каналах
Get PRO
сентябрь '25
+55
в 0 каналах
Get PRO
август '25
+65
в 0 каналах
Get PRO
июль '25
+98
в 0 каналах
Get PRO
июнь '25
+103
в 2 каналах
Get PRO
май '25
+121
в 2 каналах
Get PRO
апрель '25
+171
в 0 каналах
Get PRO
март '25
+162
в 5 каналах
Get PRO
февраль '25
+359
в 5 каналах
Get PRO
январь '25
+531
в 53 каналах
Get PRO
декабрь '24
+285
в 1 каналах
Get PRO
ноябрь '24
+539
в 0 каналах
Get PRO
октябрь '24
+1 456
в 46 каналах
Get PRO
сентябрь '24
+2 372
в 275 каналах
Get PRO
август '24
+742
в 0 каналах
Get PRO
июль '24
+855
в 54 каналах
Get PRO
июнь '24
+3 780
в 245 каналах
Get PRO
май '24
+3 174
в 224 каналах
Get PRO
апрель '24
+2 890
в 69 каналах
Get PRO
март '24
+2 687
в 48 каналах
Get PRO
февраль '24
+3 294
в 32 каналах
Дата
Привлечение подписчиков
Упоминания
Каналы
16 сентября0
15 сентября+1
14 сентября0
13 сентября0
12 сентября0
11 сентября0
10 сентября0
09 сентября+2
08 сентября+2
07 сентября0
06 сентября0
05 сентября0
04 сентября0
03 сентября0
02 сентября0
01 сентября0
Посты канала
Frontend | Вопросы собесов
🤔 Чем var отличается от const ? Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🚩Область видимости (Scope) 🟠Var Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. 🟠Const Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🚩Переназначение и изменение 🟠Var Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. 🟠Const Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🚩Поднятие (Hoisting) 🟠Var Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. 🟠Const Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🚩Инициализация 🟠Var Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. 🟠Const Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке. 
var varVariable = 1;
varVariable = 2; // Переназначение возможно
const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку
if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена
Ставь 👍 и забирай 📚 Базу знаний

2
Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-центра в Москве.
Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-центра в Москве. 👍 Лицензированный оператор связи. 👍 Индивидуальные конфигурации выделенных серверов под задачи клиента. 👍 Круглосуточная техническая поддержка в Телеграм, без ботов. Узнать цену #реклама 16+ itsoft.ru О рекламодателе
811
3
🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. 🚩Почему нужен Docker? 🟠Решает проблему "работает у меня, но не у тебя" В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. 🟠Автоматизирует развертывание Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. 🟠Легко масштабировать Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). 🟠Разделяет зависимости Каждое приложение работает в изолированной среде, и конфликты библиотек исключены. 🟠Работает везде (Windows, Mac, Linux, серверы, облако) Контейнер можно запустить где угодно, где установлен Docker. 🚩Как работает Docker? 🟠Создаем `Dockerfile` (инструкция для сборки контейнера) Пример для Node.js-приложения # Базовый образ с Node.js FROM node:18 # Устанавливаем рабочую директорию WORKDIR /app # Копируем файлы проекта COPY package.json ./ RUN npm install COPY . . # Запускаем приложение CMD ["node", "server.js"] Собираем образ Docker (создаем "упакованный" контейнер) docker build -t my-app . Запускаем контейнер docker run -p 3000:3000 my-app Ставь 👍 и забирай 📚 Базу знаний
792
4
Оффер 427 000₽ на руки в Сбер и отказались Оффер 380 000₽ на руки в банк Оффер 6 800$ net с релокацией на Кипр Оффер 4 500$ в
Оффер 427 000₽ на руки в Сбер и отказались Оффер 380 000₽ на руки в банк Оффер 6 800$ net с релокацией на Кипр Оффер 4 500$ в американскую компанию 👆Это недавние результаты участников нашего комьюнити. Меня зовут Тихон - я действующий разработчик и ментор. Уже 2 года я развиваю комьюнити, где 300+ разработчиков, и вместе мы выжимаем из рынка максимум! В нашем канале много ценного для разработчиков по подготовке к собесам👇 Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Как я прохожу собесы: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ 🏆Статистика по рынку: Июль, Июнь, Май, Апрель, Март А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 frontend_punks Реклама, erid: 2W5zFHZ918m ИП Галактионов Тихон Витальевич, ИНН 771618975809
823
5
ЖК Символ. До 30.09: лоты от 18,5 млн/₽ со скидкой 12% ❤️Скидки 12% в готовом для жизни квартале у центра Москвы. Комфортная
ЖК Символ. До 30.09: лоты от 18,5 млн/₽ со скидкой 12% ❤️Скидки 12% в готовом для жизни квартале у центра Москвы. Комфортная рассрочка от застройщика всего 180 тыс/₽ в месяц. 🎓На территории парк 10 га и 150+ открытых объектов инфраструктуры. Кафе, рестораны, медцентры, детский сад, школы, инженерный лицей при МГТУ им. Баумана. 🏠Стильные и просторные квартиры с уникальными видами. Высота потолков до 4,25 м, окна до 3,25 м, угловое остекление. ❤️Клуб резидентов для разных сценариев жизни: лаунж-зоны, фитнес-зал, кинотеатр, коворкинг, детская, репетиторская, террасы на крыше. ✨ Победы в престижных премиях: «Лучший ЖК-новостройка в РФ» (ТОП ЖК 2023), «Лучший реализованный проект» (конкурс Правительства Москвы 2019). Узнать больше Проектная декларация на сайте https://наш.дом.рф/. #реклама mrqz.click О рекламодателе
969
6
🤔 Зачем нужен Docker? Docker позволяет упаковать приложение и все его зависимости в контейнер, обеспечивая одинаковую среду для разработки, тестирования и продакшна. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
1 079
7
🤔 Как изменить стили кнопок с атрибутом disabled? C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled. 🚩Пример использования 🟠Селектора [disabled] Этот селектор выбирает все элементы, у которых присутствует атрибут disabled. button[disabled] { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */ opacity: 0.6; /* Уменьшает непрозрачность */ } 🟠Псевдокласса :disabled Этот селектор выбирает все элементы, которые находятся в состоянии disabled. button:disabled { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } 🚩Полные примеры С HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Disabled Button Styling</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button>Active Button</button> <button disabled>Disabled Button</button> </body> </html> С CSS /* Стили для активных кнопок */ button { background-color: blue; color: white; border: 1px solid #000; padding: 10px 20px; cursor: pointer; } /* Стили для кнопок с атрибутом disabled */ button[disabled] { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } /* Альтернативный способ с использованием псевдокласса :disabled */ button:disabled { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; opacity: 0.6; } 🟠Комбинированный подход Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей. /* Стили для кнопок с классом .special, которые имеют атрибут disabled */ button.special[disabled] { background-color: darkgray; color: black; border: 1px dashed #999; cursor: not-allowed; opacity: 0.7; } Ставь 👍 и забирай 📚 Базу знаний
1 010
8
Сборный груз, который приедет вовремя Собственные поезда и автопарк, доставка до двери. Единый оператор на всем маршруте. Узн
Сборный груз, который приедет вовремя Собственные поезда и автопарк, доставка до двери. Единый оператор на всем маршруте. Узнать цену #реклама lcl.transitllc.ru О рекламодателе
995
9
🤔 Что делает 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 } Ставь 👍 и забирай 📚 Базу знаний
1 168
10
Ищем менеджеров нейросетей, можно без опыта Опыт не нужен. Только телефон. Занятость — 3-6 часов в день. Нужно выполнять зада
Ищем менеджеров нейросетей, можно без опыта Опыт не нужен. Только телефон. Занятость — 3-6 часов в день. Нужно выполнять задачи с помощью нейросетей. Все это вы делаете из дома. Всему обучим на бесплатном курсе и после поможем со стартом. Что вас ждет за 3 дня: ✅ Уроки с практикой по 30 минут ✅ Домашние задания с проверкой и оплатой бонусами ✅ Выплата за каждую выполненную работу 🎓 Все, кто пройдет обучение, получат сертификат от школы с образовательной лицензией. Набор закрывается, как только группа заполнится. Чтобы занять место нажмите "Зарегистрироваться". Зарегистрироваться #реклама 16+ course.neurogansta.ru О рекламодателе
952
11
🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне. 🚩Почему DI полезен? 🟠Уменьшает связность кода (Loose Coupling) Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи. class UserService { constructor() { this.db = new Database(); // Прямо создаем зависимость } getUser(id) { return this.db.findUserById(id); } } С DI (гибкость) class UserService { constructor(db) { this.db = db; // DI передает зависимость извне } getUser(id) { return this.db.findUserById(id); } } // Передаем нужную зависимость const database = new Database(); const userService = new UserService(database); 🟠Улучшает тестируемость (Unit-тесты проще) С DI можно подменять зависимости на заглушки (mock, fake, stub). const userService = new UserService(); // Всегда использует реальную Database userService.getUser(1); // Как протестировать без реальной БД? 🤔 С DI (можно подменить зависимость) class FakeDatabase { findUserById(id) { return { id, name: "Тестовый пользователь" }; } } const fakeDb = new FakeDatabase(); const userService = new UserService(fakeDb); console.log(userService.getUser(1)); // ✅ Тест без реальной БД 🟠Улучшает расширяемость (легко менять зависимости) Допустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase. class UserService { constructor() { this.db = new MySQLDatabase(); // Нужно менять здесь } } С DI (добавляем новую зависимость без изменения кода UserService) const db = new MongoDatabase(); // Просто передаем другую зависимость const userService = new UserService(db); 🟠Упрощает управление зависимостями (через DI-контейнеры) В крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript). import "reflect-metadata"; import { Container, injectable, inject } from "inversify"; @injectable() class Database { findUserById(id) { return { id, name: "База данных" }; } } @injectable() class UserService { constructor(@inject(Database) db) { this.db = db; } getUser(id) { return this.db.findUserById(id); } } // Настраиваем DI-контейнер const container = new Container(); container.bind(Database).toSelf(); container.bind(UserService).toSelf(); // Получаем объект с нужными зависимостями const userService = container.get(UserService); console.log(userService.getUser(1)); Ставь 👍 и забирай 📚 Базу знаний
952
12
Розыгрыш Яндекс Станции уже в боте Любимые блогеры, розыгрыши, новости и анонсы в одном боте! Узнать больше #реклама 16+ refe
Розыгрыш Яндекс Станции уже в боте Любимые блогеры, розыгрыши, новости и анонсы в одном боте! Узнать больше #реклама 16+ refer.id О рекламодателе
825
13
🤔 Что значит type="submit"? Атрибут type="submit" у тега <button> или <input> указывает, что элемент при нажатии должен отправить форму. Он запускает действие, определенное в action формы, и передаёт данные, собранные с полей. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
1 115
14
🤔 Зачем нужен eslint? ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода. 🚩Почему ESLint полезен? Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить. 🚩Проблемы без ESLint Разные стили написания кода Пропущенные точки с запятой или лишние пробелы Неиспользуемые переменные Ошибки, которые не выявляются во время компиляции (например, undefined переменные) 🚩Решение с ESLint: Автоматически находит ошибки и предупреждения Подсказывает лучшие практики Поддерживает кастомные правила Работает в IDE и CI/CD (автоматическая проверка) 🟠Как ESLint работает? ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку. function sayHello(name) { console.log("Hello, " + name) } sayHello("John") Пример исправленного кода (ESLint fix) function sayHello(name) { console.log(`Hello, ${name}`); } sayHello("John"); 🟠Как установить и настроить ESLint? Установка npm install eslint --save-dev Создание конфига npx eslint --init Пример .eslintrc.js (настройки ESLint) module.exports = { env: { browser: true, es6: true, }, extends: [ "eslint:recommended", // Базовые рекомендации "plugin:vue/vue3-recommended" // Рекомендации для Vue ], rules: { "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных "semi": ["error", "always"], // Обязательные точки с запятой "quotes": ["error", "double"], // Только двойные кавычки }, }; Запуск проверки кода npx eslint myfile.js Автоматическое исправление ошибок npx eslint myfile.js --fix 🟠ESLint в IDE (VS Code, WebStorm) Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave" "editor.codeActionsOnSave": { "source.fixAll.eslint": true } 🟠ESLint в CI/CD (автоматическая проверка на сервере) В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку. "scripts": { "lint": "eslint src --fix" } Теперь перед коммитом можно запускать: npm run lint Ставь 👍 и забирай 📚 Базу знаний
1 087
15
🤔 В чём разница между макро- и микро-задачами? Макро-задачи (например, setTimeout, setInterval) выполняются в основном цикле событий после выполнения текущего стека. Микро-задачи (например, Promise, queueMicrotask) имеют более высокий приоритет и выполняются сразу после текущего выполнения кода, до обработки макро-задач. Микро-задачи используются для обработки данных в реальном времени, а макро-задачи — для отложенных действий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
1 139
16
Квартиры. Петербург. Колпино. Новостройка. Скидки до 20% Жилой комплекс "Квартал Заречье" Санкт-Петербург. Колпино. 4 девятиэ
Квартиры. Петербург. Колпино. Новостройка. Скидки до 20% Жилой комплекс "Квартал Заречье" Санкт-Петербург. Колпино. 4 девятиэтажных жилых корпуса 8-этажный крытый гараж на 496 парковочных мест В живописном месте у реки Ижора. На первых этажах будут размещены магазины, кофейни, поликлиника и зона коворкинга. Перейти на сайт Финансовые услуги оказывает: ПАО «Сбербанк». Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО «СЗ «ЗАГОРОДНАЯ, 71». #реклама квартал-заречье.рф О рекламодателе
994
17
🤔 Как происходит tostring? Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. 🟠toString() у примитивов Числа, строки, булевы значения, null, undefined Для примитивных типов toString() работает просто — возвращает строковое представление значения: console.log((123).toString()); // "123" console.log(true.toString()); // "true" console.log(false.toString()); // "false" console.log((3.14).toString()); // "3.14" Но null и undefined не имеют метода toString() и вызов приведёт к ошибке console.log(null.toString()); // ❌ Ошибка: Cannot read properties of null console.log(undefined.toString()); // ❌ Ошибка Поэтому для них лучше использовать String() console.log(String(null)); // "null" console.log(String(undefined)); // "undefined" 🟠toString() у массивов Для массивов toString() преобразует их в строку, разделяя элементы запятой console.log([1, 2, 3].toString()); // "1,2,3" console.log(["яблоко", "банан"].toString()); // "яблоко,банан" console.log([].toString()); // "" (пустая строка) 🟠`toString()` у объектов По умолчанию метод toString() у объекта возвращает строку вида [object Object] const obj = { a: 1, b: 2 }; console.log(obj.toString()); // "[object Object]" Если нужно другое поведение, можно переопределить toString() в объекте const user = { name: "Иван", age: 30, toString() { return `Имя: ${this.name}, Возраст: ${this.age}`; } }; console.log(user.toString()); // "Имя: Иван, Возраст: 30" 🟠`toString()` у классов Можно переопределять метод toString() в классах class Person { constructor(name, age) { this.name = name; this.age = age; } toString() { return `${this.name} (${this.age} лет)`; } } const person = new Person("Анна", 25); console.log(person.toString()); // "Анна (25 лет)" 🟠`toString()` у функций Функции тоже имеют метод toString(), но он возвращает их исходный код function hello() { return "Привет!"; } console.log(hello.toString()); // "function hello() { return 'Привет!'; }" Для стрелочных функций const sum = (a, b) => a + b; console.log(sum.toString()); // "(a, b) => a + b" 🟠Использование `String()` вместо `.toString()` Лучше использовать String(значение), потому что toString() не работает на null и undefined console.log(String(null)); // "null" console.log(String(undefined)); // "undefined" console.log(String(42)); // "42" console.log(String({ a: 1 })); // "[object Object]" Ставь 👍 и забирай 📚 Базу знаний
1 046
18
Новые авто из Китая под заказ без скрытых расходов Привезем новое авто из Китая под ключ без ожидания 180 дней. Подберем за м
Новые авто из Китая под заказ без скрытых расходов Привезем новое авто из Китая под ключ без ожидания 180 дней. Подберем за минуту! Узнать больше #реклама mrqz.me О рекламодателе
821
19
🤔 Где писать запросы к серверу? Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода. 🚩Использование хуков useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах. import React, { useState, useEffect } from 'react'; function DataFetchingComponent() { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); const result = await response.json(); setData(result); } catch (error) { console.error('Error fetching data:', error); } }; fetchData(); }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента return ( <div> {data ? ( <pre>{JSON.stringify(data, null, 2)}</pre> ) : ( <p>Loading data...</p> )} </div> ); } export default DataFetchingComponent; 🚩Методы жизненного цикла в классовых компонентах Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента. import React, { Component } from 'react'; class DataFetchingComponent extends Component { constructor(props) { super(props); this.state = { data: null, }; } componentDidMount() { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { this.setState({ data }); }) .catch(error => { console.error('Error fetching data:', error); }); } render() { const { data } = this.state; return ( <div> {data ? ( <pre>{JSON.stringify(data, null, 2)}</pre> ) : ( <p>Loading data...</p> )} </div> ); } } export default DataFetchingComponent; 🟠Сервисы или утилиты Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым. service.js export async function fetchData() { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); } DataFetchingComponent.js import React, { useState, useEffect } from 'react'; import { fetchData } from './service'; function DataFetchingComponent() { const [data, setData] = useState(null); useEffect(() => { fetchData() .then(data => setData(data)) .catch(error => console.error('Error fetching data:', error)); }, []); return ( <div> {data ? ( <pre>{JSON.stringify(data, null, 2)}</pre> ) : ( <p>Loading data...</p> )} </div> ); } export default DataFetchingComponent; 🟠Управление состоянием Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX. Ставь 👍 и забирай 📚 Базу знаний
974
20
IT-инфраструктура под ключ с поддержкой Yandex Cloud Спроектируем, запустим и возьмём на сопровождение. Экспертиза целой кома+4
IT-инфраструктура под ключ с поддержкой Yandex Cloud Спроектируем, запустим и возьмём на сопровождение. Экспертиза целой команды без найма в штат. 💰Новым клиентам — грант на облачные сервисы, платите только за работу специалистов. Оставьте заявку на сайте: подберём партнёра и рассчитаем стоимость. Получить консультацию #реклама 16+ yandex.cloud О рекламодателе
855
Посмотреть все записи