Today, we are going to talk about 2 specific operators introduced by ES2020 or ES11 which use ? that makes JS easier to read and write:

1. Nullish Coalescing: ??
2. Optional Chaining: ?.

Let us go through the above in a very concise and convenient manner.

1) ?? The Nullish Coalescing Operator

The Nullish coalescing operator is a very precise manner of detecting whether an expression contains undefined or null. The syntax for the same is as follows:

const a = param1 ?? "default value"

So the expression on the right is returned only if the expression on the left is either undefined or null This syntax is very similar to the logical OR operator where ?? is replaced by ||. However in the logical OR operator, the expression on the right is returned only if the expression on the left contains a falsy value. Falsy values contain either of the following values:

• undefined
• null
• 0
• "" (empty string)
• false

Most of the time we use the Logical OR || to revert to default values in case a particular variable contains a falsy value. However, this can be misleading because the variable can have 0 false "" values which are perfectly valid in respective use cases. In such a case, the Logical OR operator will be an incorrect way of handling such values and this brings us to why the Nullish Coalescing operator is much more precise when replacing values that are only either undefined or null

2) ?. The Optional Chaining Operator

The optional chaining operator ?. is a real life saver when it comes to accessing properties on objects. As you know, the JS object {} can have any type of properties and can also have nested properties inside of it. Sometimes, we do not know if a particular property is set or not and so accessing a property that is not present on the object may result in a runtime error. e.g.

const obj = null

// This will throw an error!
obj.test

In the above example, obj has a null value assigned to it i.e. even though obj is an object type, it does not point to anywhere in memory. Hence trying to access a value on a null object will throw a runtime error.

const obj = { test: 1 }

// this will throw an error!
obj.test.show

As shown above, test is a property that is a number type and not a nested object. Hence there is no show property on test. Trying to access this show will cause an error.

So, to safely handle such doubtful properties, we use ?. instead of . when accessing the value. This optional chaining operator will either resolve to the value it is referenced to or will simply return undefined if it does not exist. You can then handle an undefined value instead of running into a runtime error

The optional chaining operator can be used to chain nested properties instead of manually checking each level. For example:

const obj = {a: null}

console.log(obj?.a?.b)

The above example safely handles b from a. Since a is null, b cannot exist. It is here that optional chaining resolves the nested object structure to an undefined value.