Destructuring in ECMAScript 2015

Destructuring is a new feature in ECMAScript 2015. Destructuring allows binding a set of variables to a corresponding set of values (objects and arrays) anywhere we can bind a value to a single variable. Today we are already doing destructuring (extracting values) almost in every JavaScript program, but we do it manually. To understand destructuring in ECMAScript 2015 completely, let’s look at an example how are we doing destructuring today (pre ES2015).

Destructuring manually

We can destructure (extract values) from person object manually using dot notation or array notation.


var person = { name: 'Shravan', age: 27 };
var name = person.name;
var age = person.age;


We can destructure (extract values) from numbers array manually using indexes.


var numbers = [1, 2, 3, 4, 5];
var one = numbers[0];
var two = numbers[1];


We construct objects using {} (object literal syntax) and arrays using [] (array literal syntax), on the right hand side of assignment operation. We can use same syntax on left hand side of assignment operation for destructuring objects and arrays.

Read More