JavaScript - Optional Chaining

Hai there, para para JavaScript! ? Hari ini, kita bakal buat perjalanan menarik ke dunia Optional Chaining. Jangan khawatir kalau anda baru belajar programming - saya bakal jadi panduannya yang ramah, dan kita bakal langkah demi langkah. Pada akhir pelajaran ini, anda bakal bisa mengikat seperti seorang pro! Mari kita masuk!

Masalah Properti yang Tidak Ada

Bayangkan anda mencari buku di perpustakaan besar. Anda tahu dia seharusnya ada di "Science Fiction" di tingkat ketiga, di sudut belakang. tapi apa kalau perpustakaan itu bahkan tidak punya tingkat ketiga? Atau apa kalau tidak ada "Science Fiction"? Itu jenis masalah yang kita sering hadapi di JavaScript saat berurusan 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 ke penyelamatan.

Apa Itu Optional Chaining di JavaScript?

Optional Chaining seperti jaringan keselamatan untuk kode anda. Itu membolehkan anda mengakses properti objek bersarang tanpa khawatir kalau properti antaranya 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 bertanya, "Jika sciFi ada, bisakah anda kasih saya books nya? Jika tidak, tak perlu khawatir!"

Optional Chaining Dengan Pemanggilan Fungsi

Optional Chaining tidak hanya untuk properti objek. Anda juga bisa gunakan itu untuk 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 mulus!

Optional Chaining Dengan Eksperesi

Anda juga bisa gunakan Optional Chaining dengan notasi kurung siku. Ini sangat berguna saat nama propertinya dinamis atau mengandung karakter khusus:

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 mengganggu!

Operator Nullish Coalescing Dengan Optional Chaining

Operator Nullish Coalescing (??) bekerja sangat baik dengan Optional Chaining. Itu membolehkan anda 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 sempurna untuk memberikan nilai fallback saat properti mungkin tidak ada.

Berikut adalah tabel yang menggabungkan metode yang kita cover:

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

Dan begitu juga, teman-teman! Anda telah meningkatkan keterampilan JavaScript anda dengan Optional Chaining. Ingat, coding seperti membangun dengan LEGO - mulai dari dasar, dan sebelum anda tahu, anda akan menciptakan karya kesenian. Terus latihan, tetap bersemangat, dan selamat coding! ??‍??‍?

Credits: Image by storyset