If you are just starting out with JavaScript, maybe you are not familiar with the term “expressions” and you happen to come across this post. I will briefly explain what expressions are. Expressions in JS to be simply put are just phrases that upon evaluation they return a value. There are several expression in JS but I choose to write on Conditional property access because it is one of the latest features that comes with ES2020.

Regular property access expression take either of the two following syntax;

Where the identifier specifies the name of the desired property. The second style of the normal property access expression begins with an expression( an object or an array) followed by a period and then another expression which is the index position of the desired array element or the name of the desired property. An example will help explain this.

In regardless of the style you choose to access a property, the expression before the . or [ is evaluated first, if it happens that such expression is either undefined or null then a TypeError is thrown and this is because the JS values that do not have properties are the null and undefined values. If either an expression or identifier follows the period(.). The overall value of the expression is the value of the property represented by the identifier or the desired element of the given index position. In either case if the expression or identifier after the period doesn't exist the overall value is undefined. Understanding of the above will bring us to see the role the conditional property access expressions play whose syntax is.

Like I mentioned above that the only two values that do not have properties in JS are the null and undefined data types. And so a regular property expression using . or [ ] where the value before the period is null or undefined will raise an error. We can use the ?. or ?.[ ] to prevent such error.

Consider the expression a?.b if "a" is null or undefined, then this expression overall value evaluates to undefined. Remember that "a" is null or undefined and the regular property access expression would have returned a TypeError. What happens with the conditional property access expression is that once a is evaluated and returns either null or undefined the expression doesn’t attempt to access the property "b" it just returns Undefined. If "a" is some other value, then a?.b evaluates to whatever a.b would evaluate to (and if a does not have a property named b,then the value will again be undefined). This variation of the property expression is sometimes called “optional chaining” because it works for longer property access expressions. An example will help make this clear.

"a" is an object, so a.b is a valid property expression which will return null so a.b.c i.e null.c would return a TypeError if we didn’t use ?. and thus a.b?.c evaluates to undefined. But what if we try (a.b?.c).d we will get a TypeError because that expression attempts to access a property of the value undefined. However a.b?.c.d simply evaluates to undefined. And this result is because property access with ?. is “short-circuting” in the sense that if the subexpression of the left of ?. evaluates to null or undefined, then the entire expression immediately evaluates to undefined without any further property access attempts. If a.b is an object, and that object has no property named c then a.b?.c.d will result in a type error, here we can use the conditional property access.

Conditional property access is also possible using ?.[ ] instead of [ ]

I do hope this post was informative and if you find it to be, you could like, share and leave a comment. You can also follow me to get more posts related to programming. Thank you.