Разработка на JavaScript с нуля в 2022 году: дорожная карта

Чтобы сделать обучение программированию на JavaScript с нуля простым и понятным, составили для вас дорожную карту:

Роадмап по изучению JavaScript разделён на следующие блоки:

1. Основы
2. Продвинутые концепции
3. Web API
4. Инструменты
5. Выводы

Разберём каждый из блоков более подробно.

Основы JavaScript

Как и любой язык программирования, JavaScript начинается с базовых знаний, таких как понимание переменных, операторов, типов данных, функций, циклов и т. д.

Синтаксис

JavaScript позаимствовал большую часть синтаксиса из языка Java, но влияние на него оказали и Python, Perl, Awk. Язык JavaScript чувствителен к регистру и использует кодировку символов Unicode.

var, let и const

Для создания переменной в JS часто используется ключевое слово let. Эта директива позволяет объявить локальную переменную, область видимости которой ограничивается блоком кода, в котором она объявлена.

А вот для var не существует блочной области видимости: глобальные переменные var доступны и за пределами блока. Также var допускает повторное объявление, тогда как для let это будет ошибкой. Попробуйте сами:

			var siteName = "Tproger";
var siteName;
		

И такой вариант:

			let siteName;
let siteName; //SyntaxError: 'siteName' has already been declared
		

А что насчёт const? Это константа, которая подчиняется области видимости уровня блока согласно тем же правилам, что и переменные let. Но разница в том, что значение const нельзя переназначить. Пример:

			const siteName = "Tproger";
siteName = "Типичный программист"; //TypeError: Assignment to constant
		

Типы данных

Стандарт ECMAScript определяет восемь типов:

• undefined — неопределённый тип;
• boolean — логический тип;
• number —
  число;
• bigint — число произвольной длины;
• string — строка;
• symbol — символ;
• null — нулевое или пустое значение;
• object — структура для хранения данных и создания других структур с использованием ключевого слова new: new Object, new Map, new Date, etc.

Подробнее о типах данных и структурах данных в JavaScript вы можете почитать здесь.

Циклы

В JavaScript существует несколько видов циклов:

1. for— цикл со счётчиком, использование которого в большинстве случаев подразумевает, что известно количество повторений.
2. while— многократное выполнение инструкций ровно до тех пор, пока истинно условие.
3. do ... while— то же, что и while, только здесь условие проверяется после выполнения инструкций, поэтому цикл выполняется минимум один раз.
4. for ... in— цикл для перебора перечисляемых свойств объекта.
5. for ... of— перебор итерируемых объектов, в которых реализован метод Symbol.iterator (String, Array, Set, etc.).

При этом, как и в других языках программирования, в JS можно использовать инструкции break и continue.

Функции

Ну и чтобы обучиться программированию на JavaScript с нуля, нельзя обойти вниманием функции.

Функциям можно передавать аргументы, возвращать из них результат, присваивать их в качестве значений или свойств. Вызов функции выполняет обозначенные действия с указанными параметрами. Пример:

			function showMessage() {
  alert('Привет, Типичный программист!');
}
		

Выполнение этой функции выглядит так:

			showMessage();
		

Подробнее о функциях в JavaScript.

Продвинутые концепции

Двигаемся дальше. Понимание более сложных концепций JavaScript позволяет писать полноценные программы, лишённые спагетти-кода и разномастных костылей.

Замыкание

В JavaScript функции могут находиться внутри других функций. В этом случае внутренняя функция имеет доступ к переменным внешней, и механизм предоставления такого доступа называется замыканием.

Рассмотрим на примере:

			function outer() {
  var outerVar;

  var func = function() {
    var innerVar
    ...
    x = innerVar + outerVar
  }
  return func
}
		

Каррирование функций

Данная техника работы с функциями очень полезна для разработки на JavaScript с нуля. Каррирование — это трансформация функций, чтобы те принимали аргументы как func(a)(b)(c), а не в формате func(a, b, c).

Чтобы лучше понять, о чём речь, посмотрим на простой пример. Создадим вспомогательную функцию curry(func), которая выполняет каррирование func с двумя аргументами:

			function curry(func) {
  return function(a) {
    return function(b) {
      return func(a, b);
    };
  };
}

//После карирования используем:
function sum(a, b) {
  return a + b;
}
let curriedSum = curry(sum);
alert(curriedSum(1)(2)); //Вывод: 3
		

Ключевое слово this

Контекст this меняется в зависимости от его использования:

1. Если обратиться к this в глобальной области, мы автоматически обращаемся к объекту window в браузере. В строгом режиме ("use strict"), если значение this не установлено в контексте выполнения, оно остаётся undefined.
2. Используя данное ключевое слово внутри объекта, мы ссылаемся на сам объект.
3. this во вложенных объектах может создать путаницу. Помните, что this относится к тому объекту, в методе которого используется.
4. Если функцию-конструктор вызвать с использованием ключевого слова new, то this в ней укажет на новый объект.
5. В стрелочных функциях this привязан к окружению, в котором создана функция. В глобальной же области this будет указывать на глобальный объект.

