Object Destructuring

Destructuring meaning

• The process of unpacking a small part of something from the main part. By destructuring, it is possible to extract a specific part from the main body, so it can be modified easily as needed.

• we use object Destructuring for to extract properties from objects and bind them to variables

The basic syntax of object destructuring

const { identifier } = expression;

Where identifier is the name of the property to access and expression should evaluate to an object. After the destructuring, the variable identifier contains the property value.

Example

var object = {
   mentor: 'Rajitha',
   mentee: 'Shiri'};

var mentor  =  object.mentor;
var mentee = object.mentee;

console.log(mentor);     // => 'Rajitha',
console.log(mentee);    // => 'Shiri'

This is what you do for extracting values from an object writing object two times for getting values, Here you have created two new variables, mentor and mentee, and used dot notation for getting values from an object.

Here object.mentor is referring to Rajitha and that is assigning to name a new variable. And one object.mentee is referring to Shiri and it is assigned to mentee another new variable.

A neater code for that is rather than create new variables

var object = {
   mentor: 'Rajitha',
   mentee: 'Shiri'
 };

({mentor,mentee} = object);

console.log(mentor);     // => 'Priya',
console.log(mentee);    // => 'Sapna'

• Here is where the concept of destructuring the object introduced for, To write a neater and structured code like this and for removing the extra variables from the program.

• As you can see in the above example, the object from the Left hand side has the properties mentor and mentee with the values Rajitha and Shiri respectively. Note that you need to give the same property names in ({mentor,mentee} = object); , so that mentor’s value from object will store into mentor in curly braces and same for mentee. If you do not do so it will throw a reference error that the property name you have mentioned is not defined.

• ( ) why we are using the parenthesis around - ({mentor,mentee} = object); that may be a question to you is right. If I am not taking parenthesis it will give me an error as SyntaxError: Unexpected token '='.

• Why the error is coming is because when the code will see {} curly braces it will feel it as block code. That's why for avoiding this error we used () parenthesis.

You can extract properties from an object.

Without parenthesis you can do like also:

var names = {
   mentor: 'Rajitha',
   mentee: 'Shiri'};

const {mentor,mentee} = names;
console.log(mentor);      // => 'Rajitha',
console.log(mentee);     // => 'Shiri'

By putting const you are declaring them and you are destructuring (formatting the data in the structured manner)the mentor and mentee from the names object. It is important to maintain the data in the code by using less space and it helps to write the code neatly as well.

Some more Expressions

let a, b, rest;
[a, b] = [56, 9];

console.log(a);
// expected output: 56

console.log(b);
// expected output: 9

[a, b, ...rest] = [1, 2, 3, 4, 5];

console.log(rest);
// expected output: Array [3,4,5]

({ a, b } = { a: 12, b: 78 });
console.log(a);   // 12
console.log(b);   // 78

({a, b, ...rest} = {a: 12, b: 29, c: 66, d: 43});
console.log(a); // 12
console.log(b); // 29
console.log(rest);  /// {c: 66, d: 43}

Default values

A variable can be assigned a default, in the case that the value unpacked from the array is undefined.

let x, y;

[x=5, y=7] = [1];
console.log(a); // 1
console.log(b); // 7

Swapping variables

Two variables values can be swapped in one destructuring expression.

let var1 = 20;
let var2 = 80;

[var1, var2] = [b, a];
console.log(var1);   // 80
console.log(var2);   // 20

const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];
console.log(arr); // [1,3,2]

Parsing an array returned from a function

It's always been possible to return an array from a function. Destructuring can make working with an array return value more concise.

function func() {
  return [109, 902];
}

let a, b;
[a, b] = func();
console.log(a); // 109
console.log(b); // 902