Operator ?? w JavaScript: wartości domyślne zrobione dobrze

Mądrzejsza wartość domyślna

JavaScript od zawsze miał skrót do wartości domyślnych: value || fallback. Zwykle działa, ale ma wbudowany błąd: traktuje każdą wartość falsy jako brakującą. 0, '' i false uruchamiają wartość zapasową, nawet gdy są prawdziwą odpowiedzią.

Operator nullish coalescing ?? to naprawia. Sięga po wartość zapasową tylko przy null lub undefined:

const a = 0 ?? 10;
const b = '' ?? 'empty';
const c = null ?? 'default';
const d = undefined ?? 'default';

console.log(a, b, c, d);

0 i '' przetrwały. null i undefined nie. To cały operator.

Dlaczego || nie wystarcza

Oto klasyczny błąd, któremu ?? miał zapobiegać:

function createUser(options) {
  const volume = options.volume || 100;
  const nickname = options.nickname || 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));

Użytkownik poprosił o głośność 0 (cisza) i pusty pseudonim. Obie wartości zostały po cichu nadpisane, bo || nie odróżnia "brakującego" od "falsy".

Podmień na ??:

function createUser(options) {
  const volume = options.volume ?? 100;
  const nickname = options.nickname ?? 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));
console.log(createUser({}));

Teraz 0 i '' przechodzą nietknięte, a wartość domyślną dostają tylko pola, których naprawdę brakuje. Prawie zawsze właśnie o to chodzi.

Model myślowy

?? zadaje jedno pytanie: czy lewa strona to null lub undefined? Nic innego się nie liczy.

Wybierz ??, gdy twoje dane mają znaczące wartości falsy. Wybierz ||, gdy naprawdę chcesz odrzucić wszystko, co falsy (krótkie stringi, zerowe liczniki itp.). Taki przypadek istnieje, ale jest rzadszy, niż się wydaje.

Skrócone obliczanie

Tak jak || i &&, ?? stosuje skrócone obliczanie. Jeśli lewa strona nie jest nullish, prawa w ogóle się nie wykonuje:

function expensiveDefault() {
  console.log('computing default...');
  return 'fallback';
}

const a = 'real value' ?? expensiveDefault();
const b = null ?? expensiveDefault();

console.log(a);
console.log(b);

expensiveDefault() wykonuje się tylko raz, dla b. To przydatne, gdy wartość zapasowa to wywołanie funkcji, zapytanie sieciowe albo cokolwiek innego, co wolisz pominąć, gdy nie jest potrzebne.

W parze z optional chaining

?? i ?. weszły razem w ES2020 i zaprojektowano je do pracy w zespole. Optional chaining przechodzi przez ścieżkę, której może brakować, i zwraca undefined, jeśli brakuje któregoś kroku. Nullish coalescing uzupełnia wtedy sensowną wartość domyślną:

const response = {
  user: {
    profile: null,
  },
};

const theme = response?.user?.profile?.theme ?? 'light';
const tags = response?.user?.posts?.[0]?.tags ?? [];

console.log(theme);
console.log(tags);

Bez tej pary ten sam kod to brzydki łańcuch sprawdzeń && albo try/catch. Z nią bezpieczny dostęp i rozsądne wartości domyślne mieszczą się w jednej linii.

Przypisanie nullish: ??=

a ??= b przypisuje b do a tylko wtedy, gdy a to null lub undefined. To operator logicznego przypisania nullish i stosuje skrócone obliczanie: jeśli a ma już wartość, prawa strona nie jest obliczana.

function withDefaults(options) {
  options.retries ??= 3;
  options.timeout ??= 5000;
  options.verbose ??= false;
  return options;
}

console.log(withDefaults({ timeout: 10000 }));
console.log(withDefaults({ verbose: false, retries: 0 }));

Zauważ, że verbose: false i retries: 0 zostały zachowane: ??= uzupełnia tylko to, czego naprawdę brakuje. Porównaj z ||=, który nadpisałby obie wartości.

Priorytet i zasada nawiasów

?? celowo odmawia mieszania z || lub && bez nawiasów. To rzuca SyntaxError:

const x = a || b ?? c;   // SyntaxError

Twórcy języka uznali, że priorytet jest na tyle niejednoznaczny, że warto zmusić cię do doprecyzowania. Dodaj nawiasy i wszystko działa:

const a = null;
const b = 0;
const c = 'fallback';

const x = (a || b) ?? c;
const y = a || (b ?? c);

console.log(x);
console.log(y);

Inne grupowanie, inna odpowiedź. Nawiasy nie są ozdobą: mówią przyszłym czytelnikom (i parserowi), o co ci chodzi.

To nie to samo co parametr domyślny

Parametry domyślne w sygnaturach funkcji mają własną zasadę: włączają się tylko wtedy, gdy argument to undefined, a nie null. To subtelna różnica względem ??, który traktuje obie wartości tak samo.

function greet(name = 'friend') {
  return `Hello, ${name}`;
}

console.log(greet());          // uses default
console.log(greet(undefined)); // uses default
console.log(greet(null));      // does NOT use default

Jeśli chcesz, żeby null też uruchamiało wartość zapasową, użyj ?? w ciele funkcji:

function greet(name) {
  const who = name ?? 'friend';
  return `Hello, ${who}`;
}

console.log(greet(null));
console.log(greet(undefined));
console.log(greet('Rosa'));

Mała różnica, o którą łatwo się potknąć, gdy API zwraca null jako "nie ustawiono wartości".

Kiedy sięgać po ??

Używaj ?? jako domyślnego operatora, chyba że masz konkretny powód, żeby tego nie robić. To on pasuje do tego, jak naprawdę zachowuje się większość danych: 0, '' i false to zwykle prawdziwe wartości, które warto zachować, a wartość zapasowa należy się tylko danym, których naprawdę brakuje. || zostaw na przypadki, w których rzeczywiście chcesz zastąpić każdą wartość falsy.

Dalej: klasy

To tyle o obiektach i tablicach. Masz już narzędzia, żeby bezpiecznie budować i przeglądać struktury danych. Następny rozdział przechodzi do organizowania zachowania: klas, dziedziczenia i systemu prototypów, który za nimi stoi.