Daftar Isi:
Panduan Developer · Nullish Coalescing Operator (??)
Apa itu nullish coalescing (??): cara kerja, beda dengan operator OR (||), contoh kode, dan kapan digunakan dalam pengembangan JavaScript/TypeScript.
Salah satu bug halus yang sering menjebak developer JavaScript adalah penggunaan operator || untuk memberi nilai default — tanpa sadar, angka 0 atau string kosong "" ikut dianggap “tidak valid” dan digantikan nilai default yang sebenarnya tidak diinginkan. Nullish coalescing hadir sebagai solusi presisi untuk masalah ini.
Artikel ini membahas secara mendalam apa itu nullish coalescing, cara kerjanya, perbedaan mendasar dengan operator OR, contoh implementasi kode nyata, kombinasinya dengan optional chaining, hingga kesalahan umum yang perlu dihindari saat menggunakannya.
??Simbol operator nullish coalescing
ES2020Diperkenalkan resmi di ECMAScript 2020
2 NilaiHanya trigger di null & undefined
Sejak 2020Didukung luas semua browser modern
Apa Itu Nullish Coalescing?
Nullish coalescing adalah operator logika dalam JavaScript yang dilambangkan dengan tanda ??. Operator ini mengembalikan nilai di sisi kanan hanya jika nilai di sisi kiri bernilai null atau undefined — selain kedua kondisi itu, nilai sisi kiri tetap dipertahankan apa adanya, termasuk nilai falsy lain seperti 0, string kosong, atau false.
const hasil = nilaiKiri ?? nilaiDefault;
// hasil = nilaiKiri jika bukan null/undefined
// hasil = nilaiDefault jika nilaiKiri adalah null atau undefined
Perbedaan Mendasar dengan Operator OR (||)
Kenapa Bukan Sekadar Alternatif dari ||
Operator || mengembalikan nilai kanan jika nilai kiri bersifat falsy — mencakup 0, "", false, NaN, null, dan undefined. Operator ?? jauh lebih spesifik: hanya bereaksi terhadap null dan undefined, sehingga nilai falsy lain yang sebenarnya valid (seperti angka nol) tidak akan tergantikan secara tidak sengaja.
| Nilai Kiri | Hasil dengan || | Hasil dengan ?? |
|---|---|---|
| 0 | Nilai default (tidak diinginkan) | 0 (tetap dipertahankan) |
| “” (string kosong) | Nilai default (tidak diinginkan) | “” (tetap dipertahankan) |
| false | Nilai default (tidak diinginkan) | false (tetap dipertahankan) |
| null | Nilai default | Nilai default |
| undefined | Nilai default | Nilai default |
Contoh Kode Penggunaan Nullish Coalescing
Kasus Bug dengan Operator OR
function getDiscount(discount) {
return discount || 10; // default 10%
}
console.log(getDiscount(0));
// Hasil: 10 — padahal diskon 0% adalah nilai yang valid dan disengaja!
Solusi dengan Nullish Coalescing
function getDiscount(discount) {
return discount ?? 10; // default 10%
}
console.log(getDiscount(0));
// Hasil: 0 — nilai valid dipertahankan, default hanya aktif jika null/undefined
Kombinasi dengan Optional Chaining (?.)
Nullish coalescing sering dipasangkan dengan optional chaining untuk mengakses properti objek yang mungkin tidak ada, sekaligus memberi nilai fallback secara aman dalam satu baris kode.
const user = { profile: { nama: “Andi” } };
const kota = user.profile?.kota ?? “Kota tidak diketahui”;
console.log(kota);
// Hasil: “Kota tidak diketahui” — karena user.profile.kota memang tidak ada
Kenapa Kombinasi Ini Powerful
Optional chaining (?.) mencegah error saat mengakses properti dari objek yang berpotensi null/undefined, sementara nullish coalescing (??) menangani nilai fallback-nya secara presisi — kombinasi ini sangat umum dipakai saat menangani respons API yang strukturnya tidak selalu konsisten.
Kasus Penggunaan Nyata
Konfigurasi Default Aplikasi
Memberi nilai default pada opsi konfigurasi tanpa mengganggu nilai 0 atau false yang sengaja diset user.
Menangani Respons API
Menyediakan fallback saat field tertentu dari respons API bernilai null/undefined tanpa merusak data valid lainnya.
Form Input Numerik
Memastikan input angka nol tetap dianggap valid, bukan otomatis diganti nilai default seperti pada operator OR.
State Management
Menjaga nilai state yang sengaja diset ke false/0/string kosong tidak tertimpa nilai awal secara tidak sengaja.
Bug paling sulit dilacak dari penggunaan operator OR yang keliru bukan yang langsung crash, melainkan yang diam-diam mengganti nilai valid seperti 0 atau string kosong dengan default yang tidak diinginkan — nullish coalescing hadir tepat untuk menutup celah ini secara eksplisit.
Kesalahan Umum yang Perlu Dihindari
Mengira ?? Sama dengan ||
Banyak developer pemula mengganti semua || dengan ?? tanpa memahami bahwa keduanya menghasilkan output berbeda untuk nilai falsy non-nullish.
Mencampur ?? dengan && atau || Tanpa Kurung
JavaScript melarang mencampur ?? langsung dengan && atau || tanpa tanda kurung eksplisit untuk menghindari ambiguitas prioritas operator.
// Ini akan menghasilkan SyntaxError:
const hasil = a && b ?? c;
// Solusi: gunakan kurung eksplisit
const hasil = (a && b) ?? c;
Untuk memahami konsep JavaScript/TypeScript lain yang sering dipakai bersamaan dalam pengembangan aplikasi modern, baca juga Apa Itu JWT Token dan Apa Itu Race Condition & Solusi Database Locking.
Baca Dokumentasi Resmi MDN Web DocsFAQ — Pertanyaan Seputar Nullish Coalescing
Apakah nullish coalescing bisa dipakai di semua browser?
Ya, operator ini sudah didukung luas oleh semua browser modern sejak diperkenalkan di ECMAScript 2020 (Juli 2020).
Baca Juga:
Apakah nullish coalescing bisa langsung menggantikan semua penggunaan ||?
Tidak selalu — gunakan ?? khusus saat Anda hanya ingin fallback terjadi pada null/undefined, dan tetap gunakan || jika memang menginginkan semua nilai falsy tergantikan.
Apakah nullish coalescing tersedia di TypeScript?
Ya, TypeScript mendukung penuh operator ini sejak versi 3.7, sejalan dengan implementasinya di JavaScript standar.
Kenapa muncul SyntaxError saat menggabungkan ?? dengan && atau ||?
JavaScript mewajibkan tanda kurung eksplisit saat mencampur ketiga operator ini dalam satu ekspresi untuk menghindari ambiguitas urutan evaluasi.
Apakah nullish coalescing memengaruhi performa aplikasi?
Tidak signifikan — operator ini adalah fitur bahasa native yang dioptimalkan mesin JavaScript modern, sehingga dampaknya terhadap performa dapat diabaikan.
Kesimpulan
Nullish coalescing memberi cara yang lebih presisi untuk menangani nilai default dibanding operator OR konvensional, khususnya saat nilai falsy seperti 0, string kosong, atau false justru merupakan input valid yang tidak boleh tertimpa secara tidak sengaja. Memahami perbedaan mendasar antara ?? dan || membantu developer menulis kode yang lebih dapat diprediksi dan mengurangi bug tersembunyi di logika default value.
Gunakan nullish coalescing secara sadar sesuai kebutuhan spesifiknya, kombinasikan dengan optional chaining untuk akses properti objek yang aman, dan selalu tambahkan tanda kurung eksplisit saat mencampurnya dengan operator logika lain untuk menghindari SyntaxError.
