# Optional Chaining in JavaScript

In this blog , you are going to learn about a new feature of *JavaScript* introduced
in ES2020 that is *Optional chaining* represented by *?.*
     
![opional.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620758317792/bURElcLwf.png)
                      
                         

**What is Optional Chaining?**

Optional chaining is a safe way or can say a easy way to access nested object properties, even if an intermediate property does not exits. It fixes the problem
of having to do multiple null checks when accessing a long chain of object 
properties in JavaScript.

**Use Cases**

1. Accessing potentially null or undefined properties of an object.
2.  Getting result from the variable that may not be available yet ,getting default value.





**How it works?**

If you've just started to read tutorials and learn JavaScript, maybe the 
problem hasn't touched you yet, but it's quite common.

As a example, let's say we have *user* object that hold the 
information about our users.
Most of our users have landmark in *user.landmark* property,
with the location *user.landmark.location* but some did not provide them.

In such cases, when we attempt to get *user.landmark.location* ,and 
the user happens to be without an landmark, we get an error:

```
let user = {}; // a user without "landmark" property

alert(user.landmark.location); //Error
``` 
That's the expected result. JavaScript works like this. As
*user.landmark* is undefined , an attempt to get *user.landmark.location*
fails with an error.

Also the obvious solution would be to check the value through *if* or the 
*conditonal operator* but it will be a headache as the same value will
repeat again and again and the code will become complicated and inelegant.

```
let user = {};

alert(user.landmark ? user.landmark.location: // undefined
``` 

For more deeply nested properties , that becomes a problem
as more repetitions are required.


```
let user = {};  //user has no address

alert(user.landmark ? user.landmark.location ? user.landmark.location.geometry:null :null);
```
That's just awful, one may even have problems understanding the code.

   
![awful.jfif](https://cdn.hashnode.com/res/hashnode/image/upload/v1620757738661/3Kr4gxbQm.jpeg)

That's why the *optional chaining* was added to the language to solve such
problems.

**Optional chaining**
 
The optional chaining* ?.* stops the evaluation if the value
before *?.* is *undefined* or *null* and returns *undefined*.

Here's the safe way to acccess *user.landmark.location* using *?.*


```
let user = {};  //user has no address

alert (user ?. landmark ?. location );  //undefined no error
``` 
The code is short and clean,there's no duplication at all.
Reading the address with *user?.landmark* works even if
the user object doesn't exist

```
let user = null;

alert(user ?.landmark );  //undefined

alert(user?.landmark.location ); //undefined
``` 
So this is all about Optional Chaining which is a great feature and I  think
everyone who is into JavaScript should know in order to make your code easy and 
interesting.

I hope you enjoyed the read. Do like and share
#internet