Why Is Array/Object Destructuring So Useful And How To Use It

welcome back to web dev simplified my name is Kyle and it's today's video we're gonna take a look at one of the best features of es6 which is object D structuring and array D structuring as well as the spread operator and these features are absolutely crucial if you want to develop using a front-end frameworks such as react and even if you don't want to use it they're incredibly useful for making your code so much cleaner and easier to work with so without further ado let's get started now so to get started I just have Visual Studio code open as well as the council output for all of the code that we're gonna be writing and to get started I kind of want to explain what D structuring is an idea of D structuring is to take an object or an array in this case and convert it into smaller objects or smaller elements or smaller variables so let's take a look at a very simple example we're just gonna take our alphabet array and we want to get the very first two elements in that array so normally if you want to get the first element you would do something like this you would say alphabet of index 0 and that's going to give you the first element so we can just log this out to make sure this is working console dot log a and as you can see over here it's logging out a let's just assume that in actually there we go it's logging out a and for the second element we would do the exact same thing just like this and we would log B and you can see that's working properly but this is kind of clunky to do and there's a much easier way to do this by using D structuring so let's comment out this way of doing old things and what's actually coming here and we know that we want to get the elements a and B so we can just say we want to get a and we want to get B and we're just going to set that equal to here alphabet and if we save you see we get the same output a and B but how exactly does this work so the idea of D structuring is that what you want to do is you take the element you want a D structure and you put that on the right side of the equals sign essentially you're saying D structure this alphabet array and what we want to do is since we have an array we put our parenthesis over here our array brackets around the elements that we wanted to supply so we have our variable names a and B that we want to actually get out of this array and we put those inside of those brackets so that we know we're taking this array apart and put it into these constants a and B and then the position of these elements is where they're gonna get pulled out so a is the first element inside of this array so it's going to get the first element B is the second element so it's going to get the second element here and so on so you can see we get the first and we just need to put a third element in here for example see and this is going to give us the third element and if we save that you see we get to see over here but what if we wanted to skip B for example what if we only wanted a and C well we can just remove B leave in this comma and this is going to say skip the second omen so if we say that you see we just get a and C and that's working perfectly fine but what if we want to get the rest of the elements inside of the alphabet that's where the idea of the spread operator comes in so we can just come over here put three dots and whatever you want to call the rest of alphabet we're just gonna call it rest and let's log that out so console dot log of rest now if we save that you see that our first element a goes into the variable a we skip the second element and then the third element C goes into this variable C as you can see a and C and then everything else all over the rest of our array de and F they all go into this rest variable which gets printed out over here on the right side of the screen as you can see de F another really powerful thing with D structuring and the spread operator is you can use it to combine two arrays together so for example we can come down here and we can just say we want to create a new array and this new array is gonna be our alphabet array and our numbers array combined together so we know that we want this to be an array and we want to get all of the elements inside of alphabet so we can just say dot dot alphabet and this is going to spread all of the alphabet letters all across here inside of the array and then after that we want to do the same as I claim but for numbers so what this is going to do is it's going to put all the alphabet elements here and then all the numbers afterwards and we can come in here we can print that out so we can just say print new array and if we save that you see we get all of the alphabet and then all of the numbers afterwards now granted this isn't entirely that useful for a raise because we can do the same exact thing by saying alphabet concat and then be passed in numbers that's going to give us as you can see the exact same output over here but when we move into objects this syntax will become incredibly useful for combining two different objects together another place that the array version of this is incredibly useful is when you're dealing with functions and returning more than one parameter from a function so let's create a function down here and this function is just going to be called sum and multiply whoops multiply and what this is going to do it's going to take two numbers a and B and as you're going to sum them together and multiply them together and return both of those in a so we're going to return here a plus B and we're also going to return a times B so now when we call this function we're going to be getting an array so let's do that real quick we'll say sum and multiply we'll just say two and three and we're just going to set this to a value so we'll say Const array is going to be equal to that and then we'll just console dot log out that array and let's remove all the other code since we don't actually need that right now and if we say that you see we get our sum as the first number two plus three is five and we get the multiplication two times three as our second number in that array but we can use that array destructuring to just come in here and say we want the sum right here it's the first element and we know that the multiplication here is going to be the second element so we can just say we want to D structure the return from this as two different variables one sum and one multiply and now we can come in here we can log out sum and we can log out multiply and over here if we get some as five and multiply as six something else that's a really handy that we can do with this destructuring is we can actually set default values so let's say in here that this also maybe could return a division division and by default we just want to set the division to maybe say no division okay so by default this will say no division but if we pass it a division it'll actually set to that division that we can come in here log out division and you can see it says no division because this sum and multiply it is only returning two properties but if we came in here and said another property a divided by B and we run this you'll see that now division is actually being populated with that third parameter that's being sent out but when that's not there it gets populated to the default value which we set inside of our D structure and the power of D structuring is really not that apparent in a raise it's still really useful to build the D structure and arrays and like you can see here there's many use cases for it especially in functions but the real power of D structuring comes with objects so let's jump over and look at object D structuring so here we are with two basic objects we have person 1 and person 2 and they have the properties of name age and address and that address has the properties of city and state and now when we want to actually D structure an object it's going to work very similarly to an array so let's just go down here and we can just say that we want to get maybe the name of the person and we want to get their age so since we're D structuring an object we use curly braces instead of square brackets and we just say what we want to get we want to get the name property and we want to get the age property and we want to get them from person two for example so we'll say person two and we're going to console that log out our name and we're going to do the same exact thing for the age and if you say that we see we get the name Sally and the age 32 this works exactly the same as the array destructuring but instead of it being based on position it's actually based on the name of the key so for example name here is set to name up here and age and age they need to match but what if you want to use a different name what if you want to set this variable here to be first name instead all you would do is put the actual name inside of the object or destruction in our case name and then after that you put a colon and then the actual variable name you want so for our example if we want this to be first name and then we come down here and we can print out first name and if we say that you see we get the same exact output and what this is doing is it's taking the name property from the person and it's mapping that to this first name variable that we're creating and we can even still use default values inside of here for example let's say that we want to get something else this person doesn't already have let's say we want to get favorite food and by default we just want this to be will just say rice and we can come here we can log out favorite food and you can see by default it is rice but if we set the favorite food for example we'll just say their favorite food is watermelon put a comma here you'll now see that watermelons being outputted we can do the same thing for first name we can default the first name here to John and if this person has no first name and we save you'll see that this first name gets set to John but when they do have a first name you'll see that it becomes sali which is their actual first name also just like with the array deacon structuring we can do the spread operator as well so let's go all the way back here to where we just have name and we do just put dot and any variable name you want for example we'll call this rest and this is going to be the rest of our object so if we save this you'll see that we'll get everything else inside of that object except for the name which we already took out so we'll have address here the age as well as the favorite food but since we took name out here in the destructuring name does not show up in that rest object also something that's really nice about destructuring objects is you can actually destruct your nested objects for example dress we can come in here and we can just say that we want to get the street so we'll say a dress and inside of that address what we want to do is we want to get the street so what we do is we put the key here address which match which is the address key inside of the object and then we put it again the curly braces saying that we just want to D structure this new object and we just want to get this street so one here we can print out street and if we save that you see how we're getting undefined and that's because there is no street property and address so let's for example get city instead now we can save that and make sure we change our variable name down here and you can see that we're getting our city which is somewhere else just like it is inside of the object here and again we can do default values essentially this works exactly the same we're just nesting our object deconstruction inside of another object deconstruction another thing we can do is actually combine two different objects so let's take our two objects here and let's remove the name and the address from person number two and we're going to combine person number one and person number two and everything in person number two will overwrite what's in person number one so an easy way to do that is we can just come down here we're gonna say that we want this to be person three and person three is going to be equal we need to put it inside of our curly brackets here because we're doing D structuring and we're just going to get all of the rest of person one and all of the rest of person two and what this is going to say is this going to say take everything inside a person one and put it in the object and then take everything in person 2 and also put it in the same object but overwrite anything that was already in person one and we can print out first and three down here and as you can see we get the name of Kyle which is up here the name and person one we get the age of 32 because this gets overridden from person to sing with favorite food watermelon that gets added by person two and then the address here is the same exact address as person one up above because person two doesn't have an address and this ability to combine two objects together like this is very prevalent in frameworks such as react and even just a normal JavaScript another thing that I think is the most important and useful part of object Deacon structuring is the ability to use it inside of functions inside of the arguments so let's come down here and create a function and this function is just gonna be called print user and this is going to take in a user and all this is going to do is we're just gonna console log user so now if we save that and we actually call this function so we say print user and we pass it in person one you can see it prints out the object for that user but what if we only really want to get the name and the age of the user inside of this print user function for example what if we wanted to print something like this we could say name is and then we could print out the name just like this user dot name and then we could say also age is and we can print out the user's age by just saying user dot whoops user dot H just like this now if we say that you says name is Kyle and ages 24 but since we only are using the name in the age inside of this arguments we can just actually use destructuring we can say here that all we want to do is we're going to take in an object as where these curly braces are saying we're taking an object and all we want is the name and the age property of that object and now if we can come down here if we don't actually need this user and if any more we just say a name and age and when we say that you see we get the exact same output over here because we're passing in person 1 and is d structuring that and saying all we want is the name and the age we can also set default for example we can come in here and say favorite food and we can set that to a default again of watermelon and then when we come down here we can also print out that so we can just say right here we can say whoops food is and we just want to print out the favorite food and now when we said that you see us as food is watermelon but of course if we come over here and we put a favorite food for example rice and we save it again you see over here it now says food is rice this right here is the single most useful part of object destruction in my opinion and I use this by far the most especially when working with languages like react because react very heavily uses object destructuring inside of its function calls and speaking of react I'm currently working on a react course right now so if you're interested in learning to react and want to learn more about the course I'm working on and more information about when it will be released make sure you go down in the description below click on the link and sign up for my email list well keep you notified of all the latest information on my react course and with that out of the way you know everything you need to know about object and array D structuring and I can finally go shave all of this off my face because I did not realize how bad it was until I just saw myself in the camera now also make sure to check out my other videos they're gonna be linked over here and you can subscribe to my channel for more videos like this where I simplify the web for you thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 189,314

Rating: 4.9815836 out of 5

Keywords: webdevsimplified, object destructuring, array destructuring, array destructuring javascript, array destructuring es6, es6, javascript es6, es6 destructuring, destructuring tutorial, destructuring javascript, js es6, js destructuring, react object destructuring, react destructuring, es6 destructuring tutorial, destructuring js, spread operator, spread operator es6, spread operator js, js spread operator, javascript spread operator, spread operator react

Id: NIq3qLaHCIs

Length: 13min 24sec (804 seconds)

Published: Sat Jul 20 2019