ES6 Destructuring

Destructuring assignment allows the assignment/extract several variables at once. It helps extract values from Object or Arrays, where the l-value at its leaves will receive the extracted value from the assigned value.

1. Destructuring Object.

Here the right hand side will contain the object and the left hand side will contain the destructuring expression let’s see it.

//In ES5
var date = {year : 2016, month : "MAY", day : 25};
var year = obj.year;
var month = obj.month;
var day = obj.day;
console.log(year, month, day); // 2016 May 16

//In ES6 implementation 
let {year, month, day} = date;  // (A) 
console.log(year, month, day); // 2016 May 16

//In ES6 implementation 
let {year : y, month : m, day : d} = date; // (B) 
console.log(y, m, d); // 2016 May 16

Code language: JavaScript (javascript)

Here the “year”, “month”, “day” will be extracted from the corresponding values from the object “date” and automatically three variables will be created as defined in line (A).

We can extract the value of “year” and can store in the variable “y” as described in line (B).

2. Destructuring Array.

Same destructuring is also applicable for arrays, Here it depends on the basis of index. Let extract year, month, date from a date string by splitting into array in both ECMA5 and ECMA6

//IN ES5
var dateString = "2016-06-06";
var dateSplitArray = dateString.split("-"); // ["2016", "06", "06"];
var year = dateSplitArray[0];
var month = dateSplitArray[1];
var date = dateSplitArray[2];
console.log(year, month, date); // 2016 06 06

//IN ES6
let dateString = "2016-06-06";
let [year, month, date] = dateString.split("-");
console.log(year, month, date); // 2016 06 06

Code language: JavaScript (javascript)

Here “year” points to the 0th index, month points to 1st index and date points to the 2nd index of the splitted dateString array. Now see how we can skip some indexes in array implementation and “Rest operator” (…) to grab subarray from this index to the end of the array;

// Elision, To skip the array holes
let [,,, a, b, c] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // a = 4, b = 5, c = 6

// Implementation of rest operator (...)
let [a, ...b] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // a = 1, b = [2, 3, 4, 5, 6, 7, 8, 9]

Code language: JavaScript (javascript)

3. Assigning Default value.

While destructuring if value at particular index (Array Destructuring) or value for a particular attribute (Object destructuring) is not available then it will result undefined, but in ECMA6 providing way to add default values while destructuring.

// Without assigning default values to Object Destructuring
let {year, month, day} = {}; // year = undefined, month = undefined, day = undefined
let {year, month, day} = {year : 2016}; // year = 2016, month = undefined, day = undefined
let {year, month, day} = {year : 2016, month : 6}; // year = 2016, month = 6, day = undefined
let {year, month, day} = {year : 2016, month : 6, day : 6}; // year = 2016, month = 6, day = 6

// Assigning Default values to Object Destructuring
let {year : year = 2016, month : month = 1, day : day = 1} = {}; // year = 2016, month = 1, day = 1
let {year : year = 2016, month : month = 1, day : day = 1} = {year : 2016, month : 6}; // year = 2016, month = 6, day = 1
let {year : year = 2016, month : month = 1, day : day = 1} = {year : 2016, month : 6, day : 6}; // year = 2016, month = 6, day = 6

// Without assigning default values to Array Destructuring
let [year, month, day] = []; // year = undefined, month = undefined, day = undefined
let [year, month, day] = [2016]; // year = 2016, month = undefined, day = undefined
let [year, month, day] = [2016, 6]; // year = 2016, month = 6, day = undefined
let [year, month, day] = [2016, 6, 6]; // year = 2016, month = 6, day = 6

// Assigning Default values to Array Destructuring
let [year = 2016, month = 1, day = 1] = []; // year = 2016, month = 1, day = 1
let [year = 2016, month = 1, day = 1] = [2016, 6]; // year = 2016, month = 6, day = 1
let [year = 2016, month = 1, day = 1] = [2016, 6, 6]; // year = 2016, month = 6, day = 6

Code language: JavaScript (javascript)

Here we are assigning some static default values let see how we can assign some dynamic value. Which will be invoked at the run time. The method for the default value will be invoked if the value is undefined in the right hand side expression.

function getCurrentDateFragment(format){
    let date = new Date();
    if(format === "y"){
        return date.getFullYear();
    }
    else if(format === "m"){
        return date.getMonth();
    }
    else if(format === "d"){
         return date.getDate();
    }
}

let {year : year = getCurrentDateFragment("y"), month : month = getCurrentDateFragment("m"), day : day = getCurrentDateFragment("d")} = {}; // Object format
let [year = getCurrentDateFragment("y"), month = getCurrentDateFragment("m"), day = getCurrentDateFragment("d")] = []; // Array format

Code language: JavaScript (javascript)

4. Some examples.

• Swapping values without creating a new array, the engine will optimize the logic for us.
• Split array by using the rest operator.
• Check the mandatory field/attribures.

// Swapping array values
let a = 10, b = 20;
[b, a] = [a, b];


// implementation mandatory feature
function mandatory(name){
    throw new Error(name + " is required");
}

let {year : year = mandatory('year'), month : month = mandatory('month'), day : day =  mandatory('day')} = {year : 2016}; 
// Will throw error as month is required, as the default value of month will invoke the mandatory() function

Code language: JavaScript (javascript)