Konsep Optional Chaining (?.) yang baru saja diperkenalkan di Javascript ES2020. Versi baru dari Javascript membawa peningkatan pada implementasi saat ini dan membuat hidup kita lebih mudah sebagai developer.
Kalian bisa cek Spesifikasi Bahasa ECMACript 2020 (ES2020) dan TC39 proposal yang baru.
Di artikel ini, kita kan membahas tentang Optional Chaining di Javascript.
Apa itu Optional Chaining (?.) di Javascript?
Operator Optional Chaining memungkinkan kita untuk mengakses properti nested obyek, tanpa perlu mengecek apakah obyek parent-nya ada. Jadi, daripada mengembalikan sebuah error, ?. akan mengembalikan undefined jika obyek parentnya null atau undefined.
Operator ?. bekerja dengan cara yang sama seperti Operator . (chaining). Satu-satunya perbedaan yaitu alih-alih mengembalikan sebuah error jika referensinya nullish (null atau undefined), ia akan mengembalikan sebuah nilai undefined.
Syntax
object.value?.prop
object.value?.[expr]
object.value?.[index]
object.func?.(args)
Lihat contoh berikut
const userInfo = {
firstName: 'Darsh',
lastName: 'Shah',
details: {
bio: 'Auth0 Ambassador | Postman Student Expert | Blogger | Speaker',
title: 'Software Developer'
},
sayHello() {
return 'Hey there!👋';
}
};
Sekarang bagaimana jika kita melakukan ini?
const userTitle = userInfo.details && userInfo.details.title;
Pertama kita mengecek apakah properti details ada di userInfo dan lalu kita assign title kedalam userTitle jika ia ada. Jika tidak, userTitle akan undefined.
Biasanya, kita menggunakan operator && untuk menghindari error ketika obyeknya null atau undefined.
Tapi itu membosankan bukan?
Dengan fitur Javascript yang baru, kita bisa menggunakan operator Optional Chaining (?.) untuk membuatnya terlihat lebih clear.
const userTitle = userInfo.details?.title;
Apakah itu nyata?
Ya, ini akan bekerja dengan cara yang sama seperti yang kita lakukan dengan operator &&.
Yang terjadi adalah, Operator ?. akan menghentikan evaluasi jika bagian sebelum ?. undefined atau null dan mengembalikan undefined daripada mengembalikan sebuah error.
disini contohnya
Note: Ini hanya akan bekerja di properti nested. Jika kita mencoba untuk menggunakannya di level pertama, ia akan mengembalikan sebuah error jika objeknya tidak ada. Operator Optional Chaining membutuhkan sebuah parent obyek untuk dilihat terlebuh dahulu.
Di contoh ini, user i.e., parent obyek tidak didefinisikan dan kita mencoba untuk menggunakan operator Optional Chaining. Jadi, ia akan mengembalikan sebuah error.
Manfaatkan operator Optional Chaining kapanpun ada kebutuhan. Semoga pekerjaan kamu menjadi sedikit lebih mudah.
Terimakasih telah membaca sampai akhir
Sumber
