Cara Menggunakan Optional Chaining dan Nullish Coalescing di JavaScript

Pernahkah kamu melihat pesan error berwarna merah di konsol browser yang berbunyi TypeError: Cannot read properties of undefined (reading 'nama')? Bagi seorang developer JavaScript, error ini mirip seperti tamu tidak diundang yang sering datang tiba-tiba saat aplikasi sedang berjalan. Masalah ini biasanya muncul ketika kode kamu mencoba mengambil data dari sebuah objek yang ternyata kosong, tidak ada, atau belum selesai dimuat dari server (API).

Sebelum tahun 2020, untuk mengamankan kode dari error semacam ini, kamu harus menulis percabangan if yang panjang atau menggunakan operator logika && yang bertumpuk-tumpuk. Kode menjadi panjang, sulit dibaca, dan melelahkan untuk dirawat. Untungnya, pembaruan ECMAScript 2020 (ES2020) membawa dua fitur baru yang menjadi penyelamat: Optional Chaining (?.) dan Nullish Coalescing (??). Dua fitur ini membuat kode kamu jauh lebih bersih, aman, dan mudah dipahami.

Error Akibat Data yang Hilang

Bayangkan kamu sedang membuat aplikasi toko online. Kamu mengambil data profil pengguna dari database. Struktur datanya kira-kira seperti ini:

const pengguna = {
  nama: "Rian",
  kontak: {
    email: "rian@Email.com"
  }
};

Jika kamu ingin mengambil data kota dari alamat pengguna, kamu mungkin akan menulis kode seperti pengguna.kontak.alamat.kota. Masalahnya, di dalam objek di atas, properti alamat tidak ada. Saat kode tersebut dijalankan, JavaScript akan langsung mogok dan melemparkan error yang merusak seluruh jalannya aplikasi.

Cara lama untuk mengatasi hal ini adalah dengan melakukan pengecekan manual di setiap level properti:

let kota = "Kota tidak diketahui";
if (pengguna && pengguna.kontak && pengguna.kontak.alamat) {
  kota = pengguna.kontak.alamat.kota;
}

Atau menggunakan operator && seperti ini:

const kota = pengguna && pengguna.kontak && pengguna.kontak.alamat && pengguna.kontak.alamat.kota;

Coba bayangkan jika struktur objeknya masuk ke dalam hingga lima atau enam tingkat. Kode kamu akan dipenuhi oleh pengulangan kata yang sama. Di sinilah Optional Chaining datang membawa solusi.

Mengenal Optional Chaining (?.)

Optional Chaining, yang ditulis dengan simbol tanda tanya diikuti titik (?.), mengubah cara JavaScript membaca properti di dalam objek. Cara kerjanya sederhana: jika bagian sebelum simbol ?. bernilai undefined atau null, JavaScript akan langsung berhenti mengecek ke dalam dan langsung mengembalikan nilai undefined, tanpa membuat aplikasi kamu error.

1. Mengakses Properti Objek Bertingkat

Dengan menggunakan optional chaining, kode pengecekan alamat yang panjang di atas bisa kamu ringkas menjadi satu baris saja:

const kota = pengguna?.kontak?.alamat?.kota;
console.log(kota); // Hasilnya: undefined (tanpa error!)

JavaScript akan memeriksa apakah pengguna ada. Jika ada, ia lanjut memeriksa kontak. Ketika sampai di alamat dan mendapati bahwa properti tersebut tidak ada (undefined), proses pencarian langsung dihentikan. Nilai variabel kota otomatis menjadi undefined.

2. Memanggil Method yang Belum Tentu Ada

Optional chaining tidak hanya berlaku untuk properti data, tetapi juga bisa digunakan saat kamu ingin memanggil fungsi (method) di dalam objek yang sifatnya opsional atau mungkin belum didefinisikan.

const bot = {
  sapa: function() {
    return "Halo, selamat datang!";
  }
};

