Kita bahas Nullish Coalescing Operator (??) dari dasar sampai benar-benar paham, terutama bedanya dengan OR Operator (||). Ini salah satu operator yang sangat berguna di TypeScript/JavaScript ketika kita ingin memberikan nilai default, tetapi hanya ketika nilai sebelumnya benar-benar null atau undefined.

1. Apa itu Nullish Coalescing Operator?

Nullish Coalescing Operator ditulis dengan:

??

Bentuk dasarnya:

nilaiPertama ?? nilaiDefault

Cara membacanya:

“Kalau nilaiPertama bukan null dan bukan undefined, gunakan nilaiPertama. Kalau nilaiPertama adalah null atau undefined, gunakan nilaiDefault.”

Jadi secara sederhana:

              ┌── null / undefined ──→ gunakan kanan
nilai kiri ───┤
              └── selain itu ────────→ gunakan kiri

Contoh:

const value = null;

const storage = value ?? "default";

console.log(storage);

Hasil:

default

Kenapa?

Karena:

value === null

Maka JavaScript menggunakan nilai di sebelah kanan:

"default"

2. Kenapa kita membutuhkan ???

Biasanya kita menggunakan ?? ketika kita ingin memberikan nilai cadangan/default.

Misalnya:

const username = null;

const displayName = username ?? "Guest";

console.log(displayName);

Karena username adalah null, maka:

displayName = "Guest";

Jadi:

username
   ↓
 null
   ↓
?? "Guest"
   ↓
"Guest"

Tapi kalau:

const username = "John";

const displayName = username ?? "Guest";

Maka:

username
   ↓
"John"
   ↓
bukan null/undefined
   ↓
"John"

Hasil:

console.log(displayName);
// John

3. Aturan utama ??

Ini adalah aturan yang wajib diingat:

A ?? B

artinya:

Jika A adalah null atau undefined, ambil B. Jika A bukan null dan bukan undefined, ambil A.

Kita bisa membuat tabel:

Nah, di sinilah kehebatan ??.

Dia hanya peduli kepada null dan undefined.

4. Bedanya dengan ||

Ini bagian paling penting dari lecture.

JavaScript memiliki operator:

||

yang disebut Logical OR Operator.

Contoh:

const value = null;

const storage = value || "default";

Hasilnya:

"default"

Karena null adalah falsy value.

Tapi masalahnya adalah || tidak hanya mengecek null dan undefined.

Dia mengecek semua falsy value.

5. Apa itu falsy value?

Beberapa nilai yang dianggap falsy di JavaScript:

false
0
""
null
undefined
NaN

Contohnya:

console.log(Boolean(false));      // false
console.log(Boolean(0));          // false
console.log(Boolean(""));         // false
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false
console.log(Boolean(NaN));        // false

Karena nilai-nilai tersebut falsy, operator || akan menganggapnya sebagai “tidak ada nilai yang bisa digunakan”.

6. Masalah dengan ||

Misalnya:

const value = "";

const storage = value || "default";

console.log(storage);

Kita mungkin berpikir:

value adalah empty string. Berarti gunakan empty string.

Tetapi || berpikir:

"" → falsy

Maka dia mengambil nilai sebelah kanan:

"default"

Hasil:

default

Padahal mungkin empty string memang merupakan nilai yang valid.

7. ?? menyelesaikan masalah tersebut

Sekarang kita ubah:

const value = "";

const storage = value ?? "default";

console.log(storage);

Hasilnya:

""

Kenapa?

Karena ?? bertanya:

Apakah value null?

Tidak.

Apakah value undefined?

Tidak.

Maka:

""

dianggap sebagai nilai yang valid.

Jadi hasilnya tetap:

""

8. Perhatikan perbandingan ini

Ini sangat penting:

Menggunakan ||

const value = "";

const result = value || "default";

Hasil:

"default"

Karena:

"" → falsy

Menggunakan ??

const value = "";

const result = value ?? "default";

Hasil:

""

Karena:

"" → bukan null
"" → bukan undefined

Maka "" dipertahankan.

9. Contoh dengan angka 0

Ini juga kasus yang sering terjadi.

Misalnya kita punya jumlah barang:

const quantity = 0;

Angka 0 sangat mungkin merupakan nilai yang valid.

Misalnya:

User memiliki 0 barang.

