Destructuring Simple and Nested Objects in JavaScript

Instructor: [00:00] In this lesson, we'll take a look at simple and nested destructing techniques in JavaScript. I wanted to pause the video and take a look at this specific object, that is the laptop object, and then we'll get started.

[00:12] Now, I'll start with writing const, then I'll do the open and end curly braces. We'll leave it empty for now, and then say that is equal to Laptop. Now, whatever you write inside this will be taken from this specific object.

[00:30] That is, if you say you write make, then this specific make variable will be pulled out from this Laptop, that is, this one will be pulled out and will be made available for you in the context of this file. You can go ahead and write console.log and write make. If you run this file, we can see that you get Microsoft as the output.

[00:53] You can also pull out any variable from this. Let's say we want to pull out availability. Let's pull out availability. If we run this, you can see that you get the whole object.

[01:03] Now, it gets a bit interesting. Let's say only want to know the availability in US. You can actually do that. You have to write availability, and then you have to mock the kind of structure that you're following in the same data that you have. We'll write availability, colon, and then open curly braces. In here, we'll write USA.

[01:27] Now, let's do USA and then see the output. You can see that we have available true. Now there's quote here. As soon as you do this, you'll lose the power to get this variable. Let's say you're trying console.log(availability), it will throw an error that it is not available.

[01:47] The key takeaway here is that only the leaf notes of any structure we're destructing is available for further processing. There's no limit for the amount of nested destructing that you can do. Let's say we'd directly want to get to the available property in the USA object. We'll do a colon, and we'll do available, and then try to print it out.

[02:11] You can see that we get true. Let's just clear this. This is all fine. You can destructure objects but the question is, can you destructure arrays?

[02:19] It turns out that you can do that. Let's try that. Let's do configurations. First, let's try to print out configuration itself. We can see that we get the correct output that's needed. Let's try to destructure the first one out of this configurations.

[02:40] I'll do conf1, copied, and then see the result. You'll see that we get the exact result that is expected. You can go on keep on doing this. You can also do conf2 and conf3. They will be destructing fine. Take a look at the result. It is what we expect on the second array object.

[03:08] Let's say you're not interested in one of this object. You're only interested in the first one and the second one. You can do that by just removing it and just leaving a space, but you don't even need to leave a space. You can just leave a comma, and the conf3 will still be the third one.

[03:26] You run this, you can see that you get memory 32 on storage 2, which is exactly the third one. You can also remove conf1 and run again. You can see the output is still same.

[03:37] If you want to skip any of the objects, you can just simply write a comma and it will skip the object and move to the next one.

[03:46] It's not all a happy-happy situation -- various cases where this will break. Let's test one of them. Let's write a new variable called make and make it equal to anything. Let's say we are trying to destructure make, and then we'll try to log make.

[04:09] If you run this, it will fail. That is because here we already had the identifier make, but then in this statement, we are again trying to make another variable with the same name, make.

[04:23] Now, this is a conflict that will echo. The question is, can we rename it? Yes, we can do rename these objects, that is by simply putting a colon and then saying make_duplicate.

[04:39] We'll just copy this, paste this. Let's just clear this, and then run the file again. You can see that we get the output that we need.

[04:50] This will not only just work for the simple objects, we can also try it for nested objects. Let's go availability, and then USA, and then available. You can name it USA_avail, and then log it. You can see that the output is still there and you can use the rename version of it.