Optional Chaining

By  on  

For all of the improvements that the JavaScript language has added over the past few years, like the spread operator, default argument values, and arrow functions, there are still a few features I'd love to see implemented. One such feature is optional chaining. Optional chaining allows developers to reference object properties which may or may not exist without trigger an error.

Take the following example case:

const person = {
  name: "David",
  skills: {
    javascript: {
      frameworks: ["MooTools", "React"],
    }
  },
  save: () => { }
};

// Property that *doesn't* exist (css)
person.skills.css.frameworks;
// Uncaught TypeError: Cannot read property 'frameworks' of undefined

Attempting to get a property of an undefined parent results in a TypeError which can brick your application. In this case we'd want to check to ensure that css property exists:

if(
  person.skills && 
  person.skills.css && 
  person.skills.css.frameworks) {
    // ...
}

I wrote a get and set utility called Objectifier to make referencing nested object properties easier, but with the Optional Chaining proposal, we now have a native way.

A simple example of optional chaining is:

const skills = person?.skills;

You can continue the pattern down the line of nested objects:

const frameworks = person?.skills?.javascript?.frameworks;

If ever a property doesn't exist, the chaining stops and undefined is returned. Optional chaining also supports bracket syntax:

const language = "javascript";
const frameworks = person?.skills?.[language]?.frameworks;

You can also call a function without penalty:

// Calls save if exists, otherwise nothing
const frameworks = person?.save();

You can even use the chaining syntax on the top level object:

addEventListener?.("click", e => { });

methodDoesntExist?.(); // undefined

You can even use destructuring with optional chaining:

const { frameworks, doesntExist } = person.skills?.javascript;

If you want to set a fallback value in the case that a value is undefined, you can do so with ??:

let frameworkz = person?.skills?.["javascript"]?.frameworkz ?? "react.js";

At the time of writing, optional chaining doesn't appear in any browsers yet, but you can play around with optional chaining at the Babel online compiler.

Optional chaining seems like a somewhat controversial change. It's been argued that developers should know and validate the objects they're using; on the other hand, the continuous nested property checking is a nightmare. I look forward to optional chaining in JavaScript. What are your thoughts?

Recent Features

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    jQuery Chosen Plugin

    Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless to say, whenever a developer goes...

  • By
    Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

Discussion

  1. Micha

    “It’s been argued that developers should know and validate the objects they’re using”

    This will still be the case. Of course if devs don’t make it a habit to always make everything optional just in case. :)

  2. I love optional chaining in C# and use it so often that I feel limited without in when I switch to writing JS. I would love to avoid writing those switch statements to null check an objects hierarchy down to the prop I need. Nice post!

  3. Amazingly well explained, thank you very much !

  4. hacksForHarambe

    it’s going to be a dream come true. es2020 let’s go

  5. toblerone

    “It’s been argued that developers should know and validate the objects they’re using”

    This is pedantic non-sense, it’s has always existed, and will continue to exist, in every possible nook and cranny and has always been, and will continue to be, ignored in the real world.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!