ECMAScript 6 Succinctly®
CHAPTER 7
Destructuring Assignment
The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.
Array matching
Array matching comes in very handy when you simply want to pull the values out of the array and use them as stand-alone variables. Let’s look at the following example:
Code Listing: 99
let [a, , b] = [1,2,3]; console.log("a:", a, "b:", b); |
We now have two variables, a and b, that hold the values 1 and 3, respectively. Notice also that the array matching needs to be of the same length or structure as the original array. Here is the output from the preceding code:
Code Listing: 100
a: 1 b: 3 |
Object matching, shorthand notation
With what we know about array matching, let’s try our hand at object matching. Consider the following example:
Code Listing: 101
var {foo, bar} = {foo: 'lorem', bar: 'ipsum', choo: 'uhoh'}; console.log("foo:", foo, "bar:", bar); |
As you can see, we are grabbing the properties foo and bar from the object literal and creating new variables from them. This is very nice and keeps things clean. It is also nice that you can pick whichever property you want and ignore the ones you don’t care about. Here is the output from the preceding code:
Code Listing: 102
foo: lorem bar: ipsum |
Object matching, deep matching
Let’s go a bit further and see how we can apply this to more complex objects. Consider the following example:
Code Listing: 103
let cust = { name: "Acme Corp.", address: { street: "1001 Oak Drive", city: "Summerville", state: "OR", zip: "97123" } }; let {address: {city: city}, address: {state: state}} = cust; console.log("City:", city, "\nState:", state); |
This is a little more work to pull out the exact properties that you want, but it can come in very handy when you know exactly what you want to pull out into a separate variable. Here is the output from the preceding code:
Code Listing: 104
City: Summerville State: OR |
Object matching, parameter context
With our understanding of array and object matching, let’s apply what we’ve learned toward function parameters. Consider the following example:
Code Listing: 105
function f ([ name, val ]) { console.log(name, val); } function g ({ name: n, val: v }) { console.log(n, v); } function h ({ name, val }) { console.log(name, val); } f([ "bar", 42 ]); g({ name: "foo", val: 7 }); h({ name: "bar", val: 42 }); |
As you can see from the preceding functions, we are using the same pattern but this time for parameters for a given function. The first function expects an array as input with a length of two. It extracts those two values as individual parameter variables. The next function defines an object literal with the values for the given properties to be extracted when called. Finally, the last function is the same as the previous function but simply uses the shorthand notation. As you can see, it is possible to make some pretty interesting assignments with very little code now.
Here is the output from the three functions:
Code Listing: 106
bar 42 foo 7 bar 42 |
Fail-soft destructuring
Fail-soft destructuring allows us to continue to do the same things that we have been doing up until now but also provides optional default values. Consider the following example:
Code Listing: 107
let list = [ 7, 42 ]; let [a = 1, b = 2, c = 3, d] = list; console.log("a:", a, "\nb:", b, "\nc:", c, "\nd:", d); |
You can see that we can now optionally provide default values when trying to pull the values from the list. Let’s look at the output from the preceding code:
Code Listing: 108
a: 7 b: 42 c: 3 d: undefined |
We can observe that if the value was available from the list, it was provided; otherwise, we saw our default value or undefined.
- 1800+ high-performance UI components.
- Includes popular controls such as Grid, Chart, Scheduler, and more.
- 24x5 unlimited support by developers.