Using optional chaining operator for object property access
When accessing a property using bracket notation and optional chaining, you need to use a dot in addition to the brackets:
const value = a?.[b]?.c;
This is the syntax that was adopted by the TC39 proposal, because otherwise it's hard for the parser to figure out if this ?
is part of a ternary expression or part of optional chaining.
The way I think about it: the symbol for optional chaining isn't ?
, it's ?.
. If you're doing optional chaining, you'll always be using both characters.
The Optional Chaining operator is ?.
Here are some examples for nullable property and function handling.
const example = {a: ["first", {b:3}, false]}// Propertiesexample?.a // ["first", {b:3}, false]example?.b // undefined// Dynamic properties ?.[]example?.a?.[0] // "first"example?.a?.[1]?.a // undefinedexample?.a?.[1]?.b // 3// Functions ?.()null?.() // undefinedvalidFunction?.() // result(() => {return 1})?.() // 1
Bonus: Default values
??
(Nullish Coalescing) can be used to set a default value if undefined or null.
const notNull = possiblyNull ?? defaultValueconst alsoNotNull = a?.b?.c ?? possiblyNullFallback ?? defaultValue