Koddo
начать бесплатно
практикум · JavaScript

Современный JavaScript

Напишешь обработку заказов, рейтинг фильмов и секундомер. Закрепишь современный синтаксис, замыкания, классы и асинхронные операции.

Для старта: Знаешь функции, условия, циклы, массивы, объекты и область видимости переменных

  • JavaScript
  • 5 модулей
  • 25 задач
  • 5 задач бесплатно
начать бесплатно посмотреть программу

После регистрации откроется программа этого пути.

результаты практики

что освоишь на практике

Автор программы:
  • Деструктурировать объекты и массивы с значениями по умолчанию
  • Сливать данные через spread, не затирая заполненные поля
  • Строить конвейеры map/filter/reduce с явным начальным значением
подробнее о пути и навыках

что получится

25 задач на пять паков современного JavaScript: деструктуризация и spread, конвейеры массивов, замыкания и модули, классы и прототипы, основы промисов. Соберёшь сводку заказа деструктуризацией аргумента, отранжируешь фильмы через filter→sort с алфавитным тай-брейком, напишешь rate-limiter на замыкании и класс секундомера с паузой. В последнем паке дождёшься профиль и статистику дашборда параллельно через Promise.all вместо последовательных await.

Для кого

Для тех, кто уже писал var/function-объявления и хочет перейти на синтаксис, который встречается в реальном коде: деструктуризацию, стрелочные функции, классы, async/await. Уровень входа medium — задачи не объясняют базовый JavaScript заново, а показывают, где именно в проде используется каждая конструкция ES6+.

  • Уметь объявлять функции и работать с условиями, циклами, массивами и объектами
  • Понимать область видимости переменных и синхронный порядок выполнения кода

что ещё отработаешь

  • Хранить приватное состояние в замыканиях и модульном паттерне
  • Писать классы с геттерами, наследованием через extends и super
  • Дожидаться async-операций через await и запускать их параллельно Promise.all
  • Повторять сетевой запрос при неуспехе и собирать шаги миграции по порядку
программа

программа пути

Выбирай тему, которую хочешь закрепить. Задачи самостоятельны: каждую можно решить отдельно.

25 задач · 5 модулей
1.1
Сводка заказа
Достаньте поля заказа деструктуризацией аргумента и соберите строку-сводку для витрины магазина
1.2
Строка товара со склада
Достаньте поля товара деструктуризацией аргумента и подставьте значения по умолчанию для количества и единицы измерения
1.3
Слияние правок профиля
Наложите правки на профиль через spread так, чтобы пустые (undefined) поля формы не затирали сохранённые значения
1.4
Голова и хвост очереди печати
Разбейте очередь печати на первый документ и остаток с помощью деструктуризации массива и rest-элемента
1.5
Сборка события аналитики
Соберите полезную нагрузку аналитического события из готовых хелперов: умолчания и дедупликация тегов плюс дополнительные поля через spread
2.1
Топ фильмов по рейтингу
Отберите фильмы с рейтингом не ниже порога и верните их названия, отсортированные по убыванию рейтинга с алфавитным tie-break
2.2
Сумма корзины
Сверните позиции корзины в итоговую стоимость в копейках через reduce с явным начальным значением 0
2.3
Товары по категориям
Сгруппируйте названия товаров по категориям через reduce в объект «категория → список названий», начиная с пустого {}
2.4
Адреса активных подписчиков
Соберите email активных подписчиков рассылки: реализуйте предикат активности и выборку адреса, склейку filter→map даёт готовый верх
2.5
Баланс по выписке
Постройте массив промежуточных балансов после каждой операции выписки, опираясь на готовые signOf и applyEntry
3.1
Счётчик показов баннера
Соберите фабрику счётчиков на замыкании: функция помнит своё значение между вызовами, а разные счётчики не делят состояние
3.2
Однократная инициализация
Оберните функцию замыканием так, чтобы она сработала лишь при первом вызове, а дальше всегда возвращала закэшированный результат
3.3
Ограничитель частоты запросов
Соберите rate-limiter на замыкании поверх готовой проверки withinLimit: первые max запросов проходят, остальные отбиваются
3.4
Переводчик по словарю
Допишите помощников lookup и hasKey для переводчика-замыкания: известный ключ переводится, незнакомый возвращается сам собой
3.5
Банковский счёт с приватным балансом
Соберите модуль-счёт на замыкании поверх готовых операций: deposit/withdraw/getBalance при приватном балансе, к которому нет прямого доступа
4.1
Показание термометра
Ваш первый класс: показание погодной станции хранит температуру в цельсиях, отдаёт её в фаренгейтах через геттер и отвечает, заморозок ли это
4.2
Таймер с паузой
Класс с изменяемым состоянием: секундомер тренировки, который тикает только когда запущен, ставится на паузу и продолжает с того же места
4.3
Музыкальный плейлист
Дописать класс плейлиста: метод add возвращает сам плейлист для цепочки вызовов, а геттер totalSeconds считает суммарную длительность через reduce
4.4
Накопительная цель
Наследование на практике: подкласс копилки расширяет готовый счёт через extends и super, добавляя цель, признак достижения и остаток до неё
4.5
Площадь прямоугольника
Полиморфизм в действии: подкласс фигуры переопределяет area(), а унаследованный describe() сам подхватывает новую формулу площади
5.1
Имя пользователя из профиля
Дождитесь ответа загрузчика профиля через await и соберите полное имя пользователя для шапки личного кабинета
5.2
Повтор запроса один раз
Дайте сетевой операции второй шанс: при неуспехе повторите её ровно один раз и верните результат повтора
5.3
Сумма котировок поставщиков
Дождитесь всех котировок цен разом через Promise.all и сложите их в итоговую стоимость закупки
5.4
Шаги миграции по порядку
Прогоните асинхронные шаги строго один за другим через for-of и await и соберите их результаты в массив
5.5
Сборка дашборда из двух запросов
Загрузите профиль и статистику параллельно через Promise.all и соберите из них модель дашборда для главного экрана
доступ к полной программе Платные модули этого пути входят в Premium. Условия подписки можно посмотреть на странице тарифов. от 490 ₽ / мес посмотреть тарифы первые 5 задач — бесплатно, без карты
первый шаг в этом пути

начни с задачи «Сводка заказа»

После регистрации откроется путь «Современный JavaScript». Выбери модуль «Деструктуризация и spread»: редактор и проверка доступны на странице задачи.

5 задач бесплатно

начать бесплатно

После регистрации откроется программа этого пути.

другие пути на этом языке
куда дальше

Другие пути

Все пути