Operator Optional Chaining JavaScript: Sintaks dan Contoh Penggunaan

Operator optional chaining atau rantai opsional (?.) memungkinkan kita mengakses nilai dari properti objek yang tidak ada atau tidak valid tanpa harus memeriksa menggunakan percabangan yang kompleks.

Mirip seperti operator chaining yang biasa digunakan untuk mengakses properti objek (.), alih-alih mengembalikan kesalahan ketika properti referensi yang ingin diakses bernilai null, undefined, atau tidak ada...

... Operator (?.) akan mengembalikan nilai undefined, bukan kesalahan.

Mari kita pelajari lebih lanjut sintaks dan contoh penggunaannya agar kita bisa menggunakannya di tempat yang tepat.

1. Sintaks
2. Contoh
   1. Mengakses Objek
   2. Mengakses Array
   3. Mengakses Fungsi
   4. Menumpuk Operator Rantai Opsional
3. Kombinasi dengan Operator Nullish Coalescing

Sintaks

obj.val?.prop;
obj.val?.[expr];
obj.arr?.[index];
obj.func?.(args);

?. adalah operator rantai opsional.

Contoh

Mengakses Objek

Mari kita gunakan contoh sederhana.

Misalnya kita memiliki objek mahasiswa yang berisi properti nilai berupa objek, di dalamnya terdapat properti mata pelajaran dengan nilainya.

Khusus untuk mata pelajaran ipa kadang ada kadang tidak, anggap saja begitu. Kalau ada, kita ingin mengakses properti fisika di dalam objek tersebut.

Tanpa operator rantai opsional, kita perlu memastikan terlebih dahulu bahwa objek ipa ada.

Mari kita lihat bagaimana kita menangani ini tanpa operator rantai opsional, menggunakan percabangan if.

const siswa = {
  nama: 'budi',
  kelas: 12,
  nilai: {
    matematika: 85,
    // ipa: {
    //   fisika: 80,
    // },
  },
};

let nilaiFisika;

if (siswa.nilai.ipa) {
  nilaiFisika = siswa.nilai.ipa.fisika;
}

console.log(nilaiFisika); // undefined

Atau, menggunakan operator ternary.

// ...

let nilaiFisika = siswa.nilai.ipa && siswa.nilai.ipa.fisika;

console.log(nilaiFisika); // undefined

Mengapa kita perlu memastikan siswa.nilai.ipa ada? Mengapa tidak langsung diakses saja siswa.nilai.ipa.fisika?

Kalau kita bisa memastikan bahwa properti tersebut ada, tentu saja kita bisa mengaksesnya secara langsung.

Tapi bagaimana jika properti tersebut tidak ada, ini akan mengembalikan kesalahan.

// ...

const nilaiFisika = siswa.nilai.ipa.fisika; // TypeError: Cannot read property 'fisika' of undefined

Kode di atas mengembalikan kesalahan karena siswa.nilai.ipa mengembalikan nilai undefined, lalu kita rantai dengan .fisika.

Itu sama saja seperti kita menulis, undefined.fisika.

Kalau menggunakan percabangan kita perlu menulis kode yang banyak. Tapi, mari kita lihat jika menggunakan operator rantai opsional.

// ...

const nilaiFisika = siswa.nilai.ipa?.fisika;
console.log(nilaiFisika); // undefined

Perhatikan bagin ini, ipa?.fisika.

Bagaian itu sama saja seperti kita memberi tau JavaScript:

Hi JavaScript, apakah ada properti ipa? kalau ada akses properti fisika, kalau tidak langsung kembalikan nilai undefined.

Mengakses Array

Selain properti dengan nilai objek, kita juga bisa menggunakannya untuk mengakses array.

Misalnya kita ingin mengakses array nilai dengan indeks 0 yaitu 1 di dalam objek siswa.

Anggap saja properti tersebut kadang ada kadang tidak, jadi kita perlu menggunakan operator rantai opsional agar mengembalikan nilai undefined ketika tidak ada, tidak error.

const siswa = {
  // nilai: [1, 2, 3],
};

const nilaiSiswa = siswa.nilai?.[0];

console.log(nilaiSiswa); // undefined

Mengakses Fungsi

Sama seperti array dan objek, kita juga bisa menggunakan operator ini untuk mengakses method atau fungsi yang mungkin tidak ada.

const siswa = {
  // hi: (nama) => `hello ${nama}`,
};

const sapaSiswa = siswa.hi?.('budi');

console.log(sapaSiswa); // undefined

Menumpuk Operator Rantai Opsional

Operator rantai opsional bisa kita gunakan sebanyak yang kita mau untuk mengecek properti-properti yang mungkin tidak ada, bernilai undefined, atau null.

const obj = {
  // a: {
  //   b: {
  //     c: 'hello world',
  //   },
  // },
};

const result = obj.a?.b?.c;

console.log(result); // undefined

Kombinasi dengan Operator Nullish Coalescing

Karena selalu mengembalikan nilai undefined ...

... operator ini (?.) biasanya sering dikombinasikan dengan operator Nullish Coalecsing (??) ketika kita ingin menetapkan nilai default jika undefined.

const obj = {
  // a: {
  //   b: {
  //     c: 'hello world',
  //   },
  // },
};

const result = obj.a?.b?.c ?? 'hello world';

console.log(result); // hello world