Optional Chaining JavaScript: Cara Pakai ?. dan ?? dengan Benar

Optional chaining JavaScript adalah fitur yang menyelamatkan kodemu dari error Cannot read properties of undefined. Dengan satu operator kecil, ?., aplikasimu tidak lagi crash hanya karena sebuah data kebetulan kosong.

Bayangkan kamu mengambil data user dari API, lalu menampilkan kota tempat tinggalnya lewat user.address.city. Di komputermu semuanya lancar. Setelah aplikasi dipakai orang banyak, halaman tiba-tiba putih. Ternyata ada user yang belum mengisi alamat.

Di artikel ini kamu akan belajar optional chaining JavaScript dari dasar, lengkap dengan pasangannya yaitu ??, contoh kode, dan kesalahan yang sering terjadi.

Apa Itu Optional Chaining JavaScript?

Optional chaining JavaScript adalah operator ?. yang memeriksa dulu apakah sebuah nilai berisi null atau undefined. Kalau iya, JavaScript berhenti dan mengembalikan undefined. Kalau tidak, akses dilanjutkan seperti biasa.

Fitur ini hadir di ES2020 dan didukung semua browser modern serta Node.js versi 14 ke atas. Dokumentasi resminya bisa kamu baca di MDN Web Docs tentang optional chaining.

Masalah Sebelum Ada Optional Chaining JavaScript

Perhatikan kode berikut:

javascript

const user = { name: "Rina" };

console.log(user.address.city);
// TypeError: Cannot read properties of undefined (reading 'city')

Cara lama untuk menghindarinya adalah mengecek setiap level satu per satu:

javascript

const city = user && user.address && user.address.city;

Kode ini berfungsi, tapi panjang dan sulit dibaca. Makin dalam datanya, makin berantakan. Kalau kamu peduli pada kerapian kode, baca juga artikel kami tentang pentingnya code readability.

3 Cara Pakai Optional Chaining JavaScript

Ada tiga bentuk penggunaan yang perlu kamu kenal.

1. Optional Chaining JavaScript untuk Properti Objek

Pemakaian paling umum optional chaining JavaScript adalah mengakses properti objek yang belum tentu ada:

javascript

const city = user.address?.city;
console.log(city); // undefined (tanpa error)

Karena user.address bernilai undefined, JavaScript langsung berhenti di situ. Operator ini bisa dirangkai untuk data yang lebih dalam:

javascript

const street = user.address?.location?.street;

2. Optional Chaining JavaScript untuk Array

javascript

const users = [];
console.log(users?.[0]?.name); // undefined

