Operator Nullish Coalescing JavaScript: Sintaks dan Contoh Penggunaan

Operator nullish coalescing (??) merupakan operator logika yang mengembalikan operan sisi kanan jika operan sisi kiri bernilai null atau undefined.

Jika bukan kedua nilai tersebut termasuk nilai falsy yang lainnya, operator ini mengembalikan operan sisi kiri.

Sekilas perilaku operator ini mirip operator OR (||), tapi operator OR akan selalu mengembalikan operan sisi kanan selama operan sisi kiri falsy, tidak hanya null dan undefined.

Operator ini dibuat khusus untuk menangani nilai null dan undefined.

Mari kita gunakan contoh sederhana untuk melihat perbedaannnya.

const nullish1 = 0 ?? 'ops!';
const or1 = 0 || 'ops!';

console.log(nullish1); // 0
console.log(or1); // ops!

Contoh di atas menggunakan nilai falsy (0). Operator OR mengembalikan operan sisi kanan (ops!), sedangkan operator ?? mengembalikan operan sisi kiri (0).

Mari kita pelajari lebih lanjut sintaks dan contoh penggunaan operator nullish coalescing agar kita bisa menggunakannya dalam kondisi yang tepat.

1. Sintaks
2. Contoh Menangani Properti Objek yang Tidak Ada
3. Perbedaan Operator OR (||) dan Nullish Coalescing (??)

Sintaks

operanKiri ?? operanKanan;

operanKiri dan operanKanan adalah nilai atau ekspresi yang digunakan untuk melakukan operasi logika.

Contoh Menangani Properti Objek yang Tidak Ada

Saat membuat aplikasi terkadang kita perlu mengambil data dari luar melalui API, data ini terkadang berisi properti objek yang kita cari, kadang tidak.

Atau propertinya selalu ada tapi terkadang bernilai null. Semantara kita memerlukan nilai pasti dari properti tersebut.

Kondisi seperti ini bisa kita atasi dengan operator nullish coalescing agar kita bisa menentukan sendiri nilai atau ekspresi default-nya.

Contoh berikut mengakses properti nilai yang tidak ada di dalam objek mahasiswa, karena tidak ada, mahasiswa.nilai mengembalikan nilai undefined.

Karena undefined maka operan sisi kanan akan digunakan, begitu pula jika null.

const mahasiswa = {
  nama: 'budi',
  umur: 23,
};

const nilaiMahasiswa = mahasiswa.nilai ?? 0;

console.log(nilaiMahasiswa); // 0

Perbedaan Operator OR (||) dan Nullish Coalescing (??)

Agar lebih mudah melihat perbedaannya, mari kita gunakan contoh berikut.

const nullish1 = undefined ?? 'hello world';
const nullish2 = null ?? 'hello world';
const nullish3 = 0 ?? 'hello world';
const nullish4 = false ?? 'hello world';

const or1 = undefined || 'hello world';
const or2 = null || 'hello world';
const or3 = 0 || 'hello world';
const or4 = false || 'hello world';

console.log(nullish1); // hello world
console.log(nullish2); // hello world
console.log(nullish3); // 0
console.log(nullish4); // false

console.log(or1); // hello world
console.log(or2); // hello world
console.log(or3); // hello world
console.log(or4); // hello world

Perhatikan kode di atas.

Operator nullish coalescing (??) hanya mengembalikan operan sisi kanan jika operan sisi kiri bernilai undefined atau null, selain dari itu mengembalikan operan sisi kiri.

Sementara operator OR (||), selalu mengembalikan operan sisi kanan meskipun operan sisi kiri bernilai undefined, null atau nilai falsy yang lainnya.

Jadi, gunakan operator nullish coalescing jika kita mengetahui secara pasti nilai operan kiri null atau undefined.

Jika tidak, lebih baik gunakan operator OR karena dapat menangani semua nilai falsy termasuk null dan undefined.