Optional Chaining And Nullish Coalescing

In this article, we will learn about two Concepts of Angular 12. Typescript 3.7 has been released with many new features. Out of all new feature, we are going to discuss two features

1. Nullish Coalescing.
2. Optional Chaining.

1. Nullish Coalescing:- 

Nullish Coalescing operator is a logical operator which is used to check null or undefined between two values

Nullish is an abbreviation of a parameter’s null and undefined value, and Coalescing is combing two values.

Nullish Coalescing is an alternative to || which return right side value when left side value is null or undefined, but the issue that we face with || is , it consider Empty String and 0 as a false, condition which is not correct in certain scenerios.

For Example:- when we want that if the value of weight is null and undefined then it should take  10 as the default value.

With || Operator:

let weight = 0;
Let default_Weight = Weight || 10 ;

The above code will set default_Weight as 10. which is not correct it should only set 10 if the weight is null or undefined.

With ?? Operator

let weight = 0; 
Let default_Weight = Weight ?? 10 ;

The above code will set default_Weight as 0. Because the Nullish Coalescing operator (??) will only check for null and undefine.

Note:-  Nullish Coalescing Operator will prevent from considering 0,NAN,”” as Falsy value .

It will only return the right-side value when the left-side value is null or undefine and vice versa.

2. Optional Chaining:-

Optional Chaining helps develop to immediately stop while running an expression is null and undefined is found.

We can run optional chaining with (?) Operator.

Let’s understand optional chaining with an example:-

Suppose we have a User object in the user object we are having a child object of addresses.

so now if we want to get Pincode from an object of address. But before getting Pincode we need to check whether User and address objects are not blank and undefine .

Note:-  We are having 3 Variations of Optional Chaining.

a) Property Access:- In Property access if we want to access a property of an Object or Child Object.

So Without Optional Chaining:-

Let pincode = User && User.Address&& User.Address.Pincode

And With Optional Chaining, we can minimize the above code as:-

Let pincode = User?.Address?.Pincode;

So now if the user or address array is null then optional chaining we assign undefine in Pincode Variable.

b) Element Access: We can also use Optional chaining with [] brackets when we are accessing an element.

Let pincode = User?.["Address"]?.["Pincode"]; 

C) Optional Call:- When we are calling functional that may or may not exist Optional Chaining helps us to call the functions only which are exists .

Let result = SomeInterface?.commonMethod?.();

This is how Optional Chaining and Nullish Coalescing works to check whether the objects are null or undefined or not.

I hope this article helps you guys