LearnJS

Оператор ?? в JavaScript

Оператор ?? называется оператором нулевого слияния. Он возвращает правое значение только тогда, когда слева находится null или undefined.

let userName = null;

let displayName = userName ?? 'Гость';

console.log(displayName);

Результат:

Гость

Переменная userName равна null, поэтому JavaScript берет значение справа от ??.

Что делает оператор ??

Оператор ?? проверяет значение слева.

  • если слева null или undefined - возвращается значение справа;
  • во всех остальных случаях - возвращается значение слева.
console.log(null ?? 'значение');
console.log(undefined ?? 'значение');
console.log('JavaScript' ?? 'значение');

Результат:

значение
значение
JavaScript

Синтаксис

значение1 ?? значение2

Если значение1 равно null или undefined, результатом будет значение2. Если нет - результатом будет значение1.

let city;

let selectedCity = city ?? 'Москва';

console.log(selectedCity);

Результат:

Москва

Переменная city создана, но значение в нее не записано. Значит, внутри нее undefined.

Значение по умолчанию

Чаще всего ?? используют для значения по умолчанию.

let theme = null;

let currentTheme = theme ?? 'light';

console.log(currentTheme);

Результат:

light

Если пользователь не выбрал тему, программа берет значение ‘light’.

Если значение уже есть, оно останется без изменений:

let theme = 'dark';

let currentTheme = theme ?? 'light';

console.log(currentTheme);

Результат:

dark

Отличие от ||

Оператор || тоже часто используют для значений по умолчанию, но он работает шире. Он заменяет любое falsy значение: 0, пустую строку, false, null, undefined и NaN.

Оператор ?? заменяет только null и undefined.

let count = 0;

console.log(count || 10);
console.log(count ?? 10);

Результат:

10
0

Для || число 0 считается ложным, поэтому возвращается 10. Для ?? число 0 является нормальным значением, поэтому возвращается 0.

То же самое с пустой строкой и false:

console.log(('' ?? 'Без имени') === '');
console.log(false ?? true);

Результат:

true
false

Пустая строка и false не равны null или undefined, поэтому оператор ?? оставляет их как есть.

Несколько значений подряд

Оператор ?? можно использовать несколько раз подряд.

let userName = null;
let nickName = undefined;
let defaultName = 'Гость';

let displayName = userName ?? nickName ?? defaultName;

console.log(displayName);

Результат:

Гость

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

Скобки с && и ||

Оператор ?? нельзя смешивать с && или || без скобок.

let userName = null;
let defaultName = 'Гость';

let name = userName ?? defaultName;

Так писать можно. Но если рядом появляется || или &&, используйте скобки:

let name = (userName ?? defaultName) || 'Пользователь';

Скобки явно показывают порядок действий и помогают не запутаться в логике.

Итого

Оператор ?? возвращает правое значение только тогда, когда слева находится null или undefined. Он удобен для значений по умолчанию, когда 0, пустая строка или false должны считаться нормальными значениями. Если нужно заменить любое falsy значение, подойдет ||. Если нужно заменить только отсутствие значения, лучше использовать ??.