Practical ES6

Chapter 9: Destructuring Assignment

by Craig Buckler

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:

var myArray = ['a', 'b', 'c'];

We can extract these values by index in ES5:

var one = myArray[0], two = myArray[1], three = myArray[2]; // one ...