Как стать Front-end разработчиком? #6 Продвинутый JavaScript

Вы уже многое изучили и наметили план своего профессионального развития - так держать! Сегодня пришло время углубиться в детали языка JavaScript.

Как уже было сказано в статье “Основы JavaScript” - Стандартом языка JS является EcmaScript. Это важно знать для того, чтобы ориентироваться в версиях и новых фичах языка.

Когда я пишу EcmaScript 6+, я имею ввиду 6 версию и последующие - 7, 8 ...

Не все фичи новых версий языка EcmaScript6+ поддерживаются браузерами, поэтому для их использования потребуются полифилы или траспайлер, преобразующие код в поддерживаемую браузерами версию.

При разработке с использованием фреймворков вроде React, Vue, Angular и рекомендуемыми способами их установки большинство фич нового поколения EcmaScript доступно из коробки, так как код автоматически преобразовывается в поддерживаемую версию “под капотом”. (Больше о фреймворках и транспайлерах в будущих статьях.)

Чтобы проверить, какие функции без преобразований поддерживают браузеры, рекомендую использовать сайт Caniuse вписав название функции в строку поиска.

Ключевые темы для изучения

“Стабильный” JS поддерживаемый всеми браузерами (EcmaScript 5)

• Замыкания (closures), область видимости (scope) и хостинг (hoisting)

• Функции (functions)

  • Чистые функции
  • Функции первого класса
  • Функции высшего порядка
• Понятие синхронности и асинхронности кода
• Колбеки (callbacks)
• Ключевое слово this
• call, apply, bind
• Прототипы (Prototypes)
• Объектно ориентированное программирование в JS (OOP)
• Наследование в прототипном и функциональном стиле
• Тестирование кода

Инструменты из “следующего” поколения JS (EcmaScript 6+)

• Объявление переменной через let и const
• Модульность - export и import
• Деструктуризация (Destructuring) массивов и объектов
• Методы работы с массивами (map, forEach, reduce, filter, find, every, some)
• Стрелочная функция (arrow function) и поведение ключевого слова this внутри неё
• Классы и наследование
• Промисы для написания асинхронного кода (Promises)
• Асинхронный код - async/await
• Генераторы и итераторы

Тем достаточно много, но прошу не пугаться, в этом и есть смысл! Взять неподъемный, на первый взгляд, пласт информации, разбить его на маленькие сегменты и методично осваивать их один за другим. Так вы будете видеть результаты того, что изучаете и постоянно что-то пробовать на практике. Это и есть ключ к освоению больших объемов материала.

Я планирую создать курс изучения JavaScript с подробным разбором каждой из тем. Подписывайтесь на рассылку чтобы не пропустить!

План действий

Разобравшись на своем опыте в том, как лучше действовать, я настоятельно рекомендую вам изучать JS сегментарно, по темам:

1. Выберите тему (я постарался разбить их уже в правильном для изучения порядке, советую брать поочередно) - используйте гугл, на этапе обучения это ваш лучший помощник. С данным списком тем сформулировать запрос в поиске не составит проблем.
2. Читайте теорию и используйте изученное на практике используя интерактивную платформу вроде Free code camp.
3. Параллельно читайте о выбранной теме в learn.javascript.ru.
4. Если то, что вы изучаете в данный момент затрагивает другие темы и непонятные вам вещи - смело гуглите чтобы ознакомиться с этим либо смотрите в учебнике.
5. Не стесняйтесь открыть простую песочницу вроде jsbin.com и написать там пару функций, вывести что-то в консоль, поломать голову над тем, почему то, что вы написали, не работает.
6. Если чувствуете в себе силы, решайте задачки на сторонних сервисах вроде codewars (не ищите готовых ответов, а ищите информацию, которая может вам помочь в решении задачи).

Ресурсы изучения

Ресурсы остаются теми же, как в статье “Основы JavaScript”, плюс гугл в вашем распоряжении. Как только что-то не понятно - гуглите , затем открывайте песочницу и пробуйте написать простой код.

Послесловие

Это уже достаточно серьезный уровень изучения, не сдавайтесь если что-то не получается. Если вы хотите проверить на что вы способны и вам интересно развиваться в выбранном направлении - проявите упорство и ваши усилия окупятся!