Прототипы

В JavaScript объекты имеют специальное скрытое свойство [[Prototype]], которое либо равно null, либо ссылается на другой объект. Этот объект называется прототипом:

Если вы планируете взять отсутствующее свойство из Object, но оно отсутствует, JavaScript автоматически возьмёт это свойство из прототипа. Это прототипное наследование.

Свойство [[Prototype]] является внутренним и скрытым, но есть много способов задать его. Одним из способов задать скрытое свойство [[Prototype]] является использование __proto__:

			let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;

//Теперь мы можем найти оба свойства в rabbit:
alert(rabbit.eats); //true
alert(rabbit.jumps); //true
		

Наследование

В плане наследования JavaScript работает лишь с одной сущностью: объектами. Каждый объект имеет внутреннюю ссылку на другой объект, называемый его прототипом. У объекта-прототипа также есть свой собственный прототип и так далее до тех пор, пока цепочка не завершится объектом, у которого свойство [[Prototype]] равно null.

Итераторы и Генераторы

Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения for ... of циклов.

Итератором называется объект, который умеет обращаться к элементам некоторой коллекции по одному за один раз, и при может отслеживать своё текущее положение внутри обозначенной последовательности. В JavaScript итератор — это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности со свойством done или value.

			function makeIterator(array){
    let nextIndex = 0;

    return {
       next: function(){
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    }
}
		

next() может быть вызван для поочерёдного доступа к парам ключ-значение:

			let it = makeIterator(['yo', 'ya']);
console.log(it.next().value); // 'yo'
console.log(it.next().value); // 'ya'
console.log(it.next().done);  // true
		

Генераторы же позволяют определить алгоритм перебора, написав одну функцию, которая способна поддерживать собственное состояние. Генератор — это специальный тип функции, который работает как фабрика итераторов. Функция становится генератором, если содержит один или более yield операторов и использует function синтаксис.

			function* idMaker(){
  let index = 0;
  while(true)
    yield index++;
}

let it = idMaker();
console.log(it.next().value); // 0
console.log(it.next().value); // 1
console.log(it.next().value); // 2
		

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

При асинхронном программировании результат работы функций доступен не сразу, а через время. Так, при вызове асинхронной функции приложение продолжает работать, так как функция сразу же выполняет возврат.

Вообще, асинхронное программирование на JavaScript с нуля — это непросто, и одним разделом статьи здесь не обойтись. Чтобы разобраться, изучите основные понятия асинхронного программирования и переходите к введению в асинхронный JavaScript.

Модульная система

По мере роста приложения его обычно разделяют на много файлов, которые и являются модулями. Модуль обычно содержит класс или библиотеку с функциями.

Долгое время в JavaScript отсутствовал синтаксис модулей на уровне языка. Это не было проблемой, потому что первые скрипты были маленькими и простыми. Но со временем это изменилось, скрипты стали куда более сложными, и было изобретено несколько вариантов организации кода в модули.

Так появились специальные библиотеки для динамической подгрузки модулей. Система модулей на уровне языка появилась в стандарте JavaScript в 2015 году и постепенно эволюционировала. На данный момент она поддерживается большинством браузеров и Node.js.

Подробнее о модульной системе читайте здесь.

Web API

Для программирования на языке JavaScript понимать Web API не просто желательно, а обязательно. Сталкиваться с интерфейсом прикладного программирования (Application Programming Interfaces) в JS вы будете повсеместно.

1. API браузера — это такие конструкции, которые встроены в браузер и предназначенные для облегчения разработки функциональности.
2. Сторонние API — конструкции, встроенные в сторонние платформы, такие как Twitter, Zendesk, Trello и т. д. С их помощью функциональность этих платформ можно использовать в своих веб-приложениях. Если API в платформе предусмотрен, к нему обязательно прилагается инструкция.

Тема веб API обширна и сложна. Чтобы разобраться в вопросе, рекомендуем к прочтению введение в web APIs, а также советуем посмотреть доступную лекцию:

Инструменты для разработки на JavaScript с нуля

Популярные линтеры и форматтеры для JavaScript:

• ESLint
• Rome
• Prettier

Также обратите внимание на перечисленные в карте бандлеры: выбирайте инструмент, исходя из его удобства конкретно под ваши нужды.

Что же касается библиотек и фреймворков, советуем ознакомиться с нашими дорожными картами по React и Vue.js.

А здесь лежит развёрнутый вводный курс по TypeScript.

Выводы

Данный материал не несёт значительной обучающей нагрузки, а лишь демонстрирует путь развития JS-разработчика, параллельно объясняя некоторые азы. Используйте эту дорожную карту, чтобы в краткие сроки обучиться программированию на JavaScript с нуля и успешно перейти к практическому применению полученных знаний.