JavaScript ES6 Destructuring of Arrays and Objects | JavaScript ES6 Tutorial

hey welcome back guys so in today's video we will see one of the best and most useful feature of es6 and that is destructuring we will go through couple of examples and see how to use destructuring for arrays objects and both at the same time but before we go further just make sure you subscribe my channel and press the bell icon so that you don't miss the videos like this one so let's get [Music] started all right guys so i have a javascript file with an object of employ and this employer have some basic properties like id name age department and on the right hand side i have my console so the first thing we will see that how we can use the destructuring with objects so if i want to access any of the property of this employee then what i can do i can simply write a name and i write employee dot name and let's uh access the age as well so if i want to access the age i will just write employee dot h and now if i can do a console.log name and i will do a console.log for h and now if i save it then you can see that i get the name and the h consoled on my screen but here you can see that we have repeated the same thing again and again like we have repeated the name twice we have repeated the age twice and we have also repeated the employees but es6 gives you some very good features like destructuring where you don't need to repeat yourself and this thing can be done in a very small syntax and in a very concise way so let me show you how you can do this thing with the structuring so we are going to write a constant and i'm going to write this constant as equals to the employee but on the left hand side i'm going to create a object syntax all right and inside the object i can write the property names that i want to access from my employee object so i want to access name and i want to access the age now if i save it you will see that i still get the same result and this is very much we are not repeating employee dot name again or employee.h we are just using those property names directly we can also do one more thing like if you don't want to use the name as the property and you want to give any other name then i can write a colon and i can use full name and now if i use this full name i'm still going to get the same result and one cool thing about this destructuring is that you can also use the default parameter here suppose if i want to use a default parameter of nikesh then you can see that now i have used the default parameter and suppose if this my employee object doesn't have the property of name then it's actually going to take the default value which is the nikkei let me show you one more thing that if you want to do a destructuring of a nested object like you have an employee we have an address and i want to access the city of the particular employee then we can also do that so what i'm going to do i'm just going to remove this and i need to have a address first and now if i console this address so it's going to give me an object so let me save that so it is going to give me an object but i only want the city of it i don't want the complete object then what we can do we can actually destructure one more level and then i can simply write city here and i can use the city here so if i save it then i'm going to get the mccarthy as the output we can also use the destructuring in functions so what i'm going to do i'm going to create a function and that function name will be display employee and this is going to take an employee and then i'm just need to console.log and i'm going to use a string literal and i will write the employee name is dollar name and age is dollar age all right and now if i need to call this function then what i'm going to do i'm going to pass the employee all right and if i want to print those names and then usually what i do i'm going to do employee dot name and i will do employee dot h and now if i save it then you can see that we get employee dot name as undefined and that is because i have removed the name property from here all right so now i get the name as the page and age as 28 but we we can also do the restructuring on the functions so on the functions if i want to do the destructuring it will be very similar we just need to have the age and we need to have the name and the best part is that you don't need to maintain any sequence i mean i can write age first i can write name after so there's no sequence i need to maintain and if i save it then i'm still going to get the same result now let's see how we do the destructuring in terms of an arrays so now we have an array and when we want to access any of the value of the array what we do i'm just going to write an apple and we use fruits and i need the first fruit that is at the index 0 and for the second index i'm going to write mango and we use the same fruits at the index 1 and we simply do a console.log apple and then do the console.log for mangoes all right and we are going to get apple and mango but if we want to do a destructuring for the array then we can do it via same i will write a constant and this constant will be equal to my array so my array is fruits and in order to do the destructuring for arrays we need to use an array here and inside the array we are going to use the values so if i write root 1 root 1 and then i will write root 2 then it will take the same like on the first index it's apple so the apple will be given the value to fruit one the second is mango the mango will be given to fruit two so unlike objects in arrays you can write any name here and this name will be reference to the first value of the array so fruit 1 will refer to the first value of the array which is apple fruit 2 will refer to the second value of the array which is mango and let me copy this and now if i save it then i'm going to get apple and mangoes but let's say that you don't you want to skip mangoes and you want the third value banana so for that what we can do i will just do a empty i won't be having any reference and then it's going to skip the second value of the array and it's going to give me the third value and if i save it then i'm going to get apples and bananas one more thing you can do is that with the destructuring you can also use the rest operator so you want the first three values and you want the rest of the array then we can simply use the rest operator so if i write the rest operator and if i do a console.log then i'm going to get the remaining array which is the pineapple so this is how you will do the destructuring part in the erase and it is very useful when actually you work with react.js let me show you an example where we actually going to destructure the arrays and objects both at the same time so i'm going to write array and objects and i'm just going to copy paste one example so that we don't waste time in writing it so now you can see that i have a array of groceries and these array has items so what we can do is now suppose you want to access the apples you want to access the apples and if you want to access the apples what usually you will do you will do a console.log you are going to write a grocery list with index of 0 then inside that you are going to write the item and if i save it then i am going to get the apples but using destructuring we can write this in a very simple way i'm going to write a constant and i'm going to write an apple here and this apple will be equal to the grocery list all right so first we have an array so if we want to access the first element of the array we simply are going to do this so this is going to give me the first object which is the first item this one and if i do a console.log then you will be seeing that we get the complete object but i don't want the complete object i only want the item in it so for that what we can do we can do a destructuring but when we actually do a destructuring of the object it's always take with the property and there is no property as apple so i need to assign the property this way so if i save it now i'm going to get apples you can also do if you don't want to use the variable as apple but you want to use directly as item then you can simply write the item and it's going to give me the apples so we can also do that if i want tomatoes then i can skip the first two so i'm going to skip the first two and then i'm going to get the tomatoes as the third and after getting tomatoes i want the rest of the objects as well so for that we can simply use the same rest operator and if i do a console log for the rest operator then i'm going to get the remaining array of objects so these are the remaining array of objects so that's how the powerful the destructuring is and let's see an example of another way around where you have an object and inside the object you have an array and now what we want is that we want the location singapore to be picked up so in order to get the location of the singapore the first thing we usually do is we do console log we write the company dot locations and then singapore is on zeroth index so i will write 0 and i get the value as singapore but if we want to achieve this using destructuring what we can do i'm going to write a constant and that constant is equals to my object which is a company and in order to do a destructuring for an object we use curly braces all right and inside the curly braces i'm going to use the property name which is the locations and from the locations i just need to access the first value of the index 0 so for that what we can do i'm going to write a array here and i'm going to use a loci location and now if i print this loc here then i'm going to get singapore if i want india then i'm going to skip the first value and then i'm going to get india so this syntax is little bit weird but as you go along and as you use more and more destructuring in your projects i mean you will get along and you will see that the syntax is very neat and clear and there is a last use case which i want to show you is what i'm going to do i'm just going to remove everything and i'm going to write a constant users and this user have m nesting arrays so i'm going to write the page here and i'm going to write malvia here all right and i'm just going to do a copy paste for two more users i want the output to be this way i want the output to be an array which contains the objects and inside the objects i want a key value pair which is the first name as the page last name as malvia and using the destructuring we can do it very easily so what i'm trying to do is i'm going to use a higher order array function which is the map so if you don't know about the higher order functions i have a video on it 13 useful array functions that you can use in your projects i'm going to add the link in the description so that you can check it out later on so what i'm going to do is i'm going to create a constant with users object and this constant what it's going to take is it's going to take the users and it will give you the first user and with the first user what you can do you can actually return the object and you want the object to be as what you will do you will do first name and this first name will be equals to the user index of zero and then for the last name what you are going to do for the last name you are going to do user index one all right and now let me print this user object so i'm going to do a console.log user object and i if i save it then user is not defined so i have made some mistake oops i forgot to write the map here all right so now if i save it then you will see that we get first name last name and three objects but we will be using destructuring so in order to do the destructuring what we can do actually here is so from the array what i want i can take the first value as the first name and the second value as the last name all right and then what we can do i can actually assign the first value here and i can assign the last value here and if i save it i'm still going to get the same result but we can do one more thing as es6 has the enhanced object literals and that way we can what we can do is if the key and the value is same we can actually remove it so i'm going to remove this and i'm going to remove this as well and now if i save it then i'm still going to get the same result so so that's how i mean you can use the destructuring and it's very very useful when you actually work with languages like react or even if you don't work with the react but you will still be able to write very clean code and not repeating yourself again and again to access values of objects and arrays so i hope you like this video and this video is helpful to you a thumbs up is appreciated you can also connect with me via facebook or instagram i will add the links in the description below and guys please subscribe my channel so that you don't miss the videos like this one and thank you thanks for watching

Channel: Dipesh Malvia

Views: 1,819

Rating: 4.9266057 out of 5

Keywords: ES6 Destructuring Arrays, JavaScript Object Destructuring, Array and Object Destructuring, ES6 Tutorial, javascript, es6, destructuring, javascript for beginners, es6 crash course, traversy media

Id: rpYg2M2lNAE

Length: 14min 59sec (899 seconds)

Published: Fri Jan 15 2021