Ingat bentuknya adalah ?.[, yaitu titik dulu baru kurung siku.

3. Optional Chaining JavaScript untuk Method

Optional chaining JavaScript juga aman dipakai untuk memanggil fungsi yang belum tentu tersedia:

javascript

const account = { name: "Dimas" };

account.sendEmail?.("Halo!");
// tidak terjadi apa-apa, tidak ada error

Fungsi hanya dijalankan kalau memang ada. Ini berguna untuk callback opsional.

Optional Chaining JavaScript dan Nullish Coalescing (??)

Pasangan terbaik optional chaining JavaScript adalah operator ??. Operator ini memberi nilai cadangan hanya ketika sisi kirinya null atau undefined.

javascript

const city = user.address?.city ?? "Alamat belum diisi";
console.log(city); // "Alamat belum diisi"

Pola ini paling sering dipakai: ambil data dengan aman, lalu siapkan nilai default.

?? vs ||: Jangan Sampai Tertukar

Banyak pemula memakai || untuk nilai default. Masalahnya, || menganggap 0, "", dan false sebagai nilai kosong juga.

javascript

const stock = 0;

console.log(stock || 10); // 10  (salah, stok sebenarnya 0)
console.log(stock ?? 10); // 0   (benar)

Nilai kiri	|| pakai cadangan?	?? pakai cadangan?
null	Ya	Ya
undefined	Ya	Ya
0	Ya	Tidak
""	Ya	Tidak
false	Ya	Tidak

Kalau angka 0 atau teks kosong adalah nilai sah di aplikasimu, pakai ??.

Bonus: Operator ??=

Operator ??= mengisi variabel hanya jika variabel itu masih null atau undefined:

javascript

const config = { port: 3000 };

config.port ??= 8080;     // tetap 3000
config.timeout ??= 5000;  // terisi 5000

Ini praktis untuk konfigurasi default, misalnya saat kamu membaca environment variable di Node.js.

Contoh Nyata Optional Chaining JavaScript dari API

Bayangkan respons API seperti ini:

javascript

const response = {
  data: {
    products: [
      { name: "Keyboard", price: 250000, discount: 0 }
    ]
  }
};

const product = response?.data?.products?.[0];
const name = product?.name ?? "Produk tidak ditemukan";
const discount = product?.discount ?? 5;

console.log(name);     // "Keyboard"
console.log(discount); // 0 (diskon 0 tetap dihormati)

Bentuk respons API tidak selalu konsisten, terutama saat kamu membandingkan REST API dan GraphQL. Di situasi seperti inilah optional chaining JavaScript membuat kodemu jauh lebih tahan banting.

4 Kesalahan Umum Optional Chaining JavaScript

1. Memakainya di mana-mana.
Terlalu banyak memakai optional chaining JavaScript bisa menyembunyikan bug. Kalau sebuah properti memang wajib ada, biarkan error muncul agar kamu tahu ada yang salah.

2. Memakainya di sisi kiri assignment.

javascript

user?.name = "Budi"; // SyntaxError

Operator ini hanya untuk membaca, bukan menulis.

3. Mencampur ?? dengan || atau && tanpa kurung.

javascript

const a = x || y ?? z;   // SyntaxError
const b = (x || y) ?? z; // benar

4. Mengira ?. memeriksa semua hal.
Operator ini hanya mengecek null dan undefined. Nilai 0 atau "" tetap dianggap ada.

Tips Memakai Optional Chaining JavaScript

• Gunakan optional chaining JavaScript untuk data dari luar yang tidak bisa kamu kontrol, seperti API, input pengguna, atau hasil parsing JSON.
• Pasangkan dengan ?? agar tampilan selalu punya nilai cadangan yang masuk akal.
• Untuk event yang sering terpicu seperti ketikan atau scroll, kombinasikan dengan debounce dan throttle agar performa tetap ringan.

Pertanyaan yang Sering Diajukan (FAQ)

Apa fungsi optional chaining JavaScript?

Fungsi optional chaining JavaScript adalah mengakses properti, elemen array, atau method dengan aman. Jika nilai di tengah rantai null atau undefined, hasilnya undefined dan program tidak error.

Apakah optional chaining JavaScript didukung semua browser?

Semua browser modern mendukungnya. Internet Explorer tidak mendukung, kecuali kamu memakai Babel atau transpiler sejenis.

Apa beda ?. dan ???

?. dipakai untuk mengakses data dengan aman, sedangkan ?? dipakai untuk memberi nilai default saat hasilnya null atau undefined.

Kapan sebaiknya memakai ?? dibanding ||?

Pakai ?? ketika 0, string kosong, atau false adalah nilai valid yang tidak boleh diganti nilai default.

Kesimpulan

Optional chaining JavaScript membuat kodemu lebih pendek, lebih rapi, dan jauh lebih aman dari error undefined. Ingat tiga hal inti: ?. untuk akses aman, ?? untuk nilai default yang akurat, dan jangan dipakai berlebihan sampai bug tersembunyi.

Coba terapkan hari ini: buka salah satu proyekmu, cari kode berantai seperti a && a.b && a.b.c, lalu ubah menjadi a?.b?.c. Hasilnya langsung terasa lebih bersih.