Languages
[Edit]
EN

JavaScript - optional chaining with ?. operator in ES2020

4 points
Created by:
Marcin
19550

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:

SyntaxDescription
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.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
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.

‚̧ԳŹūüíĽ ūüôā

Join