JavaScript - optional chaining with ?. operator in ES2020

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

console.log(user?.location?.lat);

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.

Explaination

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:

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.func?.('Hello!'));
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) {
    console.log(data);
});

// this code returns nothing because on onError function is not defined