javascript - Menggunakan operator chaining opsional untuk akses properti objek

TypeScript 3.7 sekarang mendukung operator optional chaining. Oleh karena itu, Anda dapat menulis kode seperti:

const value = a?.b?.c;

Artinya, Anda dapat menggunakan operator ini untuk mengakses properti dari sebuah objek, di mana objek itu sendiri mungkin null atau undefined. Sekarang yang ingin saya lakukan pada dasarnya sama, tetapi nama propertinya bersifat dinamis:

const value = a?[b]?.c;

Namun, di sana saya mendapatkan kesalahan sintaks:

error TS1005: diharapkan '':''.

Apa yang salah yang saya lakukan di sini? Apakah ini bahkan mungkin?

Usulan tersebut tampaknya menyiratkan bahwa ini tidak mungkin (tapi mungkin saya salah memahami contoh sintaksnya).

Jawaban #1

Saat mengakses properti menggunakan notasi tanda kurung dan optional chaining, Anda perlu menggunakan titik selain tanda kurung:

const value = a?.[b]?.c;

Ini adalah sintaks yang diadopsi oleh proposal TC39, karena jika tidak, parser akan sulit menentukan apakah ? ini adalah bagian dari ekspresi ternary atau bagian dari optional chaining.

Cara saya melihatnya: simbol untuk optional chaining bukan ?, melainkan ?.. Jika Anda melakukan optional chaining, Anda akan selalu menggunakan kedua karakter tersebut.

Jawaban #2

Operator Optional Chaining adalah ?.

Berikut adalah beberapa contoh untuk penanganan properti dan fungsi yang dapat bernilai null.

const example = {a: ["first", {b:3}, false]}

// Properties
example?.a  // ["first", {b:3}, false]
example?.b  // undefined

// Dynamic properties ?.[]
example?.a?.[0]     // "first"
example?.a?.[1]?.a  // undefined
example?.a?.[1]?.b  // 3

// Functions ?.()
null?.()                // undefined
validFunction?.()       // result
(() => {return 1})?.()  // 1

Bonus: Nilai default

?? (Nullish Coalescing) dapat digunakan untuk menetapkan nilai default jika undefined atau null.

const notNull = possiblyNull ?? defaultValue
const alsoNotNull = a?.b?.c ?? possiblyNullFallback ?? defaultValue