Как использовать Nullish Coalescing(оператор нулевого слияния) в JavaScript

В этой статье вы узнаете как работать с Nullish Coalsing, а именно оператором нулевого слияния в JavaScript. И чем он отличается от логических операторов. Это первая из цикла статей про ES2020.

Перевод статьи How to use the new Nullish Coalescing operator in JavaScript

Off topic. Лучше всего оставлять этот термин без перевода, то есть просто Nullish Coalsing. Если использовать русский перевод, то лучше как “оператор нулевого слияния”. Я слышал варианты “нулевой оператор объединения” и “null оператор коалесцирования”. Но это не совсем то, последний вариант вообще ближе к химии, насколько я знаю.

Оператор нулевого слияния “??” является нововведением в ES2020, которое представляет собой укороченную оценку логического выражения, отдающее правый операнд в случае, если левый операнд является null или undefined, если же нет, то тогда он отдаст левый операнд.

Сейчас он находится на 4й стадии рассмотрения, что говорит о том, что он уже готов к внедрению в официальный ECMAScript стандарт.

Он работает в последних версиях Chrome и Firefox.

Вот очень простой пример применения:

const team = null ?? 'A team';
console.log(team);
//A team

Что способствовало созданию Nullish Coalescing оператора

Конечно же вы уже знаете другие логические операторы, сокращающие вычисления с обработкой типов данных, такие как “&&” и “||”. Эти операторы используются для обработки truthy и falsy значений. Но сначала, что есть false, а что есть true в JavaScript?

Falsy:

boolean false

null value

undefined

Number 0

Number NaN

BigInt 0n

Пустая строка “”

Truthy:

Все значения, кроме предыдущих.

Проблема с && и || операторами в том, что они ориентируются только на truthy и falsy, что неизбежно приводит к багам. Эти операторы отлично работают с null и undefined значениями, но многие false значения могут привести к неожиданным результатам.

В этом примере я хочу, чтобы мы обработали объект, в котором мы выставим свойству enableAudio значение 0. И дальше мы выставим дефолтное значение 1, потому что нулевое значение интерпретируется как falsy.

const response = {
     enableAudio : 0
}
const enableAudio = response.enableAudio || 1;
enableAudio
//1

Nullish coalescing оператор ?? очень схож с оператором ||, кроме того факта, что он не использует truthy при принятии решения. Вместо этого он использует nullish, что говорит о том, что значение должно быть либо null, либо undefined.

В следующем примере переменная enableAudio имеет значение 0 и с оператором нулевого слияния ??, оно обрабатывается не как nullish значение. Следовательно, выражение отдаст левый операнд.

const response = {
     enableAudio : 0
}
const enableAudio = response.enableAudio ?? 1;
enableAudio
//0

С оператором ||, если бы первый операнд был бы truthy, то он бы отдал первый операнд. В другом случае он перешел бы ко второму. C Nullish Coalsing оператором, если первый оператор falsy, но не nullish, то отдастся false.

console.log(false || true);//true
console.log(false ?? true);//false

В следующем примере 0 воспринимается как falsy. Следовательно выражение отдаст второй операнд с оператором ||. Но с оператором Nullish Coalescing, ноль не считается null. Следовательно, выражение отдаст первое значение, то есть 0.

console.log(0 || 1); //1
console.log(0 ?? 1); //0

В следующем примере, если вы попробуете его с оператором ||, то результат, полученный вами будет вторым операндом, потому что пустая строка являет собой falsy значение. А вот если бы вы использовали Nullish Coalescing оператор, то пустая строка не считалась бы как null и следовательно выражение отдало бы первый операнд.

console.log('' || 'Hello!');//Hello      
console.log('' ?? 'Hello');//''

В общем, оператор || обрабатывает значения как falsy и truthy, а опрератор ?? обрабатывает их как nullish. Это говорит о том, что с оператором ||, будет отдан второй операнд, если первый является undefined, null, 0, false, NaN или пустой строкой. А вот с оператором ??, второй операнд будет отдан только в том случае, если первый является null или undefined.

Заключение

Есть очень большое количество багов, которые могут всплыть при использовании || оператора которые вы можете избежать, используя новый оператор nullish coalescing ??, а ещё с ним вы вы сможете предотвратить появление большого количества шаблонного кода для подобных проверок.