LearnJS — русскоязычный учебник, от базовых понятий до продвинутых тем чтобы освоить JS!

Удобные объяснения, примеры кода, интерактивные задания помогут прокачать навыки как новичкам, так и опытным разработчикам.

📌 Оставляю ссылочку: learnjs.ru

📣 JS Ready | #сайт

Группировка данных по ключу!

При работе с табличными данными, API-ответами или логами часто нужно группировать записи по определённому признаку — роли, категории, дате.

Исходный массив объектов — типичный кейс из API:


const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
  { name: "Eve", role: "admin" },
];



Используем reduce как агрегатор. В одну строку — и читаемо, и производительно:


const grouped = users.reduce((acc, u) => {
  (acc[u.role] ||= []).push(u);
  return acc;
}, {});



Теперь grouped.admin и grouped.user содержат списки пользователей по ролям. Получить нужную подгруппу — просто:


console.log(grouped["user"]); // [{ name: "Bob", role: "user" }]



🔥 Такой приём универсален для списков любых сущностей — от заказов до логов, и легко адаптируется под бизнес-логику.

📣 JS Ready | #практика

👍 30 Seconds of Code — это коллекция полезных JS-сниппетов!

От сортировок и форматирования даты до уникальных хаков с массивами и объектами — всё в одном месте. Подходит как шпаргалка и как источник решений для повседневных задач. Каждый сниппет объяснён и готов к применению.

Оставляю ссылочку: GitHub 📱

📣 JS Ready | #репозиторий

JavaScript info — целый учебник по современному JavaScript. От основ до глубинных тем вроде области видимости, классов и прототипов.

📌 Оставляю ссылочку: javascript.info

📣 JS Ready | #сайт

Своя система событий (EventBus) на ООП!

Создаём базу для общения компонентов в приложении. Начнем с простого класса:

class EventBus {
  constructor() {
    this.events = {};
  }
}

Теперь добавим метод .on() — подписка на событие:

on(event, cb) {
  (this.events[event] ||= []).push(cb);
}

Далее .emit() — запуск всех подписчиков:

emit(event, data) {
  (this.events[event] || []).forEach(cb => cb(data));
}

Проверим, как это работает на практике:

const bus = new EventBus();
bus.on('ping', msg => console.log('Получено:', msg));
bus.emit('ping', 'Привет!');

🔥 Мини-фреймворк готов! Теперь ты можешь строить масштабируемые интерфейсы с чистой архитектурой.

📣 JS Ready | #практика

JSDares — это игровая платформа с открытым исходным кодом, где вы получаете задания от сообщества, которые вам нужно решить.

📌 Оставляю ссылочку: jsdares.com

📣 JS Ready | #игра