JavaScript Optional Chaining

JavaScript Optional chaining is a new feature introduced in ES2020 that simplifies the process of accessing properties nested within objects, especially when dealing with potentially null or undefined values. It provides a concise syntax for accessing properties deep within nested objects without encountering errors due to null or undefined values. This helps in writing cleaner and more readable code by reducing the need for explicit null checks and conditionals.

When we want to check a value of the property that is deep inside a tree-like structure, we often have to check whether intermediate nodes exist.

let Value = user.dog && user.dog.name;

The Optional Chaining Operator allows a developer to handle many of those cases without repeating themselves by assigning intermediate results in temporary variables:

let Value = user.dog?.name;

Syntax: 

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

Note: If this code gives any error try to run it on online JavaScript editor.

Example: To demonstrate the implementation of the Optional Chaining with Object in JavaScript.

const user = {
    dog: {
        name: "Alex"
    }
};

console.log(user.cat?.name); //undefined
console.log(user.dog?.name); //Alex
console.log(user.cat.name); 

Output:

Example: To demonstrate the Optional Chaining with Function Call in JavaScript.

let user1 = () => console.log("Alex");
let user2 = {
    dog() {
        console.log("I am Alex");
    }
}
let user3 = {};

user1?.();       // Alex
user2.dog?.();   // I am Alex
user3.dog();     // ERROR - Uncaught TypeError: 
// user3.dog is not a function. 
user3.dog?.();   // Will not generate any error.

Output: