Using optional chaining operator for object property access

Question

TypeScript 3.7 now supports the optional chaining operator. Hence, you can write code such as:

const value = a?.b?.c;

I.e., you can use this operator to access properties of an object, where the object itself may be null or undefined. Now what I would like to do is basically the same, but the property names are dynamic:

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

However, there I get a syntax error:

error TS1005: ':' expected.

What am I doing wrong here? Is this even possible?

The proposal seems to imply that this is not possible (but maybe I get the syntax examples wrong).

My aside comment: Typescript embraced a previous ES specification, hence I'd link MDN documentation developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — massic80
– massic80, Commented Jun 28, 2022 at 22:46

Nicholas Tower · Accepted Answer · 2021-06-29 12:34:34Z

329

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.

edited Jun 29, 2021 at 12:34

answered Nov 9, 2019 at 15:50

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vol7ron Over a year ago

I’d replace hard with impossible.

AnArrayOfFunctions Over a year ago

@vol7ron why so - i think it can look forward for :

vol7ron Over a year ago

It wouldn’t be able to distinguish, especially when there are errors.

Robert Over a year ago

@AnArrayOfFunctions Won't happen. There are already a few places in the language where this forward-looking would solve problems. Just think how the statement function(){}; or {a: 1}.a; are both a syntax error. Also: Nested ternaries are already hard to parse (what does a?[...b][1]?c:d?.e:f mean). Better not make it more difficult by overloading ?.

bsplosion Over a year ago

Wow, that is super-unintuitive since the optional chaining syntax minus the "optional" part is invalid. You can't run chaining as a.[b].c, so a?.[b]?.c is only going to be discovered by those who run into the issue and search online. Maybe a proposal could be made to enable a.[b].c chaining syntax?

Gibolt · Accepted Answer · 2020-09-09 19:02:48Z

25

The Optional Chaining operator is `?.`

Here are some examples for nullable property and function handling.

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: Default values

?? (Nullish Coalescing) can be used to set a default value if undefined or null.

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

answered Sep 9, 2020 at 19:02

Gibolt

47.9k15 gold badges208 silver badges133 bronze badges

3 Comments

nick Over a year ago

Is there a difference in doing a?.b?.c ?? default vs a?.b?.c || default?

Gibolt Over a year ago

|| checks for all falsey values, so '', 0 and false will go to the default, whereas ?? will only default for null and undefined

massic80 Over a year ago

That's the Nullish coalescing operator developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Using optional chaining operator for object property access

2 Answers 2

5 Comments

The Optional Chaining operator is `?.`

Bonus: Default values

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

The Optional Chaining operator is ?.

Bonus: Default values

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

The Optional Chaining operator is `?.`