Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

7.1 Destructuring Assignments

JavaScript has built-in support for destructuring arrays and objects into individual variables during assignment. This is a real time-saver. In this lesson I’ll show you how to do this, as well as how to destructure parameters in function calls.

Syntax

  • [] = ...
  • {} = ...

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


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.

Back to the top