Destructuring Assignment

A JavaScript expressions that allows to unpack properties from objects, values from arrays into distinct variables.

Let's learn Array destructing with examples.

Assigning Default Values:-

In case the unpacked variable is undefined, a default value can be assigned to the variable.

//ECMAScript 5
var webAtomsList=  [ 10, 20 ];
var f= typeof webAtomsList[0] != "undefined" 
    ? webAtomsList[0] : 1;
var s= typeof webAtomsList[1] != "undefined" 
    ? webAtomsList[1] : 2;
var t= typeof webAtomsList[2] != 
    "undefined" ? webAtomsList[2] : 3;
var n= typeof webAtomsList[3] != 
    "undefined" ? webAtomsList[3] : undefined;
console.log(f === 10) //true
console.log(s === 20) //true
console.log(t === 3) //true
console.log(n) //undefined 

//ECMAScript 6
var webAtomsList= [ 10, 20 ];
var [ f = 1, s = 2, t = 3, n] = webAtomsList;
console.log(f === 10); //true
console.log(s === 20); //true
console.log(t === 3) ;//true
console.log(n); //undefined

Output (ECMAScript 5 & 6 is):

true
true
true
undefined 

Variable Swapping:-

The destructing assignment of ECMAScript 6, allows swapping two values in one destructuring expression.

var first = 1;
var second = 2;
var webAtoms =  [ 10, 20, 30 ];
[webAtoms[2], webAtoms[1]] = [webAtoms[1], webAtoms[2]] ;
console.log(webAtoms);

Output:

[10,30,20]

Without the destructuring assignment swapping values of two variable requires a temporary variable or some XOR-swap trick.

Variable Assignment:-

You can assign variable name to values.

var webAtoms =  [ 10, 20, 30 ];
var[ten,twenty,thirty] = webAtoms;
console.log(ten);
console.log(twenty);
console.log(thirty);

Output:

10
20
30

Assignment separate from declaration:-

A variable assignment can be done via destructuring, separate from the variable's declaration.

var first, second;

[first,second] = [10,20];
console.log(first); 
console.log(second); 

Output:

10
20

Parsing an array returned from a function:-

function webAtoms() {
    return [10,20];
}

var first,second;
[first,second] = webAtoms();
console.log(first); 
console.log(second); 

Output:

10
20

What if you want to ignore some or all the returned values? Here is how you can do it:-

function webAtoms() {
    return [10,20,30];
}

const [temp,,last] = webAtoms();
console.log(temp);
console.log(last); 

Output:

10
30

Assign the rest of an array to a variable using spread operator:-

var first,second;
[first,second,...rest] = [10,20,30,40,50];
console.log(first);
console.log(second);
console.log(rest);

Output:

10
20
[30,40,50]

Unpacking values form a regular expression match:-

The regular exec() method finds a match and returns and array containing

• The entire matched portion of the string
• followed by the string that matches each parentheses group in the regex.

Destructuring comes handy, if you need to unpack the parts of array ignoring the full match if it is not needed.

function parseDate(input) {
  var parsedOutput = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/
  .exec(input);;
  if (!parsedOutput) {
    return false;
  }
console.log(parsedOutput); //["2999-12-31", "2999", "12", "31", index: 0, input: "2999-12-31", groups: undefined]


  const [, year, month, day] = parsedOutput;
  return year;
}

console.log(parseDate('2999-12-31')); //2999

Output:

["2999-12-31", "2999", "12", "31"]
2999

Array and Object Destructuring:-

You can even combine the array and object destructuring. Lets learn it with an example.

var user = [
{id: 1, name: 'Web', programming: 'Phython'},
{id: 2, name: 'Atoms', programming: 'Xamarin.Forms'},
{id: 3, name: 'WebAtoms', programming: 'JavaScript'}
];

var[,,{programming}] = user; //Get 3rd element and skip the other 2
console.log(programming); //JavaScript

Output:

JavaScript

Hope you learnt something new today!