The optional chaining operator in JavaScript

Tram Ho


One nice day, you finish coding, write cool code, take data and change them to show up, you see the error undefined. And so your app crashes. It is annoying, right?

If you’ve been following JavaScript for a while, then this error is no stranger to you. Now handle it. The genres variable is being undefined , which requires an if condition to ensure this case.

So the app works normally again.

Is there a better way to keep checking the value of an object before accessing its properties? JavaScript certainly wants to help you handle this as well.

And that’s what I want to introduce in this article, the optional chaining operator ?. .

The optional chaining operator is a proposal currently in Stage 4, which allows for short-circuiting if the reference is null or undefined then returns the undefined value instead of throwing errors from which the program cannot continue. This makes the expressions shorter and simpler when accessing the properties of an object whose viability is not guaranteed.

The syntax of the optional chaining operator (?.)

It sounds a bit complicated, the syntax is not ?. Okay then, but in this section, I want to explain more about the syntax of the operator in each case with example code will help you to better understand it.

Optional chaining with object

Although the variable possibleNull is null , the result still doesn’t return an error because of the ?. Operator ?. helped you handle it. It will skip that segment and continue to execute the program, so that the value variable at this time will not increase the value, remaining at 0.

Optional chaining with object properties

Below is an example of optional chanining when accessing properties of an object

If the operand on the left of ?. is null or undefined, the calculation expression will have the value undefined .

You can also use the optional chaining operator when accessing an attribute as an expression using square brackets as in the following case:

Optional chaining with function call

You can use it in the case of calling a function that doesn’t necessarily already exist.

By using optional chaining with the function call, the expression will immediately return undefined instead of throwing an exception if the method is not found. It will be extremely useful when you use the API with a method that is not available, due to the version or method that is not supported on user devices …

Access the element of the array with optional chaining

Arrays with optional chaining are also quite interesting, you can access the element by passing an index, and if the index does not exist in the network, the program will not fail.

Stacked optional chaining

Another cool thing is that you can use optional chaining multiple times with the same nested object

Both customerSubscription and customerCity variables end up undefined because they are not defined in the customer object. And you can do the same with the function. Eg:

Combined with the nullish coalescing operator

The nullish coalescing operator (also in the proposal of Stage 4) is written as ?? is a logical operator that returns its right operand when its left operand is null or undefined , otherwise it returns its left operand. For example:

Now combining 2 operators, you will get as in this example:

When a city attribute does not exist, first of all thanks ?. it becomes undefined , next, operator ?? will set it to the right operand “City not provided”.

So you can create default values ​​when the property is forgotten, reducing the debugging time for bad data. It is great, isn’t it. 😀


The optional chaining operator helps us minimize errors when the value of an object or function does not exist. Because it was still a proposal at Stage 4 at the time of this writing, it is not fully supported by all browsers or is standardized into JavaScript. Chrome, Firefox and Opera already support it, Edge, Safari and Internet Explorer do not.

Thank you for following along, hopefully you will put it to use when this operator is officially standardized, and it will help you to simplify the code a lot more.


Share the news now

Source : Viblo