# Cara Menggunakan Optional Chaining di Javascript

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)](https://tc39.es/ecma262/2020/) dan  [TC39 proposal](https://github.com/tc39/proposal-optional-chaining) yang baru.

Di artikel ini, kita kan membahas tentang [Optional Chaining di Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).

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](https://developer.mozilla.org/en-US/docs/Glossary/nullish) (`null` atau `undefined`), ia akan mengembalikan sebuah nilai `undefined`.

**Syntax**

```javascript
object.value?.prop
object.value?.[expr]
object.value?.[index]
object.func?.(args)
```

**Lihat contoh berikut**

```javascript
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?

```javascript
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.

```javascript
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

![](https://res.cloudinary.com/practicaldev/image/fetch/s--VjAz_wln--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1608201033218/lX19Sro14.png align="left")

> 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.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--FOa-759d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1608201660117/gPa_cmE_V.png align="left")

Manfaatkan operator Optional Chaining kapanpun ada kebutuhan. Semoga pekerjaan kamu menjadi sedikit lebih mudah.

Terimakasih telah membaca sampai akhir

**Sumber**

* [https://dev.to/iamdarshshah/optional-chaining-in-javascript-28h3](https://dev.to/iamdarshshah/optional-chaining-in-javascript-28h3)
    
* [https://tc39.es/ecma262/2020/](https://tc39.es/ecma262/2020/)
    
* [https://github.com/tc39/proposal-optional-chaining](https://github.com/tc39/proposal-optional-chaining)
    
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional\_chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
    
* [https://developer.mozilla.org/en-US/docs/Glossary/nullish](https://developer.mozilla.org/en-US/docs/Glossary/nullish)