Kalau kita menggunakan:

const result = quantity || 10;

Hasilnya:

10

Kenapa?

Karena:

0

adalah falsy.

Padahal kita mungkin ingin:

0

karena memang jumlah barangnya nol.

Dengan ??:

const result = quantity ?? 10;

Hasil:

0

Karena 0 bukan null dan bukan undefined.

10. Contoh dengan false

Misalnya kita punya status:

const isLoggedIn = false;

false adalah nilai yang valid.

Artinya:

User memang belum login.

Kalau:

const status = isLoggedIn || true;

Hasil:

true

Ini bisa menjadi bug.

Karena false dianggap falsy oleh ||.

Dengan:

const status = isLoggedIn ?? true;

hasilnya:

false

Karena false bukan null dan bukan undefined.

11. Jadi inti perbedaannya apa?

Kita buat visual sederhana.

||

LEFT
 ↓
Apakah falsy?
 ↓
YES ─────→ ambil RIGHT
NO  ─────→ ambil LEFT

Sedangkan:

??

LEFT
 ↓
Apakah null atau undefined?
 ↓
YES ─────→ ambil RIGHT
NO  ─────→ ambil LEFT

Ini perbedaan fundamentalnya.

12. Bandingkan semua nilai

Misalnya:

const defaultValue = "DEFAULT";

Dengan ||

Karena || mencari truthy value.

Dengan ??

Karena ?? hanya mencari apakah nilainya:

null
atau
undefined

13. Analogi yang mudah

Bayangkan kamu punya sebuah formulir.

Kamu bertanya:

“Kalau user tidak memberikan data, gunakan data default.”

Misalnya:

const name = user.name ?? "Guest";

Artinya:

Kalau user.name benar-benar tidak tersedia (null/undefined), gunakan "Guest".

Tetapi kalau user memberikan:

""

maka "" tetap dianggap sebagai data yang diberikan.

Begitu juga:

0

dan:

false

tetap dianggap sebagai nilai yang valid.

14. Contoh dunia nyata: DOM

Lecture juga memberikan contoh DOM.

Misalnya:

const button = document.getElementById("submit");

Kalau element dengan ID "submit" tidak ditemukan, hasilnya bisa:

null

Kita bisa memberikan fallback:

const button = document.getElementById("submit");

const result = button ?? "Button tidak ditemukan";

Kalau button adalah:

null

maka:

result = "Button tidak ditemukan";

Kalau element ditemukan:

result = button

Jadi:

getElementById()
       ↓
   ┌───┴────┐
   ↓        ↓
 element   null
   ↓        ↓
 gunakan   default
 element   value

15. Contoh dari API

?? juga sangat sering berguna ketika mengambil data dari API.

Misalnya API mengembalikan:

const user = {
    name: "John",
    age: null
};

Kita ingin memberikan umur default:

const age = user.age ?? 0;

console.log(age);

Hasil:

0

Karena:

user.age === null

Tapi kalau:

const user = {
    name: "John",
    age: 0
};

Maka:

const age = user.age ?? 18;

hasilnya:

0

Bukan:

18

Karena 0 adalah nilai valid.

Ini salah satu alasan ?? sangat berguna ketika berurusan dengan data dari API, database, form, konfigurasi, dan sebagainya.

16. ?? bukan operator yang sama dengan ||

Jangan berpikir:

??

hanyalah versi lain dari:

||

Mereka memiliki tujuan yang sedikit berbeda.

||

Biasanya digunakan ketika kita ingin:

“Kalau nilai sebelah kiri dianggap falsy, gunakan nilai alternatif.”

Contoh:

const message = userMessage || "No message";

??

Digunakan ketika kita ingin:

“Kalau nilai sebelah kiri tidak ada, yaitu null atau undefined, gunakan nilai alternatif.”

Contoh:

const message = userMessage ?? "No message";

17. Cara berpikir yang benar

Saat melihat:

const result = value || "default";

tanyakan:

“Apakah saya ingin mengganti semua falsy value?”

Kalau iya, || mungkin cocok.

Misalnya:

const username = input || "Guest";

Kalau input kosong:

""

kita memang mungkin ingin menggunakan "Guest".

Saat melihat:

const result = value ?? "default";

tanyakan:

“Saya hanya ingin menggunakan default kalau nilainya benar-benar tidak ada?”

