7.1 Destructuring Assignments

Hi folks, in this lesson, we're going to look at destructuring assignment. Destructuring assignment is a way to extract values held within objects and arrays, and store them in variables using a literal syntax. It actually sounds much worse than it is, it's slightly complex, but it's not as complex as it sounds. The assignment expression that we use to extract data from an array or object is known as an object pattern, and matches data inside of the item being destructured. It still sounds quite scary, but it's not, believe me. Let's take a look at a basic example. So let's see the output first, and then we'll come back and talk over the code. So in this case, we create two variables, x and y. Those variables are wrapped in an array-like syntax. So the left part of the assignment expression, the result actually looks like an array, even though it isn't an array. The right side of the assignment is the array itself. And that array has two values, the string a and the string b. So, when we create the variables x and y, the first variable x gets the value a, and the second variable y gets the value b. And that happens because of how the variables in the left hand part of the expression are declared. So x is declared first, so that takes the first value from the array. y is declared second, so that takes the second value from the array. The array on the right hand side of the expression is the array that's being destructured. So this syntax is much more concise than if we were to declare the x and y variables separately. Destructuring assignment also works with objects. So let's talk through what happens. The left hand part of the assignment looks like the object that is being destructured. So it has the same curly brackets around it as if it were an object literal. It's not an object literal, we use the curly brackets because we're destructuring an object literal. The object literal is the right-hand part of the assignment expression. So this time we create two variables called a and b. When we're destructuring an object, like we are in this example, the variable names must match keys within the object that is being destructured. So variable a gets the value of the a property, and variable b gets the value of the b property from the object being destructured. So we don't have to destructure all of the values from the item being destructured. In this case, if we only wanted to get the b key, and we didn't care about the a key, we could do this instead. And that still works, it just completely ignores the property a inside the object being destructured. And that also works with arrays, by the way, as well, but it works in a slightly different way. Let's just go back and see how that works with arrays. So this time, if we try to do that, So we still get the first item from the array. And that's because we only specified one value in the left hand side. So if we weren't interested in the first item in the array and we just wanted to get the second, we would have to do this. So all we're doing is not declaring a variable for the first item in the array. We still use a comma and then the name of the second variable to get the second item in the array. What these examples tell us so far is that destructuring is fail soft. That means it won't throw errors when values don't exist. It just might not return the values that we were expecting, as we saw with the array example. One interesting aspect of destructuring is that we can use it to return multiple values from functions. Returning an array from a function is still really just returning a single object. It's just a single object that contains multiple values. With destructuring, however, we can return multiple arrays from a function. So from the function’s perspective, we’re still returning a single array. It’s just a multi-dimensional array, which contains other arrays. Destructuring is all about the assignment, however. So even though the function is returning one array, when we destructure it, we can destructure it as if it was returning two. So we can see that we've managed to extract the two individual arrays from within the multidimensional array returned by the function. So it's kind of cheating a bit, it's not actually a function that returns multiple values, because that would be a generator function. It is just a regular function, but it is as if the function was returning multiple values, so it's still kind of cool. We can also use destructuring with complex nested structures of arrays and objects. And this is where destructuring assignment does get a little bit scary. So that expression is a bit longer than previous expressions. And because we have an object on the right hand side, which itself contains objects, the left hand side of the assignment looks a little crazier than some of the previous examples. But let's just see the output in a browser. And we can see that the output is what we probably were expecting. Because we wanted to get the employment.status value, we still need to provide a variable for employment, even though we don't actually use that in the log statement. So we still need to specify employment to actually get the object within the employment property. And then we go ahead and get the status of that nested object, and that status then becomes a variable. So the more complex the object that we're trying to destructure is, the more complex the assignment in the left hand part of the expression will be. And these can get very, very complex indeed, if the object being destructured is very complex itself. So this feature is useful, and it can save us time and effort, but it can get very, very complex very quickly. So just be careful when you're using it. So in this lesson, we looked at destructuring assignments, which is a concise way to access data held within arrays or objects. We learned that the assignment is done using the same literal syntax on the left hand side of the expression that is used to define arrays and objects in the right hand side of the expression. This makes destructuring powerful, but in some ways, syntactically intuitive. Because we know how arrays and objects are structured, we know how destructuring an assignment works. In the next lesson, we're going to look at AJAX. Thanks for watching.