Let's look at a couple more examples of when you would actually use destructuring in the real world. Destrucuring is not just when you want to grab variables out of an object or out of an array - it has a few other uses too!
I'm building an application for a wrestling application. In wrestling, they are tag teaming. I don't really know that much about wrestling, but I know that there's one guy in the ring and one guy on the side!
Let's create two new variables. It will become obvious why I choose let over const here in a second.
let inRing = "Hulk Hogan";
let onSide = "The Rock";I'm not sure if these guys ever wrestled together, but it seems feasible. They need to tag team each other. Right?
What happens when you need to switch? The Rock is going in the ring and the Hulkster is going on the side.
How did you swap two variables before destructuring?
If you use inRing = onSide, now inRing is The Rock, but then also onSide is also The Rock and we've lost the Hulkster altogether! Shit!
How do we get around that? The way we used to be able to do it is we would make a temp variable.
var temp = inRing;
inRing = onSide;
onSide = temp;They're totally switched now, and then you would delete your actual temp variable. That's really hard to follow. That's hard to look at, especially someone coming after six months of not working on this code, trying to understand what's going on.
With JavaScript destructuring, we can just swap them. We make use of an array here:
console.log(inRing, onSide); // Hulk, Rock
[inRing, onSide] = [onSide, inRing];
console.log(inRing, onSide); // Rock, HulkWhat!? The above code creates an array of [onSide, inRing] and immediately destructures them into the opposite variables.
Now you see why I use let instead of const here, because we're actually updating the values of these variables.
Handy! Put that in your JavaScript tool belt because you'll need to sooner than later!