Optional Chaining vs Assertion Operator in TypeScript
If you have been using TypeScript, chances are you have come across the weird “?.” & “!” operators while writing code. And if you are like me, then you might have pulled your hair out trying to figure out the difference between them. Well, rest assured because after reading this article, you will have a clear picture of the two operators and the difference between them.
Before we jump to the difference between these two, let us first understand the behavior of these operators.
1. (?.) — Optional Chaining
Before we jump in to understand optional chaining, let’s take a look at this code written in JavaScript.
In the above code, let’s say we have a data variable but we are not aware of its contents. It may be a null value, undefined, or it may have some properties. To return “data.getName()”, we first have to check whether data is not null and not undefined. Not performing this check may result in an error if the data variable is undefined or null.
Typescript makes writing code like this easy and much simpler to read. With optional chaining, the above code can be re-written in TypeScript as:
Wasn’t that concise and clean? The star of the show in optional chaining is the “?.” operator that checks if the variable is either null or undefined.
If the “?.” operator finds that the variable is either null or undefined, TypeScript will immediately stop running the expression.
2. (!) — Non-null assertion operator
If you frequently write code in TypeScript, then you may have come across this error quite a few times — Object is possibly “null” or “undefined”. We will try to understand what makes TypeScript throw this error and how we can avoid it by looking at this example:
In scenarios like this, TypeScript throws an error at the return statement stating that Object x is possibly “null” or “undefined” even though you are passing a non-null value. But, TypeScript being strongly-typed, is extra cautious and throws the error. Talk about being paranoid!
Anyway, all you have to do is assert in TypeScript that x is not a non-null value by saying “Hey TypeScript, I know you mean well, but I am 100% confident that x is a non-null value, so don't worry about it”. And how do you say this? By using the non-null assertion operator “!”.
By introducing the “!” operator, you assert that x is always going to be a non-null value.
And now, the Difference
Alright, now that you know the behavior of these operators, let's look into the difference between them. Even though Optional Chaining and Non-Null Assertion might look similar in behavior, they have a fundamental difference between them:
- Non-null assertion operator will not null guard your property chain. It just tells TypeScript that the value is never going to be null. But, if your value is indeed null, then your code will crash.
- On the other hand, Optional chaining will null check the property before it continues down the property chain, essentially guarding that value against being null or undefined. If it finds that the property is null or undefined, then TypeScript will simply stop executing the property chain further and your code will proceed.
Conclusion
Thanks for reading my article, I hope it’s helped you understand the difference between optional chaining and the assertion operator in TypeScript! Please feel free to leave any feedback or question in the comments section.
If you liked what you read, then consider giving me a follow. Also, if you are preparing for software engineering interviews, then check out my latest product The Coding Cards that can help you quickly review some very important Data Structures and JavaScript concepts.
