ES6 in Action: Destructuring Assignment
Destructuring assignment sounds complex. It reminds me of object-oriented terms such as encapsulation and polymorphism. I’m convinced they were chosen to make simple concepts appear more sophisticated!
In essence, ECMAScript 6 (ES2015) destructuring assignment allows you to extract individual items from arrays or objects and place them into variables using a shorthand syntax. Those coming from PHP may have encountered the list() function, which extracts arrays into variables in one operation. ES6 takes it to another level.
Presume we have an array:
const myArray = ['a', 'b', 'c'];
We can extract these values by index in ES5:
var
one = myArray[0],
two = myArray[1],
three = myArray[2];
// one = 'a', two = 'b', three = 'c'
ES6 destructuring permits a simpler and less error-prone alternative:
const [one, two, three] = myArray;
// one = 'a', two = 'b', three = 'c'
You can ignore certain values, e.g.
const [one, , three] = myArray;
// one = 'a', three = 'c'
or use the rest operator (...) to extract remaining elements:
const [one, ...two] = myArray;
// one = 'a', two = ['b, 'c']
Destructuring also works on objects, e.g.
var myObject = {
one: 'a',
two: 'b',
three: 'c'
};
// ES5 example
var
one = myObject.one,
two = myObject.two,
three = myObject.three;
// one = 'a', two = 'b', three = 'c'
// ES6 destructuring example
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'
In this example, the variable names one, two and three matched the object property names. We can also assign properties to variables with any name, e.g.
const myObject = {
one: 'a',
two: 'b',
three: 'c'
};
// ES6 destructuring example
const {one: first, two: second, three: third} = myObject;
// first = 'a', second = 'b', third = 'c'
More complex nested objects can also be referenced, e.g.
const meta = {
title: 'Destructuring Assignment',
authors: [
{
firstname: 'Craig',
lastname: 'Buckler'
}
],
publisher: {
name: 'SitePoint',
url: 'http://www.sitepoint.com/'
}
};
var {
title: doc,
authors: [{ firstname: name }],
publisher: { url: web }
} = meta;
/*
doc = 'Destructuring Assignment'
name = 'Craig'
web = 'http://www.sitepoint.com/'
*/
This appears a little complicated but remember that in all destructuring assignments:
- the left-hand side of the assignment is the destructuring target — the pattern which defines the variables being assigned
- the right-hand side of the assignment is the destructuring source — the array or object which holds the data being extracted.
There are a number of other caveats. First, you can’t start a statement with a curly brace, because it looks like a code block, e.g.
// THIS FAILS
{ a, b, c } = myObject;
You must either declare the variables, e.g.
// THIS WORKS
const { a, b, c } = myObject;
or use parentheses if variables are already declared, e.g.
// THIS WORKS
({ a, b, c } = myObject);
You should also be wary of mixing declared and undeclared variables, e.g.
// THIS FAILS
let a;
let { a, b, c } = myObject;
// THIS WORKS
let a, b, c;
({ a, b, c } = myObject);
That’s the basics of destructuring. So when would it be useful? I’m glad you asked …
Continue reading %ES6 in Action: Destructuring Assignment%
LEAVE A REPLY
You must be logged in to post a comment.