JavaScript ES2020 - The Most Requested Feature Explained in 10 Minutes

Key Takeaways

great news the new es 20/20 features are now finalized this means we now have a complete idea of the changes happening in ES 2020 the new and improved specification of JavaScript so what are the changes as you can see there aren't many there are some but in this video we are going to explore in my opinion the most important feature of ES 2020 which is optional chaining let's dive right in [Music] optional chaining is the feature I'm most excited about in ES 2020 optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not if it exists great if it doesn't we're just going to return undefined super convenient currently if we want to access a deeply nested property of an object we have to check if the property in each nesting level is defined by using logical expressions what does all of that mean and why should we care the best way to see it is in an example so let me show you the current problem that we have let's create a basic object so let's do Const user and that's going to be equal to an object which has the property of first name let's say John and also a property of last name which is going to be Doe in there we also have the address let's say the city is NYC the street is some kind of road let's say test road after that we have a house which is going to be another object and then in there we have a house number let's say five this is our finished object now if we have a nested object inside of an object that is undefined or null in any level then our program will crash and the rest won't even run if we don't do a check for that this means we have to check every level to make sure that it won't crash when it runs into an undefined or novel so let's say that we want to retrieve the house number that's going to be easier right console.log that's going to be user that address that house and then that number this is going to give us the number which is going to be fine pretty straightforward but let's say that we are fetching this data from the API and for some unfortunate reason we don't even get the address then the object would look like this so we are going to comment this out and the object which is not fetched properly is going to look like this let's say so the address is going to be completely undefined with that in mind what would our previous console log this one here return do you think it'll be undefined so right now we are going to copy this code and we are going to head to the browser so this is just the ambient page for optional chaining you can also check it out and in here I just have the console open you can right click and then inspect and open the console if you don't know how to so right there I'm going to paste our example it's not going to be 5 anymore of course and you can see what happens looks like we got an error what does that mean for our application the entire code execution stopped app trashed we never want this to happen solution for this problem before is 20/20 looks just awful we first have to check whether user object exists and we can do that like this user and end this is going to make sure that the user evaluates to true D then we have to check whether user that address exists so we can do that by user that address so if the user exists then check for the user that address if user that address exists then check for user that address and then that home or that was house you can see that right there and then finally if that exists then try to console log the number of the house so if we now take this go back to the browser again and refresh as you can see we are getting undefined nothing special we don't get any value but the main point of this is that we indeed do get undefined and the air is not shown our application didn't crash so to be able to achieve that we had to do this ugly code we can even bring it in one line but still doesn't look all that better with this approach we wrote many lines of code and we accomplished to bypass the error and get only undefined so far this has been the only way to solve this without getting an error now we are going to dive into the es 20/20 solution with optional chaining with the optional chaining operator we just need to use the question mark dot notation question mark dot looks a bit odd but does the new syntax to access nested objects and if it bumps into a property that's null or undefined then it just returns undefined so if it bumps into now or undefined returns undefined so how can we show that in action we don't need this we are just going to get this console log right there remember if we just can't select like this we are getting an error because we don't have any properties here and we cannot read the number of the house which doesn't exist and we cannot even read the house of the address which is not an object take a look at this question mark dot or the optional chaining I'm going to even write it here optional chaining yes 20/20 so before the dot we just add question mark this is going to make sure that the user exists and then we can move on to the address then we are going to add another question mark here and if that exists finally we can check for the number that's it this is our solution with this we are successfully getting undefined instead of an error let's copy this and head to the browser so if you copy it and then refresh the browser ignore these errors and warnings and we can just base the code as you can see we indeed God undefined and no error was shown when our program runs into our undefined or null in this case address is the undefined so it's right there instead of crashing we'll just get back undefined otherwise the return value will be the value of the property you wanted to access as expected let's test that out instead of this user I'm going to bring back our original properly fetched user now if we copy this go back refresh and then paste it you'll be able to see that we should get back the number five as we expect and we do we don't have to write a lot of logical expressions just to be able to access a deeply nested object the final thing you might be wondering about is how we do the dynamic keys so in objects you can have for example a key of house and the number you want to access but sometimes you don't have this as a string so let's say you want to do Const searched property and then in here you get the actual thing you're looking for in this case we just have it as a constant but sometimes you're going to get this value dynamically from an input for example or from anywhere else so in this case we have to check this thing let me show you what I mean when I say dynamic key so let's say that we want to access this console.log user that address that house and then in here we want to access the search property which is in this case going to be a number so how can we use a question mark dot notation with this in here we don't have the dot we just have the square brackets so what can we do for these things is the same thing right there right there and you might think this is going to work but we indeed do need the question mark and the dot for this to work and that's it if we just try it out and we try it on for example let's say this user which doesn't have an address we can save it copy that and go back into the browser refresh and if we baste it as you can see we do get undefined instead of an error which means that the optional chaining operator works successfully that's going to be it for this video if you'd like more is 20/20 feature videos let me know in the comments which one you would like and subscribe to see them soon have a great day and stay safe [Music]