Current Stage:
- Stage 1
- Claude Pache (@claudepache)
- Gabriel Isenberg (@the_gisenberg)
When looking for a property value deeply in a tree structure, one has often to check whether intermediate nodes exist:
var street = user.address && user.address.street;Also, many API return either an object or null/undefined, and one may want to extract a property from the result only when it is not null:
var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefinedThe Optional Chaining Operator allows a developer to handle many of those cases without repeating themselves and/or assigning intermediate results in temporary variables:
var street = user.address?.street
var fooValue = myForm.querySelector('input[name=foo]')?.value
- C#: Null-conditional operator
- Swift: Optionals
- Groovy: Safe navigation operator
- Ruby: Safe navigation operator
- CoffeeScript: Existential operator
The Optional Chaining operator is spelled ?.. It may appear in three positions:
obj?.prop // optional static property access
obj?.[expr] // optional dynamic property access
func?.(...args) // optional function or method call
- In order to allow
foo?.3:0to be parsed asfoo ? .3 : 0(as required for backward compatibility), a simple lookahead is added at the level of the lexical grammar, so that the sequence of characters?.is not interpreted as a single token in that situation (the?.token must not be immediately followed by a decimal digit).
If the operand at the left-hand side of the ?. operator evaluates to undefined or null, the expression evaluates to undefined. Otherwise the targeted property access, method or function call is triggered normally.
Here are basic examples, each one followed by its desugaring. (The desugaring is not exact in the sense that the LHS should be evaluated only once.)
a?.b // undefined if `a` is null/undefined, `a.b` otherwise.
a == null ? undefined : a.b
a?.[x] // undefined if `a` is null/undefined, `a.[x]` otherwise.
a == null ? undefined : a[x]
a?.b() // undefined if `a` is null/undefined
a == null ? undefined : a.b() // throws a TypeError if `a.b` is not a function
// otherwise, evaluates to `a.b()`
a?.() // undefined if `a` is null/undefined
a == null ? undefined : a() // throws a TypeError if `a` is neither null/undefined, nor a function
// invokes the function `a` otherwiseIf the expression on the LHS of ?. evaluates to null/undefined, the RHS is not evaluated. This concept is called short-circuiting.
a?.[++x] // `x` is incremented if and only if `a` is not null/undefined
a == null ? undefined : a[++x]In fact, short-circuiting, when triggered, skips not only to the current property access, method or function call, but also the whole chain of property accesses, method and function calls following directly the Optional Chaining operator.
a?.b.c(++x).d // if `a` is null/undefined, evaluates to undefined. Variable `x` is not incremented.
// otherwise, evaluates to `a.b.c(++x).d`.
a == null ? undefined : a.b.c(++x).dNote that the check for nullity is made on a only. If, for example, a is not null, but a.b is null, a TypeError will be thrown when attempting to access the property "c" of a.b.
This feature is implemented by, e.g., C# and CoffeeScript [TODO: provide precise references].
Let’s call Optional Chain an Optional Chaining operator followed by a chain of property accesses, method and function calls.
An Optional Chain may be followed by another Optional Chain.
a?.b[3].c?.(x).d
a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d
// (as always, except that `a` and `a.b[3].c` are evaluated only once)Should parentheses limit the scope of short-circuting?
(a?.b).c
(a == null ? undefined : a.b).c // this?
a == null ? undefined : (a.b).c // or that?Given that parentheses are useless in that position, it should not have impact in day-to-day use.
Unless there is a strong reason for one way or the other, the answer will mostly depend on how the feature is specified.
Because the delete operator is very liberal in what it accepts, we have that feature for free:
delete a?.b
// delete (a == null ? undefined : a.b) // that *would* work if `? :` could return a Reference...
a == null ? undefined : delete a.b // this is what we get, reallyShould optional property assignement as in: a?.b = c be implemented? This is supported and used in CoffeeScript.
The following are not implemented for lack of real-world use cases.
- optional construction:
new a?.() - optional template literal:
a?.`{b}` - constructor or template literals in/after an Optional Chain:
new a?.b(),a?.b`{c}`.
All the above cases will be forbidden by the grammar.
[TODO: to be completed. In particular, discuss specific criticisms around long short-circuiting.]
- obj?.[expr] and func?.(arg) look ugly. Why not use obj?[expr] and func?(arg) as does <language X>?
-
We don’t use the
obj?[expr]andfunc?(arg)syntax, because of the difficulty for the parser to distinguish efficiently those forms from the conditional operator, e.g.obj?[expr].filter(fun):0andfunc?(x - 2) + 3 :1.Alternative syntaxes for those two cases have each their own flaws, and deciding which one looks the least bad is mostly a question of personal taste. Here is how we made our choice:
- pick the best syntax for the
obj?.propcase, which is expected to occurs most often; - extend the use of the recognisable
?.sequence of characters to other cases:obj?.[expr],func?.(arg).
As for <language X>, it has different syntactical constraints than JavaScript, because of <some construct not supported by X or working differently in X>.
- pick the best syntax for the
- Why does (null)?.b evaluates to undefined rather than null?
-
Neither
a.bnora?.bis intended to preserve arbitrary information on the base objecta, but only to give information about the property"b"of that object. If a property"b"is absent froma, this is reflected bya.b === undefinedanda?.b === undefined.In particular, the value null is considered to have no property; therefore,
(null)?.bis undefined. - Why do you want long short-circuiting?
-
See Issue #3 (comment).
- In a?.b.c, if a.b is null, then a.b.c will evaluate to undefined, right?
-
No. It will throw a TypeError when attempting to fetch the property
"c"ofa.b.The opportunity of short-circuiting happens only at one time, just after having evaluated the LHS of the Optional Chaining operator. If the result of that check is negative, evaluation proceeds normally.
In other words, the
?.operator has an effect only at the very moment it is evaluated. It does not change the semantics of subsequent property accesses, method or function calls.
See: https://tc39.github.io/proposal-optional-chaining/
Per the TC39 process document, here is a high level list of work that needs to happen across the various proposal stages.
- Identify champion to advance addition (stage-1)
- Prose outlining the problem or need and general shape of the solution (stage-1)
- Illustrative examples of usage (stage-1)
- High-level API (stage-1)
- Initial spec text (stage-2)
- Babel plugin (stage-2)
- Finalize and reviewer signoff for spec text (stage-3)
- Test262 acceptance tests (stage-4)
- tc39/ecma262 pull request with integrated spec text (stage-4)
- Reviewer signoff (stage-4)
- TC39 Slide Deck: Null Propagation Operator
- es-optional-chaining (@claudepache)
- ecmascript-optionals-proposal (@davidyaha)