Optional Chaining and Nullish Coalescing are the new JavaScript operators added in ES2020. These operators have been a part of other programming languages like Swift and Kotlin and have now been added to JavaScript. These operators make it easier to write readable and safer code.
Optional Chaining
Optional Chaining allows access to nested properties of an object without worrying if the parent property exists or not. If it exists it returns the data else undefined is returned.
It eliminates the need for adding multiple null checks when accessing a long chain of object properties.
It is represented by ?. and it works with function calls and arrays too apart from objects.
Eg: If we are trying to get the details of a user from an API and the API returns the below response
{
"users": [
{
"name": "Rahul"
},
{
"name": "Neha",
"location": {
"city": "Mumbai",
"state": "Maharashtra"
}
},
...
]
}
If we try to access the `state` property of the `location` field of the users then accessing data for the first user will throw this error:
Uncaught TypeError: Cannot read property ‘state’ of undefined
To handle this error what we would have added as a safeguard is
if(response && response.location && response.location.city)
The above is a bit verbose, thus to increase readability this can be rewritten using optional chaining operator to:
response?.location?.city
If at any point in the chain if the data does not exist then undefined is returned and the expression short circuits.
Nullish Coalescing
This operator allows us to check if the data is not undefined or null and allows us to set a value if the data is undefined or null. It is represented by ??
From the above example if we want to set the default city as Delhi if the data is not returned by the API then we can do so using the nullish coalescing:
response?.location?.city??"Delhi"
The operator short circuits if the operand on the left hand side is truthy or falsy (excluding undefined or null), the expression evaluates to right hand side operand only when left hand side operand is undefined or null.
Another use of this operator is when || operator is used in JavaScript and the developer intends that expression evaluates to right hand side only if left hand operand is null or undefined.
Eg:
let z = x || y
In JavaScript 0, ”, undefined and null are all falsy values and the above expression evaluates to y if x = ” which should’ve been evaluated to x. To handle this scenario nullish coalescing can be used as it checks for only null and undefined and the above can be rewritten to:
let z = x ?? y
Now only if x is undefined or null will the expression evaluate to y otherwise it will always evaluate to x
Both optional chaining and nullish coalescing have been added to Babel’s preset-env plugin and can be used directly if this plugin is added in the babel config. ESLint rules for these operators are also available which prompt us to use them wherever applicable.
