JavaScript - Optional Chaining (ID)

Halo sana, para ahli JavaScript masa depan! ? Hari ini, kita akan memulai perjalanan yang menarik ke dunia Optional Chaining. Jangan khawatir jika Anda baru belajar programming - saya akan menjadi panduan yang ramah, dan kita akan mengambil langkah ini satu per satu. Pada akhir pelajaran ini, Anda akan bisa menghubungkan seperti seorang pro! Ayo masuk ke dalam!

Masalah Properti yang Tidak Ada

Imaginasi Anda mencari buku di perpustakaan besar. Anda tahu itu seharusnya ada di bagian "Science Fiction", di lantai ketiga, di sudut belakang. tapi apa kalau perpustakaan itu bahkan tidak punya lantai ketiga? Atau apa kalau tidak ada bagian "Science Fiction"? Itu jenis masalah yang kita sering hadapi di JavaScript saat berhubungan dengan objek bersarang.

mari lihat contoh:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi.books);

Jika Anda menjalankan kode ini, Anda akan mendapat kesalahan: "Cannot read property 'books' of undefined". Mengapa? Karena library.fiction.sciFi tidak ada! Itu di mana Optional Chaining datang untuk menyelamatkan.

Apa Itu Optional Chaining di JavaScript?

Optional Chaining seperti jaringan keselamatan untuk kode Anda. Itu memungkinkan Anda untuk mengakses properti objek bersarang tanpa khawatir jika properti intermediate ada. Itu ditandai oleh operator ?..

mari tulis ulang contoh sebelumnya dengan Optional Chaining:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi?.books);

Sekarang, instead of melempar kesalahan, ini hanya akan mengembalikan undefined. Itu seperti meminta, "Jika sciFi ada, bisakah Anda memberikan booksnya? Jika tidak, tak perlu khawatir!"

Optional Chaining dengan Pemanggilan Fungsi

Optional Chaining tidak hanya untuk properti objek. Anda juga bisa menggunakannya dengan pemanggilan fungsi! mari katakan kita punya sistem perpustakaan di mana buku bisa dicheck out:

const library = {
fiction: {
fantasy: {
checkOut: function(book) {
console.log(`Checking out ${book}`);
}
}
}
};

library.fiction.fantasy.checkOut?.('The Hobbit');
library.fiction.sciFi?.checkOut?.('Dune');

Dalam contoh ini, 'The Hobbit' akan dicek out, tapi tidak ada yang terjadi dengan 'Dune' karena sciFi tidak ada. Tidak ada kesalahan, hanya perjalanan yang mulus!

Optional Chaining dengan Ekspresi

Anda juga bisa menggunakan Optional Chaining dengan notasi kurung siku. Ini sangat berguna ketika nama properti Anda dinamis atau mengandung karakter spesial:

const users = {
'123': { name: 'Alice', age: 30 },
'456': { name: 'Bob', age: 25 }
};

const userId = '789';
console.log(users[userId]?.name);

Ini akan mengembalikan undefined karena tidak ada pengguna dengan ID '789', tapi itu tidak akan melempar kesalahan.

Optional Chaining dengan Operator "delete"

Operator delete juga bisa digunakan dengan Optional Chaining. Ini sangat berguna saat Anda ingin menghapus properti yang mungkin tidak ada:

const obj = {
prop: {
innerProp: 'value'
}
};

delete obj.prop?.innerProp;
delete obj.nonExistent?.prop;

Pemanggilan delete pertama akan bekerja seperti yang diharapkan, menghapus innerProp. Yang kedua tidak akan melakukan apa-apa, tapi tidak akan melempar kesalahan.

Short-circuiting dengan Optional Chaining

Optional Chaining memiliki fitur menarik yang disebut short-circuiting. Jika bagian kiri dari ?. adalah null atau undefined, evaluasi berhenti dan mengembalikan undefined:

const obj = null;
console.log(obj?.prop?.subProp);  // Mengembalikan undefined

Ini sangat membantu untuk menghindari kesalahan "Cannot read property of null" yang merusak!

Operator Nullish Coalescing dengan Optional Chaining

Operator Nullish Coalescing (??) bekerja sangat baik dengan Optional Chaining. Itu memungkinkan Anda untuk memberikan nilai default jika hasil Optional Chaining adalah null atau undefined:

const user = {
name: 'Alice',
details: {
age: 30
}
};

console.log(user.details?.job ?? 'unemployed');  // Mengembalikan 'unemployed'
console.log(user.details?.age ?? 'unknown');     // Mengembalikan 30

Ini sangat cocok untuk menyediakan nilai cadangan saat properti mungkin tidak ada.

Berikut adalah tabel yang menggabungkan metode yang kita pelajari:

Metode	Sintaks	Deskripsi
Akses Properti	obj?.prop	Mengakses properti objek bersarang dengan aman
Pemanggilan Fungsi	func?.()	Menyembahkan fungsi yang mungkin tidak ada
Ekspresi	obj?.[expr]	Mengakses properti dengan nama dinamis atau spesial
Operator Delete	delete obj?.prop	Menghapus properti yang mungkin tidak ada
Short-circuiting	obj?.prop?.subProp	Hentikan evaluasi jika bagian mana pun adalah null atau undefined
Dengan Nullish Coalescing	obj?.prop ?? defaultValue	Menyediakan nilai default jika hasil adalah null atau undefined

Dan itu dia, teman-teman! Anda baru saja meningkatkan keterampilan JavaScript Anda dengan Optional Chaining. Ingat, coding adalah seperti membangun dengan LEGO - mulai dari dasar, dan sebelum Anda tahu, Anda akan menciptakan karya masterpiece. Teruslatih, tetap curiga, dan coding yang gembira! ??‍??‍?

Credits: Image by storyset