DEV Community

Cover image for Optional Chaining (?.) Refactoring
Lars Grammel for P42

Posted on • Edited on • Originally published at p42.ai

4

Optional Chaining (?.) Refactoring

The optional chaining operator returns the value of an object property when the object is available and undefined otherwise. .? is similar to the standard . chaining operator, with an added check if the object is defined.

It enables you to write concise and safe chains of connected objects when some of those objects can be null or undefined. Before the introduction of optional chaining in ES2020, the && operator was often used to check if an object is available (obj && obj.value).

You can simplify existing checks to use the optional chaining pattern, for example:

  • Change x && x.a to x?.a
  • Change x != null && x.a to x?.a
  • Change x !== null && x !== undefined && x.a to x?.a
  • Change x && x.a && x.a.b && x.a.b.c && x.a.b.c.d to x?.a?.b?.c?.d

One thing to be aware of is that this refactoring replaces falsy checks with nullish checks. For example, when a && a.b is replaced with a?.b, it changes the execution for certain types, e.g. the empty string "" is falsy but not nullish.

However, in many cases these semantic changes will lead actually to more correct behavior. For example, text && text.length will return the empty string, but not its length, whereas text?.length will return 0 for the empty string.

Learn More: Optional Chaining (MDN), Nullish (MDN), Truthy (MDN), Falsy (MDN)

P42 now supports converting many of the above checks into the optional chaining pattern. Try it out in the P42 VS Code Extension!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
blaketweeted profile image
Blake Campbell

Optional chaining coming to JavaScript is so nice! Thanks for the refactoring tips.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free