Новые операторы в JavaScript
Maksym PohribniakСовременная спецификация JavaScript, поддерживает синтаксис стрелочных функций, операторы spread и rest, модули и классы. Эти и другие инструменты делают JavaScript гибким и выразительным языком программирования.
Развитие языка не стоит на месте и разработчики постоянно вносят новые предложения. В этой статье мы рассмотрим 3 новых оператора: ?., ?? и |>.
Некоторые из них уже пришли в язык, и поддерживаются браузерами, а некоторые доступны только с использованием Babel и TypeScript.
![](/file/468504a20d55e2494177b.png)
Оператор опциональной последовательности
Optional chaining operator
Сам оператор выглядит следующим образом
?.
Позволяет получить значение свойства, находящегося на любом уровне вложенности в цепочке объектов, без необходимости проверять каждое из промежуточных свойств на существование.
Допустим на вход в нашу программу мы ждем примерно следующий объект c опциональным полем contacts:
{
name: 'John',
surname: 'Doe'
contacts: null
}
В поле contacts может быть какой-то другой объект, может быть null или такого поля вообще может не быть.
{
name: 'John',
surname: 'Doe'
}
или
{
name: 'John',
surname: 'Doe'
contacts: {
phone: '+1888888888888'
}
}
И на странице мы должны отобразить номер телефона пользователя, если таковой присутствует во входящих данных.
Мы могли бы написать следующий код:
![](/file/ee2f2b3e653b0bbd8a6c7.png)
Но, с оператором опциональной последовательности данный код можно переписать следующим образом:
![](/file/85c50e9e6e7210504c78c.png)
Особенно это актуально при использовании большой цепочки последовательностей. Вместо множества проверок:
![](/file/6e2d8f32e526a2eebff0f.png)
Можно выполнить всего одну:
![](/file/0f6feaa33b9e1fa963fb5.png)
Он работает подобно оператору .
, за исключением того, что не выбрасывает исключение, если объект, к свойству или методу которого идёт обращение, равен null
или undefined
. В этих случаях он возвращает undefined
.
Так же, данный оператор можно применять при вызове методов обьекта, во избежание ошибок.
![](/file/bed9ca7b687d37e208e45.png)
Несмотря на отсутствие метода sayHi() в объекте user, мы не получим ошибку выполнения данного кода.
Оператор нуллевого слияния
Nullish coalescing operator
Синтаксис данного оператора следующий:
??
это логический оператор, который возвращает значение правого операнда когда значение левого операнда равно null
или undefined
.
Вообщем он очень схож с другим логическим оператором – ИЛИ
||
Последний мы часто используем для получение первого истинного значения из списка переменных или выражений:
![](/file/532c5dc9412d2af0f8647.png)
Код выше значит: записать в переменную PORT первое истинное значение из выше перечисленных спарва от знака присвоения.
То есть мы проверяем значение переменно LOCAL_PORT на истинность, если его значение привелось к false (null, 0, undefined, NaN, "", false) то берем сдедующее выражение, и проделываем аналогичные операции над ним.
Так мы делаем пока не найдем истинное значение.
В отличие от логического ИЛИ, левая часть оператора вычисляется и возвращается даже если его результат после приведения к логическому типу оказывается ложным, но не является null
или undefined
.
То есть в примере выше если значение переменной LOCAL_PORT будет 0 (ноль), а свойства env.PORT – 5500:
![](/file/af64c7a9bc0c3ef18c2d4.png)
Оператор ?? (нулевого слияния) пропустит 0 (ноль), хоть он и приводится к false. С оператором || результат будет другим:
![](/file/c29d7b81885f0d262707b.png)
Этот оператор защищает нас от случайного использования значения по умолчанию при появлении в выражениях значений, распознаваемых как false
. Но не позволяет использовать потенциально пустые значения (null и undefined).
Конвейерный оператор
Pipeline operator draft
Цель появления этого оператора заключается в том, чтобы улучшить читаемость цепочек вызовов функций.
![](/file/ae8edcdc0d48bcbb92abe.png)
Цепочки вызово часто бывают очень длинными, и с наличием огоромного количества скобок, что затрудняет чтение и поддержку кода.
Мы можем переписать пример выше добавив немного табов:
![](/file/2e4cba32c6a966fc3afc9.png)
Не думаю, что мы сильно улучшили данный код.
Тут то нам и поможет конвеерный оператор. Он позволяет создавать более читаемые цепочки вызовов функций. И выглядит так:
|>
Привычные нам операции приобретают новый вид:
![](/file/171c4b4eec8a6de3bb8a2.png)
Значение указанного выражения
передаётся в функцию
в качестве единственного параметра. И так по цепочке. Описанный нами пример выше можно переписать так:
![](/file/fee5aff27c3bb6bbe282e.png)
Однако это экспериментальная технология и ожидаемое поведение может измениться в будущем. В данный момент не поддерживается ни одним браузером.