JavaScript - optional chaining with ?. operator in ES2020

4 points
Created by:

In this short article we would like to show how to use Optional Chaning in modern JavaScript.

Quick solution:

// ONLINE-RUNNER:browser;

const user = null; // or undefined


Where: ?. returns undefined when user or user.location have null or undefined value - it means above code will not throw exception.

Note: it is supported in latest Babel compiler and TypeScript by default.


ES2020 introduced ?. operator that gives possibility to avoid testing if object or property before ?. notation exists, returning undefined value. The operator can be used with variables, properties, objects, arrays, functions, etc.

Syntax looks following way:

obj?.propobject property access
obj?.[expr]object property access with brackets
arr?.[index]array item access by index
func?.(args)function calling

Simple example:

// ONLINE-RUNNER:browser;

// accepted: uninitialised, undefined or null

var obj;
var arr = undefined;
var func = null;

console.log(obj?.items);        // undefined
console.log(obj?.['name']);     // undefined
console.log(arr?.[10]);         // undefined
console.log(func?.('Hello!'));  // undefined

More complex cases: 

// ONLINE-RUNNER:browser;

var obj = {
    items: undefined,
    func: null // or undefined

console.log(obj.items);               // undefined
console.log(obj.items?.[10]);         // undefined

console.log(obj.members?.name);       // undefined
console.log(obj.members?.['name']);   // undefined

console.log(obj.print?.('Hello!', 'How are you?'));  // undefined

// long property path:

console.log(obj?.very?.['long']?.path?.to?.[5]?.property?.action?.(1, 2, 3));  // undefined

Callback example:

// ONLINE-RUNNER:browser;

function ajax(onSuccess, onError) {
    try {
        // simulated request error:
        throw new Error('Timeout error!');
    } catch(e) {
        onError?.('Request error!');

ajax(function(data) {

// this code returns nothing because on onError function is not defined
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé