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

Using ECMAScript 2015 (ES2015/ES6) with Gulp

gulp-es2015

Follow the below steps to use ECMAScript 2015 (formerly known as ECMAScript 6) while writing gulp file.

Step 1:

From gulp 3.9 version onwards we can use ECMAScript 2015, so make sure you installed the latest version of gulp into your project.

Check the gulp version before proceeding, run the following command at root of the project to check the currently installed gulp version.

Read More