Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Ecma 1
  • Overview
  • Transcript

6.3 Destructuring Assignment

ES6 gives us new ways of destructuring arrays and objects into individual variables during assignment. In this lesson I'll show you how to do this, as well as how to destructure to individual parameters in function calls.

6.3 Destructuring Assignment

Hi folks. In this lesson we're gonna look at destructuring assignment. Destructuring assignment is a way to extract the values held within objects and array and store them in variables using a concise literal syntax. The assignment expression we used to extract data from an array or objects is know as objects pattern and matches data inside the item being destructured In this case we create two variables, x and y, and set their values to the individual items in the array without having to reference the items by their index. The left hand side of the assignment looks just like how we would declare an array literal with variables as items, and is much more concise than declaring the variables separately. We can do the same thing with objects, as well as arrays. This time we use curly brackets on the left hand part of the expression, the assignment, instead of square brackets. And that's just because we're destructuring an object instead of an array. When destructuring objects, the variable names on the left-hand side of the assignment need to match keys in the object being destructured. Otherwise the value will be undefined. What this tells us is that destructuring is fail soft, so it won't throw errors when values don't exist. One interesting aspect of the structuring is that we can use it to return multiple values from functions. Returning an array from a function is still returning just a single object. With the destructuring, we can actually return multiple arrays. From the functions perspective we're still returning a single multidimensional array. Destructuring is all about the assignment. We can receive multiple values from the function using destructuring Or we can use regular assignment without destructuring in the normal way. In the first case we're logging out to completely separate arrays. In the second case, we're logging out a single multi dimensional array as we would expect with regular ES5. We can also ignore particular values when destructuring And this is a good showcase of how Babel can help us prevent errors. When it compiles, if it detects an error, the compiling will fail and we'll see a message in the console like we do here. So, let's go back and just update the declaration of A. And let's try compiling that down once again. Ignoring particular values when destructuring isn't some black magic working behind the scenes. Once again, it's all about the assignment. We simply don't have a reference to the first item in the array being destructured and so, can't access it. We can even use the structuring on complex nested structures of arrays and objects. In this case we're destructuring an object that contains a nested object under the key employment. When we destructure the first two properties in the object, we do so in the same way as we did in the earlier examples. But when we destructure the nested argument, notice that we need to provide the key containing the nested objects, employment in this case, and then match the property we actually want to access, within curly braces. So in this lesson, we looked at the new destructuring assignment in ES6, which is a concise way to access the data held within arrays or objects. We learned that this assignment is done using the same literal syntax that is used to define arrays and objects in the first place. Making destructuring powerful yet syntatically intuitive. Thanks for watching.

Back to the top