Оператор нулевого слияния "??" является нововведением в ES2020, которое представляет собой укороченную оценку логического выражения, отдающее правый операнд в случае, если левый операнд является null или undefined, если же нет, то тогда он отдаст левый операнд.
Вот очень простой пример применения:
const team = null ?? 'A team'; console.log(team); // A team
Что способствовало созданию Nullish Coalescing оператора
Конечно же вы уже знаете другие логические операторы, сокращающие вычисления с обработкой типов данных, такие как "&&" и "||". Эти операторы используются для обработки truthy и falsy значений. Но сначала, что есть false, а что есть true в JavaScript?
Falsy:
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.