Новые операторы в  JavaScript

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

Развитие языка не стоит на месте и разработчики постоянно вносят новые предложения. В этой статье мы рассмотрим 3 новых оператора: ?., ?? и |>.

Некоторые из них уже пришли в язык, и поддерживаются браузерами, а некоторые доступны только с использованием Babel и TypeScript.

Оператор опциональной последовательности

Optional chaining operator

Сам оператор выглядит следующим образом

?.

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

Допустим на вход в нашу программу мы ждем примерно следующий объект c опциональным полем contacts:

{
name: 'John',
surname: 'Doe'
contacts: null
}

В поле contacts может быть какой-то другой объект, может быть null или такого поля вообще может не быть.

{
name: 'John',
surname: 'Doe'
}

или

{
name: 'John',
surname: 'Doe'
contacts: {
phone: '+1888888888888'
}
}

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

Мы могли бы написать следующий код:

Но, с оператором опциональной последовательности данный код можно переписать следующим образом:

Особенно это актуально при использовании большой цепочки последовательностей. Вместо множества проверок:

Можно выполнить всего одну:

Он работает подобно оператору ., за исключением того, что не выбрасывает исключение, если объект, к свойству или методу которого идёт обращение, равен null или undefined. В этих случаях он возвращает undefined.

Так же, данный оператор можно применять при вызове методов обьекта, во избежание ошибок.

Несмотря на отсутствие метода sayHi() в объекте user, мы не получим ошибку выполнения данного кода.

Оператор нуллевого слияния

Nullish coalescing operator

Синтаксис данного оператора следующий:

??

это логический оператор, который возвращает значение правого операнда когда значение левого операнда равно null или undefined.

Вообщем он очень схож с другим логическим оператором – ИЛИ

||

Последний мы часто используем для получение первого истинного значения из списка переменных или выражений:

Код выше значит: записать в переменную PORT первое истинное значение из выше перечисленных спарва от знака присвоения.

То есть мы проверяем значение переменно LOCAL_PORT на истинность, если его значение привелось к false (null, 0, undefined, NaN, "", false) то берем сдедующее выражение, и проделываем аналогичные операции над ним.
Так мы делаем пока не найдем истинное значение.

В отличие от логического ИЛИ, левая часть оператора вычисляется и возвращается даже если его результат после приведения к логическому типу оказывается ложным, но не является null или undefined.

То есть в примере выше если значение переменной LOCAL_PORT будет 0 (ноль), а свойства env.PORT – 5500:

Оператор ?? (нулевого слияния) пропустит 0 (ноль), хоть он и приводится к false. С оператором || результат будет другим:

Этот оператор защищает нас от случайного использования значения по умолчанию при появлении в выражениях значений, распознаваемых как false. Но не позволяет использовать потенциально пустые значения (null и undefined).

Конвейерный оператор

 Pipeline operator draft

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

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

Мы можем переписать пример выше добавив немного табов:

Не думаю, что мы сильно улучшили данный код.

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

|>

Привычные нам операции приобретают новый вид:

Значение указанного выражения передаётся в функцию в качестве единственного параметра. И так по цепочке. Описанный нами пример выше можно переписать так:

Однако это экспериментальная технология и ожидаемое поведение может измениться в будущем. В данный момент не поддерживается ни одним браузером.