Introduction to JavaScript Destructuring. So destructuring is a JavaScript expression that allows for the unpacking of data from collections, such as arrays and objects and bind that data to variables. On the screen, I have a user object. I'm gonna use basic assignment destructuring to unpack the values. I'm gonna begin by writing const, then curly brackets and inside I will write user name and user email and set this equal to user. Basic assignment is the unpacking of object properties through destructuring and using them as variables.

To demonstrate this, I will console log, user name and user email. And on the right, in the console, those values are being displayed. One thing to note, you do not have to destructure all properties that exist within the object. Just the ones whose values you wish to have access to. Now this was basic assignment, but I can unpack the value to a new variable name. On line eight after user name, I will add a colon. And the colon signifies a new variable declaration. I will type full name as the variable name. I will also repeat the process after user email and type email address as the new variable name, I will choose a console log below to match and execute this again, repeating the previous result.

Another feature of destructuring is that it can be used within function parameters. I will delete the parameters from the user info function and replace them with curly brackets. Just like before, when I destructured the user object, I'm gonna use basic assignment as the destructured parameters. I will type user name and user info inside of the curly brackets.

Now, inside of this function, I'm using a template string. So I need to change the template string expressions to match the parameters. I will change name to user name and email to user email. Now, on the following line, after the function, I'm gonna call the function passing through the user object. I will execute this and the message to the right shows the destructured values. This pattern of passing through destructured parameters as function parameters is a common pattern in React, especially when working with props or state. This covers the basics of object destructuring. Now I will focus on array restructuring.

Now, on the screen instead of a user object, I now have a user array. The information is the same as before, the first element of the array contains the full name, and the second element of the array contains the email address. To destructure this, on the following line I will begin by typing const square brackets, full name, then comma, email address equals user. Now, because this is an array and not an object, there are no property names to unpack. So there is no basic assignment.

What is happening here is that I have declared full name as the first element in the destructuring expression. The assignment of values matches index order in array destructuring. Full name will be automatically assigned the value of the first element of the user array. And because email address is the second element in the destructuring assignment, it will also be assigned the value of the second element of the user array. Now, on the following line, I will console log full name and email address. And in the console to the right, we can see the full name and the email address.

Next, just like object destructuring, I can implement array destructuring in function parameters. And it is a little easier in this scenario because there is no basic assignment. In the user function, I only have two parameters. And because this array has two elements, I'm gonna simply wrap square brackets around these two parameters, name and email. I will call the function below passing through the user array as an argument. And in the console to the right is the unpacked values as part of the functions console log message.

Now, there is a pitfall when using array destructuring. When working with object destructuring, you simply unpack the properties that you wish to use. Earlier in the video, I discussed how array destructuring lines up on a index versus index spaces. What if I had another element in between the full name and the email address? To demonstrate what will happen, I'm gonna add a phone number in that element between these two other elements.

Now I wanna execute the function again, and instead of an email address, I now have that phone number. In order to skip unwanted values that are between one element and another that you wish to unpack, the destructuring assignment needs to be an empty space. So after name in the parameters, I'm gonna add a comma after that initial comma to represent that empty space. This is also for array destructuring when it's not being used for function parameters. If you need to skip a value in the array for destructuring purposes, assign that index an empty space. I will execute this function again and the email address is in its intended location. So this works.

Thanks for watching at Cloud Academy.