Oleh Admin Dunia Coding · Kategori: Bahasa Pemrograman
Optional chaining JavaScript adalah fitur yang menyelamatkan kamu dari error paling sering di dunia web development: Cannot read properties of undefined. Bayangkan kamu menarik data profil dari API, lalu halaman tiba-tiba kosong karena satu field alamat ternyata tidak dikirim server. Dengan operator ?., masalah seperti ini selesai dalam satu karakter.
Di artikel ini, kamu akan belajar apa itu optional chaining JavaScript, sintaks dasarnya, enam contoh praktis, pasangannya (??), sampai kesalahan yang sering dilakukan pemula.
Apa Itu Optional Chaining JavaScript?
Optional chaining adalah operator ?. yang membaca properti, memanggil fungsi, atau mengakses elemen array secara aman. Jika nilai di sebelah kirinya null atau undefined, ekspresi langsung berhenti dan mengembalikan undefined, tanpa melempar error.
Fitur ini resmi masuk standar ECMAScript 2020 dan kini didukung semua browser modern serta Node.js. Dokumentasi lengkapnya ada di MDN Web Docs.
Istilah teknisnya short-circuit: begitu ketemu null atau undefined, sisa rantai tidak dievaluasi sama sekali.
Masalah yang Diselesaikan Optional Chaining JavaScript
Perhatikan kode berikut. Objek user tidak punya properti address:
const user = { name: 'Rani' };
console.log(user.address.city);
// TypeError: Cannot read properties of undefined (reading 'city')Sebelum ada ?., developer harus memeriksa setiap level secara manual:
const city = user && user.address && user.address.city;Kode ini panjang, berulang, dan mudah salah ketik. Dengan optional chaining JavaScript, hasilnya jauh lebih ringkas:
const city = user?.address?.city;
console.log(city); // undefined, tanpa errorSatu baris, tiga level, dan tidak ada yang meledak.
Sintaks Dasar Optional Chaining JavaScript
Ada tiga bentuk penulisan yang perlu kamu hafal:
| Bentuk | Fungsi | Contoh |
|---|---|---|
obj?.prop | Mengakses properti | user?.name |
obj?.[key] | Mengakses lewat kurung siku atau indeks array | list?.[0] |
fn?.() | Memanggil fungsi jika ada | callback?.() |
Aturan mainnya sederhana: tanda ? ditaruh tepat setelah nilai yang mungkin kosong, bukan di akhir ekspresi.
6 Contoh Optional Chaining JavaScript
1. Membaca Data Bersarang dari API
Response API sering tidak konsisten. Field tertentu kadang hilang, apalagi pada data opsional seperti alamat atau foto profil.
const response = await fetch('/api/users/7');
const data = await response.json();
const avatar = data?.profile?.avatar;
const country = data?.address?.country;Jika server mengirim error atau field kosong, variabel hanya bernilai undefined. Aplikasi tetap jalan. Untuk memahami gaya API lain, baca juga REST API vs GraphQL.
2. Mengakses Elemen Array dengan Aman
Bentuk ?.[] berguna saat array mungkin belum terisi.
const orders = [];
console.log(orders[0].id); // TypeError
console.log(orders?.[0]?.id); // undefinedPerhatikan bahwa orders[0] pada array kosong menghasilkan undefined, sehingga ?.id yang kedua yang benar-benar menyelamatkan kode ini.
3. Memanggil Method yang Mungkin Tidak Ada
Bentuk ?.() memanggil fungsi hanya jika fungsi itu ada.
function tombolDiklik(opsi) {
opsi.onSuccess?.();
}
tombolDiklik({ onSuccess: () => console.log('Berhasil!') });
tombolDiklik({}); // aman, tidak ada yang terjadiPola ini sering dipakai pada callback opsional di library maupun komponen buatan sendiri.
4. Mengambil Elemen DOM yang Belum Tentu Ada
document.querySelector mengembalikan null jika elemen tidak ketemu. Tanpa pengaman, baris berikut bisa menghentikan seluruh script.
const judul = document.querySelector('#judul')?.textContent;
document.querySelector('.banner')?.classList.add('aktif');Jika elemen tidak ada, kedua baris itu diam saja alih-alih melempar error.
5. Menambah Nilai Default dengan Operator ??
Optional chaining sering dipasangkan dengan nullish coalescing (??) untuk memberi nilai cadangan.
const kota = user?.address?.city ?? 'Kota belum diisi';
console.log(kota); // Kota belum diisiJika seluruh rantai menghasilkan undefined, operator ?? mengambil nilai di sebelah kanannya.
6. Membaca Data dari localStorage
Data di storage browser bisa saja kosong atau rusak. Gabungkan ?. dengan JSON.parse yang dibungkus pengaman:
const raw = localStorage.getItem('pengaturan');
const pengaturan = raw ? JSON.parse(raw) : null;
const tema = pengaturan?.tampilan?.tema ?? 'terang';Belum paham beda tempat penyimpanan data di browser? Baca perbedaan local storage, session storage, dan cookies.
Optional Chaining dan Nullish Coalescing: Pasangan Serasi
Banyak pemula memakai || untuk nilai default. Padahal || menganggap 0, string kosong, dan false sebagai nilai yang salah, sehingga datamu bisa tertimpa tanpa sengaja.
const stok = 0;
console.log(stok || 10); // 10, salah: stok sebenarnya 0
console.log(stok ?? 10); // 0, benarOperator ?? hanya mengganti nilai jika null atau undefined. Karena itu, ?. dan ?? adalah kombinasi paling aman untuk membaca data yang tidak pasti. Penjelasan resminya ada di dokumentasi nullish coalescing di MDN.
Kesalahan Umum saat Memakai Optional Chaining JavaScript
Meski praktis, ada beberapa jebakan yang sering menjebak pemula.
Memakainya di Mana-Mana
Jika sebuah nilai seharusnya selalu ada, jangan tambahkan ?. hanya demi aman. Tanda tanya itu justru menyembunyikan bug: data hilang tetapi tidak ada error yang memberi tahu kamu.
Menaruhnya di Sisi Kiri Penugasan
Optional chaining hanya untuk membaca nilai. Kode berikut tidak valid dan akan memunculkan syntax error:
user?.name = 'Budi'; // SyntaxErrorMengira Variabel yang Belum Dideklarasikan Ikut Aman
Operator ?. melindungi dari nilai null dan undefined, bukan dari variabel yang tidak pernah dibuat.
console.log(belumAda?.nama); // ReferenceError: belumAda is not definedMemanggil ?.() pada Nilai yang Bukan Fungsi
Jika properti ada tetapi isinya bukan fungsi, error tetap muncul:
const obj = { aksi: 'bukan fungsi' };
obj.aksi?.(); // TypeError: obj.aksi is not a functionOptional chaining hanya mengecek null atau undefined, bukan tipe data.
Dukungan Browser, Node.js, dan TypeScript
Optional chaining aman dipakai di proyek modern:
- Browser: Chrome 80, Firefox 74, Safari 13.1, dan Edge 80 ke atas.
- Node.js: versi 14 ke atas.
- TypeScript: didukung sejak versi 3.7.
Jika proyekmu masih harus mendukung browser lama, build tool seperti Babel dapat mengubahnya menjadi kode yang kompatibel. Untuk proyek baru, kamu tidak perlu khawatir.
Kapan Sebaiknya Tidak Memakai Optional Chaining JavaScript?
Gunakan optional chaining JavaScript hanya untuk data yang memang boleh kosong, misalnya field opsional dari API atau elemen yang belum tentu muncul di halaman. Untuk data wajib, lebih baik validasi di awal dan beri pesan error yang jelas.
Jika kamu sering menulis rantai ?. yang panjang, itu tanda struktur datamu perlu dirapikan. Kebiasaan menulis kode yang mudah dibaca juga membantu, seperti yang dibahas di pentingnya code readability.
Pertanyaan yang Sering Diajukan (FAQ)
Apa fungsi tanda ?. di JavaScript?
Tanda ?. adalah operator optional chaining. Fungsinya mengakses properti atau memanggil method secara aman. Jika nilai di kirinya null atau undefined, hasilnya undefined tanpa error.
Apa bedanya optional chaining dan nullish coalescing?
Optional chaining (?.) mencegah error saat membaca properti dari nilai kosong. Nullish coalescing (??) memberi nilai cadangan jika hasilnya null atau undefined. Keduanya sering dipakai bersama.
Apakah optional chaining JavaScript bisa dipakai di semua browser?
Semua browser modern mendukungnya. Untuk browser lama seperti Internet Explorer, kamu perlu transpiler seperti Babel.
Apakah optional chaining memperlambat kode?
Tidak terasa. Selisih performanya sangat kecil dibanding manfaat kode yang lebih aman dan lebih pendek.
Apakah optional chaining bisa dipakai dengan await dan fetch?
Bisa. Kamu cukup menuliskannya pada hasil parsing, misalnya data?.items?.[0], seperti pada contoh pertama di atas.
Kesimpulan
Optional chaining JavaScript membuat kode lebih pendek, lebih aman, dan lebih mudah dibaca. Kuncinya ada pada tiga bentuk: ?. untuk properti, ?.[] untuk indeks, dan ?.() untuk fungsi. Pasangkan dengan ?? untuk nilai default, dan pakai hanya pada data yang memang boleh kosong.
Sekarang coba buka proyek lamamu, cari rantai && yang panjang, lalu ganti dengan ?.. Kamu akan langsung merasakan bedanya. Kalau tulisan ini membantu, jelajahi artikel lain di Dunia Coding untuk terus belajar ngoding setiap hari.
