JS/ES2020: Optional Chaining and Nullish Coalescing

June 13, 2020

На дворе 2020 год, а в ES2020 уже есть 2 долгожданные фичи, которые облегчат работу. Но самое интересное, что эти фичи уже точно можно использовать в продакшене. Давайте рассмотрим их с примерами и поймем профит.

Во первых - эти фичи уже доступны в браузерах:

Т.е. эти фичи вполне можно использовать даже на некоторых продакшенах без транспайлеров. Во 2х - эти фичи есть в бабеле и TS, а если вы пишите на Vue, React или Angular - то вы точно используете какой-то транспайлер.

В Node.js эти фичи так же доступны, но с 14й версии, так что если у вас LTS - пока рано юзать нативно, но скоро можно будет.

Собственно что дают эти фичи и на сколько они взаимозаменяемы?

Nullish Coalescing

Эта фич давно есть в других языках, и яркий представитель веб мира - PHP. В PHP не требуется заранее объявлять переменные, поэтому с помощью этого оператора можно проверять существование переменной и возвращать дефолтный результат:

<?php
$res = $a ?? 1;
print($res);

В JS обращение к несуществующей переменной - это всегда ошибка, но(!). Вы можете общаться через глобальную область (если вы работаете в глобальной области):

let res = globalThis.a ?? 1
console.log(res)

Вы можете сказать, но раньше же мы писали:

var res = window.a || 1;

Да, но тут есть но(!) и оно важное. Тут вернется дефолтное значение если a будет при булевом преобразовании давать false. А нам нужно проверить, есть ли значение иначе вернуть дефолтное:

function f(x) { return x || 1 }
f(0) // = 1
function f(x) { return x ?? 1 }
f(0) // = 0

В данном случае у нас более правильное сравнение, так как 0 в данном случае валидное значение которое мы хотим обработать.

Optional Chaining

Оу, эту фичу ждали давно и она реально оправдана имхо. Теперь очень легко работать с встроенным querySelector, так как мы можем без ошибок писать теперь:

let $div = docuemnt
.querySelector(‘#nonexists’)
?.innerText
?.replaceAll(‘foo’, ‘bar’)

Красота да и только. Точнее удобство, не красота. Но явно это удобно.

Ну и ко всему этому добавьте еще Logical assigment и мы получим просто десятки новых вариантов присвоить дефолтное значение или построить выражение, альтернативное тернарному оператору. Да, тернарный оператор кажется каким-то анахронизмом после таких сахаров.