// Memanggil fungsi yang ada
console.log(bot.sapa?.()); // Hasilnya: "Halo, selamat datang!"

// Memanggil fungsi yang tidak ada
console.log(bot.jalan?.()); // Hasilnya: undefined (tidak error)

Jika kamu lupa memberikan simbol ?. pada fungsi bot.jalan(), aplikasi akan error karena kamu mencoba mengeksekusi sesuatu yang bukan merupakan fungsi.

3. Mengambil Data dari Array

Kamu juga bisa memanfaatkan fitur ini saat bekerja dengan dynamic array atau data list yang dikirim dari server, untuk memastikan indeks array tersebut tersedia sebelum kamu membaca datanya.

const daftarPengguna = ["Andi", "Budi"];
console.log(daftarPengguna?.[0]); // Hasilnya: "Andi"
console.log(daftarPengguna?.[5]); // Hasilnya: undefined

Kelemahan Operator OR (||) untuk Nilai Default

Setelah berhasil mengamankan kode dari error menggunakan optional chaining, langkah berikutnya biasanya adalah memberikan nilai bawaan (default value) jika data yang dicari ternyata kosong. Biasanya, developer menggunakan operator OR (||) untuk kebutuhan ini.

const skorLayanan = pengguna?.skor || 10;

Kode di atas berarti: jika pengguna.skor tidak ada, berikan nilai default 10. Cara ini terlihat bekerja dengan baik, sampai kamu menemukan masalah besar saat berhadapan dengan angka nol (0), string kosong (""), atau nilai Boolean false.

Di dalam JavaScript, nilai-nilai berikut dianggap sebagai nilai yang salah atau falsy:

• false
• 0 (angka nol)
• "" atau '' (string kosong)
• null
• undefined
• NaN

Operator || akan selalu mengambil nilai di sebelah kanan jika nilai di sebelah kirinya adalah falsy. Perhatikan masalah nyata berikut:

const preferensiGame = {
  volumeSuara: 0,
  aktifkanMusik: false,
  namaTampilan: ""
};

const volume = preferensiGame.volumeSuara || 50;
const musik = preferensiGame.aktifkanMusik || true;
const nama = preferensiGame.namaTampilan || "Guest";

console.log(volume); // Hasilnya: 50 (Padahal user sengaja set ke 0!)
console.log(musik);  // Hasilnya: true (Padahal user sengaja mematikan musik!)
console.log(nama);   // Hasilnya: "Guest" (Padahal user ingin namanya kosong!)

Ini adalah bug logika yang sering tidak disadari. Nilai 0, false, dan string kosong adalah data yang sah dan sengaja diatur oleh pengguna, tetapi ditolak oleh operator || karena dianggap falsy. Di sinilah Nullish Coalescing hadir sebagai penyelamat.

Mengenal Nullish Coalescing (??)

Nullish Coalescing ditulis dengan simbol dua tanda tanya (??). Operator ini dibuat khusus untuk menyelesaikan masalah bug logika dari operator ||. Berbeda dengan operator OR yang memeriksa semua nilai falsy, operator ?? hanya akan berpindah ke nilai default jika nilai di sebelah kirinya adalah nullish, yaitu hanya bernilai null atau undefined.

Mari kita perbaiki contoh kasus preferensi game di atas menggunakan operator ??:

const preferensiGame = {
  volumeSuara: 0,
  aktifkanMusik: false,
  namaTampilan: ""
};

const volume = preferensiGame.volumeSuara ?? 50;
const musik = preferensiGame.aktifkanMusik ?? true;
const nama = preferensiGame.namaTampilan ?? "Guest";

console.log(volume); // Hasilnya: 0 (Tepat!)
console.log(musik);  // Hasilnya: false (Tepat!)
console.log(nama);   // Hasilnya: "" (Tepat!)

Sistem sekarang berjalan dengan cerdas. Nilai 0, false, dan string kosong tetap dipertahankan karena mereka bukan null atau undefined.

Menggabungkan ?. dan ??

