DEV Community

Cover image for JavaScript Optional Chaining '?.'
Bello Osagie
Bello Osagie

Posted on • Updated on

JavaScript Optional Chaining '?.'

image.png


The optional chaining ?. is a safe way to access nested object properties, even if an intermediate property doesn't exist.

Let's assume each user is required to fill an online form of name and address, but users mostly ignored the address input field to submit the form.

The submitted form of one of the user is modeled as an object as shown below:

const user = { name: 'Bello' }

console.log(user, user.address); // { name: 'Bello' } undefined
Enter fullscreen mode Exit fullscreen mode

The user.address returns undefined because it is not filled by the user.

Let's also assume each address object must have a street. In such a case, we get an error. For deeply nested objects, properties, we get an error.

See example below:

const user = { name: 'Bello' }

console.log(user, user.address.street); 
// TypeError: Cannot read property 'street' of undefined
Enter fullscreen mode Exit fullscreen mode

What if we don't want that much error but undefined for objects that don't exist.

See the example below:

const user = { name: 'Bello' }

console.log(user, user.address ? user.address.street : undefined);
// { name: 'Bello' } undefined
Enter fullscreen mode Exit fullscreen mode

What if we have another nested object called name as shown below:

const user = { name: 'Bello' }

console.log(
  user, 
  user.address ? user.address.street ? user.address.street.name 
  : null : null
  );
// { name: 'Bello' } null
Enter fullscreen mode Exit fullscreen mode

The code snippet above is the same as below:

const user = { name: 'Bello' }

console.log(
user, 
user.address && user.address.street && user.address.street.name
);
// { name: 'Bello' } undefined
Enter fullscreen mode Exit fullscreen mode

We do not see the long string of the error in the console, but there is one issue we need to tackle - the repetitive nesting obj.obj1...objN or obj.obj1...objN.propN.


image.png


Optional chaining solves the repetitive object nesting issue. The Optional chaining above was released in ECMAScript2020.

See the example below:

const user = {name: 'Bello'};

document.write(user, user?.address?.street?.name); 
// [object Object]undefined
Enter fullscreen mode Exit fullscreen mode

Note: There must be a variable first like user for the example above to work.

If you are getting an error, an older JavaScript engine is used by your browser. You need to upgrade the browser.

Edit on Stackblitz

Let's make the user object empty below:

const user = { };

document.write(user?.address?.street?.name); 
// undefined
Enter fullscreen mode Exit fullscreen mode

The ?. in an expression can also short-circuit. It is like the logical && operator. It finds the first falsy value from left to right and returns it (ignoring any other values after it).

The optional chaining ?. is not an operator, but a special syntax construct

See the examples below:

const user = null;

document.write( user?.address ); // undefined
document.write( user?.address.street ); // undefined
Enter fullscreen mode Exit fullscreen mode

Recall null == undefined

const user = null;
const x = 0;

document.write?.increaseBy1(x++); 
// user value, null is falsy => .increaseBy1(x++) ignored

document.write(x); // 0
Enter fullscreen mode Exit fullscreen mode

The construct, ?. also works on functions.

Syntax:

functionName?.()
Enter fullscreen mode Exit fullscreen mode

See the example below:

const userAdmin = {
  admin() {
    document.write("I am admin");
  }
};

const userGuest = { };

userAdmin.admin?.(); // I am admin

userGuest.admin?.(); // no output, no error
Enter fullscreen mode Exit fullscreen mode

There's also another optional chaining syntax for retrieving object keys values.

Syntax:

object?.[key]
Enter fullscreen mode Exit fullscreen mode

See the example below:

const key = "firstName";

const user1 = {
  firstName: "Osagie"
};

let user2 = null;

document.write( user1?.[key] ); // Osagie
document.write( user2?.[key] ); // undefined
Enter fullscreen mode Exit fullscreen mode

Also we can use ?. with delete:

delete user?.name; // ReferenceError: user is not defined
Enter fullscreen mode Exit fullscreen mode

We can use ?. for safe reading and deleting, but not writing.

See the example below:

const user = null;

user?.name = "John"; // error
Enter fullscreen mode Exit fullscreen mode

Happy coding


image.png


image.png

Top comments (2)

Collapse
 
machineno15 profile image
Tanvir Shaikh

When was this introduced ?

Collapse
 
bello profile image
Bello Osagie

2020