This blog demonstrates the use of Safe Navigation Operator(?.)

Safe Navigation Operator(?.) is already present in other scripting languages i.e. Groovy and there it is known as Null-Safe Dereference. First let us understand the scenario where it is useful.

We face a common error(Cannot read property 'propertyName' of undefined) a lot in JavaScript, if we try to read property on a undefined object. i.e.

var user;
console.log(user.name); // Uncaught TypeError: Cannot read property 'name' of undefined

To handle this error, we add check for user object, if user is defined then only we read the name i.e.:

var user;
if (user) {
    console.log(user.name); // Uncaught TypeError: Cannot read property 'name' of undefined
}

In AngularJS, we write JavaScript into HTML/View. And in AngularJS 1.X, it silently fails, if user object is not defined and does not display anything.

<div>
    User Details:
    Name: {{user.name}}
    Age: {{user.age}}
</div>  

But in Angular2, it will throw an error Uncaught TypeError: Cannot read property 'name' of undefined. So we have to add extra check before reading the property from object:

<div>
    User Details:
    Name: {{user && user.name}}
    Age: {{user && user.age}}
</div> 

So to facilitate this extra check Angular2 has introduced Safe Navigation Operator(?.). With (?.) our code will be smaller and readable:

<div>
    User Details:
    Name: {{user?.name}}
    Age: {{user?.age}}
</div>  

Safe Navigation Operator(?.) is used to avoid error Cannot read property 'propertyName' of undefined. Typically when we have a reference of an object and we might need to verify that it is not undefined before accessing the property the object.

Github

Twitter

LinkedIn

More Blogs By Me