Nullish Coalescing (??) JavaScript: Nilai Default yang Benar

Nilai Default yang Lebih Cerdas

JavaScript sejak dulu punya jalan pintas untuk nilai default: value || fallback. Biasanya berfungsi, tetapi ada bug yang sudah tertanam di dalamnya: ia menganggap nilai falsy apa pun sebagai tidak ada. 0, '', dan false semuanya memicu nilai cadangan, bahkan saat ketiganya adalah jawaban yang sebenarnya.

Operator nullish coalescing ?? memperbaikinya. Ia hanya beralih ke nilai cadangan untuk null atau undefined:

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

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

0 dan '' selamat. null dan undefined tidak. Itulah seluruh operatornya.

Mengapa || Tidak Cukup

Berikut bug klasik yang dirancang untuk dicegah oleh ??:

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

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

Pengguna meminta volume 0 (hening) dan nickname kosong. Keduanya diam-diam ditimpa karena || tidak bisa membedakan "tidak ada" dari "falsy".

Ganti dengan ??:

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({}));

Sekarang 0 dan '' lolos tanpa tersentuh, dan hanya field yang benar-benar tidak ada yang mendapat nilai default. Hampir selalu inilah yang kamu inginkan.

Model Mental

?? menanyakan satu hal: apakah sisi kirinya null atau undefined? Tidak ada hal lain yang dihitung.

Pilih ?? saat datamu punya nilai falsy yang bermakna. Pilih || saat kamu memang ingin menolak semua yang falsy (string pendek, hitungan nol, dan sebagainya). Kasus itu memang ada, tetapi lebih jarang daripada yang orang kira.

Short-Circuit

Seperti || dan &&, ?? melakukan short-circuit. Kalau sisi kirinya bukan nullish, sisi kanannya sama sekali tidak dijalankan:

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

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

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

expensiveDefault() hanya berjalan sekali, yaitu untuk b. Ini berguna saat nilai cadanganmu berupa pemanggilan fungsi, request jaringan, atau apa pun yang lebih baik dilewati kalau tidak dibutuhkan.

Berpasangan dengan Optional Chaining

?? dan ?. diperkenalkan bersama di ES2020, dan keduanya dirancang untuk bekerja sebagai tim. Optional chaining menelusuri path yang mungkin tidak ada dan menghasilkan undefined kalau ada langkah yang hilang; nullish coalescing lalu mengisi nilai default yang masuk akal:

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);

Tanpa pasangan ini, kode yang sama menjadi rangkaian pengecekan && yang jelek atau sebuah try/catch. Dengan keduanya, akses yang aman dan nilai default yang masuk akal muat dalam satu baris.

Penugasan Nullish: ??=

a ??= b mengisi b ke a hanya saat a bernilai null atau undefined. Inilah operator logical nullish assignment, dan ia melakukan short-circuit: kalau a sudah punya nilai, sisi kanannya tidak dievaluasi.

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 }));

Perhatikan bahwa verbose: false dan retries: 0 tetap dipertahankan: ??= hanya mengisi yang benar-benar tidak ada. Bandingkan dengan ||=, yang akan menimpa keduanya.

Prioritas dan Aturan Kurung

?? sengaja menolak dicampur dengan || atau && tanpa kurung. Kode ini memunculkan SyntaxError:

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

Perancang bahasanya memutuskan bahwa urutan prioritasnya cukup ambigu sehingga layak memaksamu untuk memperjelasnya. Tambahkan kurung dan semuanya baik-baik saja:

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);

Pengelompokan berbeda, jawaban berbeda. Kurung itu bukan hiasan: ia memberi tahu pembaca berikutnya (dan parser) apa maksudmu.

Tidak Sama dengan Parameter Default

Parameter default di signature fungsi punya aturannya sendiri: ia hanya aktif saat argumennya undefined, bukan null. Itu perbedaan halus dengan ??, yang memperlakukan keduanya sama.

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

Kalau kamu ingin null juga memicu nilai cadangan, pakai ?? di dalam isi fungsinya:

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

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

Perbedaan kecil, mudah tersandung saat sebuah API memberimu null untuk "belum ada nilai yang diatur".

Kapan Memakai ??

Pakai ?? sebagai operator default-mu kecuali ada alasan khusus untuk tidak memakainya. Operator inilah yang sesuai dengan perilaku kebanyakan data: 0, '', dan false biasanya adalah nilai sungguhan yang layak dipertahankan, dan hanya data yang benar-benar tidak ada yang pantas mendapat nilai cadangan. Sisakan || untuk kasus saat kamu memang ingin setiap nilai falsy diganti.

Berikutnya: Class

Itulah akhir pembahasan objek dan array: kamu sudah punya alat untuk membangun dan menelusuri bentuk data dengan aman. Bab berikutnya beralih ke cara mengatur perilaku: class, inheritance, dan sistem prototype yang ada di baliknya.