Что учить, чтобы выучить JavaScript

Список задач для изучения JavaScript кажется достаточно объемным. К сожалению, для того, чтобы перейти к изучению React, нужно прорешать задачи на все темы из этого списка. Объясню, для чего нужна каждая тема.

Массивы и объекты

Практические задачи на maxcode.dev

Половина списка задач учит работать с данными в джаваскрипте. Для массивов — необходимо начиться использовать классический for и for-of, а также знать и уметь применять примерно 80% всех методов массива (всего их чуть больше 30). У объектов нет своих методов, но нужно уметь добавлять/удалять/изменять значения по ключу, использовать for-in, а также знать статические методы класса Object.

Задач на эту темы много, потому что методов много. Но и на работе большая часть задач про преобразование данных. Хорошая новость, что это простая часть обучения. Дальше будет больше идейных задач, где придется думать.

Функциональное программирование

Практические задачи на maxcode.dev

Вообще само обучение построено так, что для решения любой задачи нужно написать функцию. Но раздел «Функции» не про это. Здесь разбираются основы функционального программирования, когда функции передаются в качестве аргумента и возвращаются из других функций.

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

Объектно-ориентированное программирование

Практические задачи на maxcode.dev

Эта тема нужна в основном для собеседований. Когда мы будем разбирать реакт, в самом конце мы разберем, как можно писать компоненты на классах. Там понадобятся знания this, __proto__ и prototype. В реакте это будет буквально одно занятие, но тут придется потратить больше времени, чтобы разобраться с цепочками прототипов и определением this.

Рекурсия

Практические задачи на maxcode.dev

Это еще одна сложная тема. Тут сложность в том, что тяжело писать код, потому что пока функция не дописана, ее нельзя проверить, так как для решения она использует саму себя. Опытным путем выяснилось, что 10 задач на рекурсию не хватает, а 20 уже дает понимание темы для большинства студентов.

Рекурсия нам нужна для двух типов задач: последование выполнение асинхронных функций в теме про промисы и построение древовидных UI-элементов (вложенные фильтры и меню) в реакте.

Асинхронное программирование

Практические задачи на maxcode.dev

Тут мы решаем задачки на колбэки и промисы, разбираем, как работает event loop и очереди микро- и макро-тасок. Тема сложная, потому что нужно думать не только, что возвращать из функции, но и когда возвращать. Да еще и возвращаться теперь нельзя с помощью return.

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

Что мы не изучаем

• Генераторы (и асинхронные генераторы) – вряд ли понадобятся на работе, но если понадобятся, то только для определенного редкого стека, например, redux-saga.
• Модули — мы их разберем, когда будем писать на реакте, так как только там подразумевается большое количество файлов.
• Браузерный джаваскрипт — для того, чтобы писать на реакте, не нужно уметь навигироваться по DOM и глубоко знать, как работают события мыши. Работы обычных событий (в том числе всплытие событий) рассмотрим при работе с реактом.
• Fetch — в теме про асинхронность мы не разбираем, как делать http-запросы, а просто решаем кучу задач на промисы и колбэки. Fetch, запросы к бэкенду и CORS рассмотрим уже на практике, когда будем писать приложения на реакте.
• Прокси-объекты – вам не понадобятся. Когда понадобятся — вы будете способны их сами разобрать. Аналогично про рефлексию, тем более серьезной рефлексии в JS нет.