In this video, we're going to be talking
about optional chaining. Easily one of my most favorite things
about the new ECMAScript, I can't believe how long we lived
without this. Optional chaining. Looks like this. This question
mark, period. before I get into what exactly
optional training is, I'm going to show you
where this is relevant to you. So say we have an object
and this object has several nested levels. So you see this object has one level,
two levels, three levels into it. If we wanted to access one of those
levels, we would say incidentRecord.incident.details.description, etc. And even more complex,
if one of those things were an array, because then we would have
to know their index and that's etc., etc.. So this is long. One of the problems inside old school
JavaScript is What if you're getting an object
from an external source or an API or an integration
and their objects are huge, especially in APIs,
or they may change the API in the background
and now your script might error out. What if this description didn't exist? Or what if they changed the name
of an earlier level like incident? Now, this wouldn't run, So let's simulate
that. Let's say they changed this to incidents, and now if I run the script,
I actually get a full error. It actually stops my script from running. Now I have a broken script and this might be a critical function
to my needs. One of the ways that we used to safeguard against that was this very tedious,
if incidentRecord AND incidentRecord.incident AND incidentRecord. incident.details. This is how a lot of us used to safeguard
against one of these situations where an object change
and now we are lost within it. So if I press run now it nothing happens
because one of those objects were missing, we actually verified that those things
exist before we actually run it. This is tedious. So in the new ECMAScript, that syntax is so much easier
with optional change. All we have to do if we're not sure
if a particular level might not be there or they might return null or undefined
is simply add optional chains and I'm
adding them to each level here, because in the situation where this object is coming
from, an external source, I want to make sure
that my code still runs even if something inside of here fails. So if I press run on this script, it returns undefined instead. Before it was a complete error
and my entire script shut down. Instead it's giving me undefined
in my script continues to run to the end. Very useful, especially,
and things like in the service portal where you have an input object that needs to go back into your server
script as a data object, verifying
if that input variable is still there or even exist is much easier
when you use optional chaining. And similarly, if I add a function here to this object, Optional chaining can be used
in the calling of that function. There's the correct response. If I change the name of that function
undefined instead of an error. Nice.