Kekuatan sejati dari kedua fitur ini akan terlihat jelas saat kamu menggabungkannya dalam satu baris kode. Kamu bisa mengamankan pembacaan data objek sekaligus memberikan nilai cadangan yang akurat jika data tersebut benar-benar kosong.

Mari kembali ke contoh kasus data profil toko online kita:

const dataPelanggan = {
  id: 1024,
  biodata: {
    panggilan: ""
  },
  status: {
    poinBelanja: 0
  }
};

// Mengambil data yang jalurnya tidak lengkap
const kotaKirim = dataPelanggan?.biodata?.alamat?.kota ?? "Jakarta";
console.log(kotaKirim); // Hasilnya: "Jakarta" (karena alamat tidak ada)

// Mengambil data yang nilainya string kosong
const namaUser = dataPelanggan?.biodata?.panggilan ?? "Pelanggan Setia";
console.log(namaUser); // Hasilnya: "" (karena string kosong dianggap data sah)

// Mengambil data yang nilainya angka nol
const totalPoin = dataPelanggan?.status?.poinBelanja ?? 10;
console.log(totalPoin); // Hasilnya: 0 (karena 0 dianggap data sah)

Dengan menggabungkan ?. dan ??, kode kamu tidak hanya aman dari crash, tetapi juga tetap menjaga integritas data asli yang diinput oleh pengguna atau dikirim oleh server.

Kapan Harus Menggunakan Apa?

Agar kamu tidak bingung menentukan pilihan saat menulis kode di dunia nyata, gunakan tabel perbandingan sederhana ini sebagai panduan cepat:

Aturan Penting yang Harus Kamu Perhatikan

Meskipun kedua fitur ini sangat memudahkan pekerjaanmu, ada beberapa batasan penting yang tidak boleh kamu langgar agar tidak menimbulkan error jenis baru.

1. Jangan Gunakan ?. untuk Menulis Data (Left-Hand Side Assignment)

Optional chaining hanya berfungsi untuk membaca atau mengambil data. Kamu tidak bisa menggunakannya untuk memasukkan data ke dalam sebuah objek.

const toko = {};
toko?.nama = "Toko Berkah"; // Error: Invalid left-hand side in assignment

Jika kamu ingin mengisi data, kamu tetap harus memastikan objek induknya sudah dibuat terlebih dahulu menggunakan pengecekan manual standar.

2. Hindari Penggunaan Campuran dengan Operator Logika Lain Tanpa Tanda Kurung

JavaScript melarang kamu mencampur operator ?? langsung dengan operator AND (&&) atau OR (||) dalam satu baris tanpa batasan yang jelas. Ini dilakukan untuk menghindari kebingungan urutan eksekusi kode.

// Kode ini akan memicu syntax error
const data = nilaiA && nilaiB ?? "Default"; // Error!

// Solusi yang benar: Gunakan tanda kurung pembatas
const dataAman = (nilaiA && nilaiB) ?? "Default";

Kesimpulan

Menguasai Optional Chaining (?.) dan Nullish Coalescing (??) adalah langkah besar untuk menulis kode JavaScript yang lebih profesional, modern, dan minim bug. Kode kamu akan terbebas dari rantai pengecekan kondisional yang panjang, sekaligus memastikan aplikasi tidak mendadak mati hanya karena keterlambatan pengiriman data dari API.

Mulai sekarang, gantilah kebiasaan menggunakan operator || dengan ?? jika data yang kamu olah melibatkan angka, status boolean, atau teks kosong agar aplikasi buatanmu berjalan lebih presisi dan akurat.

Daftar Referensi

1. MDN Web Docs. (2023). Optional chaining (?.). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
2. MDN Web Docs. (2023). Nullish coalescing operator (??). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
3. Ecma International. (2020). ECMAScript 2020 Language Specification. https://www.ecma-international.org/publications-and-standards/standards/ecma-262/
4. Javascript.info. (2022). Optional chaining '?.'. https://javascript.info/optional-chaining