Optional Chaining in JavaScript

Key Takeaways

So optional chaining in JavaScript is a feature that lets you safely access nested object properties without crashing your app if something doesn't exist. So let's take a quick look at an example. We have a user object with a name and email. But let's say it's possible that they can have an avatar. So I'm going to have a variable of avatar URL. And I'm going to set that to user.vatar URL. And let's go ahead and save that and try to log it and see what we get. So you'll see that it throws a type error. cannot read properties of undefined reading URL. So basically I'm trying to get this URL property from this avatar property which doesn't exist. It's undefined. Okay, it's not in this user object. Now we have a couple options. We could do a conditional which could be a full if statement or we could do a turnary and say if user.avvatar then let's do user.avvatar URL. Else then we'll say undefined. And now if we clear this up and run it, then I get undefined. It doesn't throw an error because we're doing that check. Now this is okay in this situation, but it can get kind of messy if you're dealing with multiple levels of properties or you're getting multiple properties. So what we can do is what I just had, which was user.avvatar URL. And the only thing we need to add to it is the optional chaining operator, which is a question mark. And I'm going to put that right after avatar. Okay. So now I no longer get the error. It's just set to undefined. And you could go multiple levels deep like maybe it's under profile and you want to add the optional chaining character there as well and still get undefined. I don't get any errors thrown.