Разработка на JavaScript с нуля в 2022 году: дорожная карта
Чтобы обучение программированию на JavaScript с нуля было простым и понятным, воспользуйтесь нашей дорожной картой.
58К открытий63К показов
Чтобы сделать обучение программированию на JavaScript с нуля простым и понятным, составили для вас дорожную карту:
Роадмап по изучению JavaScript разделён на следующие блоки:
Разберём каждый из блоков более подробно.
Основы JavaScript
Как и любой язык программирования, JavaScript начинается с базовых знаний, таких как понимание переменных, операторов, типов данных, функций, циклов и т. д.
Синтаксис
JavaScript позаимствовал большую часть синтаксиса из языка Java, но влияние на него оказали и Python, Perl, Awk. Язык JavaScript чувствителен к регистру и использует кодировку символов Unicode.
var, let и const
Для создания переменной в JS часто используется ключевое слово let
. Эта директива позволяет объявить локальную переменную, область видимости которой ограничивается блоком кода, в котором она объявлена.
А вот для var
не существует блочной области видимости: глобальные переменные var
доступны и за пределами блока. Также var
допускает повторное объявление, тогда как для let
это будет ошибкой. Попробуйте сами:
И такой вариант:
А что насчёт const
? Это константа, которая подчиняется области видимости уровня блока согласно тем же правилам, что и переменные let
. Но разница в том, что значение const
нельзя переназначить. Пример:
Типы данных
Стандарт ECMAScript определяет восемь типов:
- undefined — неопределённый тип;
- boolean — логический тип;
- number —
число; - bigint — число произвольной длины;
- string — строка;
- symbol — символ;
- null — нулевое или пустое значение;
- object — структура для хранения данных и создания других структур с использованием ключевого слова
new
:new Object
,new Map
,new Date
, etc.
Подробнее о типах данных и структурах данных в JavaScript вы можете почитать здесь.
Циклы
В JavaScript существует несколько видов циклов:
for
— цикл со счётчиком, использование которого в большинстве случаев подразумевает, что известно количество повторений.while
— многократное выполнение инструкций ровно до тех пор, пока истинно условие.do ... while
— то же, что иwhile
, только здесь условие проверяется после выполнения инструкций, поэтому цикл выполняется минимум один раз.for ... in
— цикл для перебора перечисляемых свойств объекта.for ... of
— перебор итерируемых объектов, в которых реализован методSymbol.iterator
(String
,Array
,Set
, etc.).
При этом, как и в других языках программирования, в JS можно использовать инструкции break
и continue
.
Функции
Ну и чтобы обучиться программированию на JavaScript с нуля, нельзя обойти вниманием функции.
Функциям можно передавать аргументы, возвращать из них результат, присваивать их в качестве значений или свойств. Вызов функции выполняет обозначенные действия с указанными параметрами. Пример:
Выполнение этой функции выглядит так:
Подробнее о функциях в JavaScript.
Продвинутые концепции
Двигаемся дальше. Понимание более сложных концепций JavaScript позволяет писать полноценные программы, лишённые спагетти-кода и разномастных костылей.
Замыкание
В JavaScript функции могут находиться внутри других функций. В этом случае внутренняя функция имеет доступ к переменным внешней, и механизм предоставления такого доступа называется замыканием.
Рассмотрим на примере:
Каррирование функций
Данная техника работы с функциями очень полезна для разработки на JavaScript с нуля. Каррирование — это трансформация функций, чтобы те принимали аргументы как func(a)(b)(c)
, а не в формате func(a, b, c)
.
Чтобы лучше понять, о чём речь, посмотрим на простой пример. Создадим вспомогательную функцию curry(func)
, которая выполняет каррирование func
с двумя аргументами:
Ключевое слово this
Контекст this
меняется в зависимости от его использования:
- Если обратиться к
this
в глобальной области, мы автоматически обращаемся к объектуwindow
в браузере. В строгом режиме ("use strict"
), если значениеthis
не установлено в контексте выполнения, оно остаётсяundefined
. - Используя данное ключевое слово внутри объекта, мы ссылаемся на сам объект.
this
во вложенных объектах может создать путаницу. Помните, чтоthis
относится к тому объекту, в методе которого используется.- Если функцию-конструктор вызвать с использованием ключевого слова
new
, тоthis
в ней укажет на новый объект. - В стрелочных функциях
this
привязан к окружению, в котором создана функция. В глобальной же областиthis
будет указывать на глобальный объект.
Прототипы
В JavaScript объекты имеют специальное скрытое свойство [[Prototype]]
, которое либо равно null
, либо ссылается на другой объект. Этот объект называется прототипом:
Если вы планируете взять отсутствующее свойство из Object
, но оно отсутствует, JavaScript автоматически возьмёт это свойство из прототипа. Это прототипное наследование.
Свойство [[Prototype]]
является внутренним и скрытым, но есть много способов задать его. Одним из способов задать скрытое свойство [[Prototype]]
является использование __proto__
:
Наследование
В плане наследования JavaScript работает лишь с одной сущностью: объектами. Каждый объект имеет внутреннюю ссылку на другой объект, называемый его прототипом. У объекта-прототипа также есть свой собственный прототип и так далее до тех пор, пока цепочка не завершится объектом, у которого свойство [[Prototype]]
равно null
.
Итераторы и Генераторы
Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения for ... of
циклов.
Итератором называется объект, который умеет обращаться к элементам некоторой коллекции по одному за один раз, и при может отслеживать своё текущее положение внутри обозначенной последовательности. В JavaScript итератор — это объект, который предоставляет метод next()
, возвращающий следующий элемент последовательности со свойством done
или value
.
next()
может быть вызван для поочерёдного доступа к парам ключ-значение:
Генераторы же позволяют определить алгоритм перебора, написав одну функцию, которая способна поддерживать собственное состояние. Генератор — это специальный тип функции, который работает как фабрика итераторов. Функция становится генератором, если содержит один или более yield
операторов и использует function
синтаксис.
Асинхронное программрование
При асинхронном программировании результат работы функций доступен не сразу, а через время. Так, при вызове асинхронной функции приложение продолжает работать, так как функция сразу же выполняет возврат.
Вообще, асинхронное программирование на JavaScript с нуля — это непросто, и одним разделом статьи здесь не обойтись. Чтобы разобраться, изучите основные понятия асинхронного программирования и переходите к введению в асинхронный JavaScript.
Модульная система
По мере роста приложения его обычно разделяют на много файлов, которые и являются модулями. Модуль обычно содержит класс или библиотеку с функциями.
Долгое время в JavaScript отсутствовал синтаксис модулей на уровне языка. Это не было проблемой, потому что первые скрипты были маленькими и простыми. Но со временем это изменилось, скрипты стали куда более сложными, и было изобретено несколько вариантов организации кода в модули.
Так появились специальные библиотеки для динамической подгрузки модулей. Система модулей на уровне языка появилась в стандарте JavaScript в 2015 году и постепенно эволюционировала. На данный момент она поддерживается большинством браузеров и Node.js.
Подробнее о модульной системе читайте здесь.
Web API
Для программирования на языке JavaScript понимать Web API не просто желательно, а обязательно. Сталкиваться с интерфейсом прикладного программирования (Application Programming Interfaces) в JS вы будете повсеместно.
- API браузера — это такие конструкции, которые встроены в браузер и предназначенные для облегчения разработки функциональности.
- Сторонние API — конструкции, встроенные в сторонние платформы, такие как Twitter, Zendesk, Trello и т. д. С их помощью функциональность этих платформ можно использовать в своих веб-приложениях. Если API в платформе предусмотрен, к нему обязательно прилагается инструкция.
Тема веб API обширна и сложна. Чтобы разобраться в вопросе, рекомендуем к прочтению введение в web APIs, а также советуем посмотреть доступную лекцию:
Инструменты для разработки на JavaScript с нуля
Популярные линтеры и форматтеры для JavaScript:
Также обратите внимание на перечисленные в карте бандлеры: выбирайте инструмент, исходя из его удобства конкретно под ваши нужды.
Что же касается библиотек и фреймворков, советуем ознакомиться с нашими дорожными картами по React и Vue.js.
А здесь лежит развёрнутый вводный курс по TypeScript.
Выводы
Данный материал не несёт значительной обучающей нагрузки, а лишь демонстрирует путь развития JS-разработчика, параллельно объясняя некоторые азы. Используйте эту дорожную карту, чтобы в краткие сроки обучиться программированию на JavaScript с нуля и успешно перейти к практическому применению полученных знаний.
58К открытий63К показов