Kalau jawabannya iya, gunakan ??.

18. ?? sangat cocok untuk default value

Misalnya:

const username = undefined;

const name = username ?? "Guest";

Artinya:

username ada?
    ↓
tidak
    ↓
gunakan Guest

Sedangkan:

const username = "Budi";

const name = username ?? "Guest";

Artinya:

username ada?
    ↓
ya → "Budi"

19. Bisa digunakan berantai

?? juga bisa digunakan lebih dari sekali:

const result = value1 ?? value2 ?? value3 ?? "default";

Cara kerjanya:

value1
  ↓
null/undefined?
  ↓ yes
value2
  ↓
null/undefined?
  ↓ yes
value3
  ↓
null/undefined?
  ↓ yes
"default"

Contoh:

const firstName = null;
const nickname = undefined;
const username = "John";

const displayName = firstName ?? nickname ?? username ?? "Guest";

console.log(displayName);

Hasil:

John

Karena:

firstName → null → lewati
nickname  → undefined → lewati
username  → "John" → gunakan

20. ?? tidak mengubah nilai aslinya

Misalnya:

const value = null;

const storage = value ?? "default";

value tetap:

null

Sedangkan:

storage

menjadi:

"default"

Jadi ?? menghasilkan nilai baru dari ekspresi tersebut. Dia tidak otomatis mengubah variable sebelah kiri.

21. Ada juga ??=

Nah, ada satu operator yang namanya mirip:

??=

Ini adalah nullish coalescing assignment.

Contoh:

let username;

username ??= "Guest";

console.log(username);

Hasil:

Guest

Kurang lebih seperti:

username = username ?? "Guest";

Artinya:

Kalau username null/undefined, isi dengan "Guest".

Tetapi kalau:

let username = "John";

username ??= "Guest";

hasilnya tetap:

John

Karena username sudah punya nilai yang bukan null/undefined.

Jadi jangan tertukar:

??

→ menghasilkan nilai berdasarkan pengecekan nullish.

??=

→ melakukan assignment kalau nilainya nullish.

22. Kesalahan umum yang harus dihindari

Kesalahan paling umum adalah menganggap:

?? mengecek semua falsy value.

Salah.

?? hanya mengecek:

null
undefined

Tidak mengecek:

0
""
false
NaN

Contoh:

0 ?? 100

hasil:

0

"" ?? "Hello"

hasil:

""

false ?? true

hasil:

false

Tetapi:

null ?? "Hello"

hasil:

"Hello"

dan:

undefined ?? "Hello"

hasil:

"Hello"

23. Cara mengingat || vs ??

Gunakan kalimat ini:

||

“Kalau kiri falsy, ambil kanan.”

??

“Kalau kiri nullish, ambil kanan.”

Di sini nullish berarti:

null
undefined

Jadi:

||  → cek FALSY
??  → cek NULL / UNDEFINED

24. Analogi terakhir: kursi kosong

Bayangkan kamu punya kursi dengan tulisan:

value ?? "default"

Aturannya:

“Saya hanya akan memberikan kursi pengganti kalau kursi sebelumnya benar-benar kosong.”

Yang dianggap kosong:

null
undefined

Tetapi:

0
false
""

tetap dianggap sebagai isi yang sah.

Sedangkan || lebih ketat:

“Kalau isinya dianggap falsy, saya anggap tidak valid dan pakai pengganti.”

25. Cheat Sheet

🧠 Inti lecture ini

Kalau kamu hanya mengingat satu hal, ingat ini:

             ?? 
          ┌───────┐
          │       │
          ↓       ↓
       LEFT      RIGHT
          │
          │
   null / undefined?
       │       │
      YES      NO
       │       │
       ↓       ↓
     RIGHT    LEFT

Atau versi super singkat:

A ?? B

dibaca:

“Pakai A, kecuali A adalah null atau undefined. Kalau begitu, pakai B.”

Sedangkan:

A || B

dibaca:

“Pakai A, kecuali A adalah falsy. Kalau begitu, pakai B.”

Jadi perbedaan terpentingnya adalah:

||  → null, undefined, "", 0, false, NaN
??  → null, undefined SAJA

Kalau kamu sudah memahami perbedaan ini, kamu sudah memahami inti dari Nullish Coalescing Operator.