JS-гайд основные концепции JavaScript с примерами кода

Гайд по принципу Парето: 20% языка, которые нужны вам в 80% случаев. Только основные концепции JavaScript с примерами кода.

JS-гайд: основные концепции JavaScript с примерами кода

С момента появления JavaScript 20 лет назад он прошел долгий путь от скромного инструмента для простеньких анимаций до первой десятки рейтинга Tiobe.

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

Версии и стандарты

Язык JavaScript реализует стандарт ECMAScript, поэтому название его версий начинается с букв ES: ES6, ES2016, ES2018 и так далее. Версии имеют порядковый номер, а также нумеруются по году релиза. На данный момент последняя утвержденная версия – ES2017, он же ES8.

JS-гайд основные концепции JavaScript с примерами кода

За развитие языка отвечает комитет TC39. Каждая новая фича должна пройти несколько этапов от предложения до стандарта.

Стайлгайды

Чтобы JavaScript-код был чистым и аккуратным, следует выработать систему соглашений и строго их придерживаться. Удобно использовать готовые стайлгайды, например, от Google или AirBnb.

Переменные

Имена переменных и функций в JavaScript должны начинаться с буквы, $ или символа подчеркивания. Они могут даже содержать эмодзи или иероглифы! Идентификаторы регистрозависимы: something и SomeThing – это разные переменные.

Нельзя использовать в качестве имен зарезервированные слова языка:

Для создания переменной нужно использовать одно из трех ключевых слов: var , let или const .

  • var -переменные имеют контекстную область видимости и обладают свойством хойстинга (поднятия).
  • У let и const видимость блочная, и они не поднимаются.
  • неизменяемость const -переменных широко используется для обеспечения иммутабельности.

Выражения

Выражения – это структурные единицы кода, которые можно вычислить и преобразовать в значение.

Примитивные типы данных

Числа

Все числа в JavaScript (даже целые) имеют тип float (число с плавающей точкой). Мы подготовили отдельную подробную статью об особенностях чисел и математических методах в JavaScript.

Строки

Строки – это последовательность символов в одинарных или двойных кавычках. Принципиальной разницы между ними нет.

Для конкатенации строк используется оператор + :

Строку можно заполнить символами до определенной длины (с начала или с конца):

В ES6 появился новый синтаксис для создания строк, допускающий интерполяцию выражений и многострочность:

Логические значения

Логические значения true и false используются в сравнениях, условиях и циклах. Все остальные типы данных могут быть приведены к логическому значению.

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

undefined

undefined означает, что переменная неинициализирована и не имеет значения.

Функции без директивы return возвращают именно undefined . Неинициализированные параметры функций также являются undefined .

Функции

Функция – это самостоятельный блок JavaScript-кода, который можно повторно использовать в программе. Особенность функций в том, что их можно вызывать, передавать им аргументы и получать некоторое новое значение.

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

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

Параметры

С версии ES6 функции поддерживают параметры по умолчанию:

А в списке параметров можно оставлять замыкающую запятую:

Возвращаемое значение

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

Замыкания

Эффект замыканий основан на том, что в концепции JavaScript области видимости ограничены функциями. Это сложная тема, которую, тем не менее, необходимо понять для успешной работы. Мы посвятили ей большой отдельный материал (часть 1, часть 2).

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

this можно установить искусственно с помощью методов call , apply и bind :

Если функция вызывается не в контексте объекта, ее this равен undefined .

Стрелочные функции

В ES6 появился новый вид функций, который полностью изменил вид JS-кода. На первый взгляд они очень просты:

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

Immediately Invoked Function Expressions – функции, которые выполняются сразу же после объявления.

Генераторы

Особые функции, работу которых можно приостановить с помощью ключевых слов yield и возобновить позже. Это позволяет использовать совершенно новые концепции JavaScript-программирования.

Поймите концепции JavaScript на примере объяснений или задач.

Массивы

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