Destructuring assignment in Javascript

In this chapter, you will learn about the destructuring assignment in Javascript, what kind of data types can be destructured etc.

Destructuring assignment:
Destructuring assignment in es6 allows unpacking values from a nested variable into distinct variables. In simple words, it allows to

Unpack values from an array into distinct variables.
Unpack properties from an object into distinct variables

Unpack values from an array into distinct variables:
Now we will look into the section how to unpack values from an array into distinct variables. Now let us look at the syntax

Syntax:
const [ unpackValueOne, unpackValueTwo ] = array / object;
The left-hand side of the assignment to define what values to unpack from the sourced variable.

Array destructuring in Javascript:
In array destructuring, values can be unpacked with the help of open bracket and close bracket let’s write an example for the same. Assume we have a list of players score, who is playing a game, and we can unpack the values as follows

const gameScore = [59, 100, 90];

const [ player1, player2, player3 ] = gameScore;
console.log('Player 1 score : '+player1);
console.log('Player 2 score : '+player2);
console.log('Player 3 score : '+player3);

// Output
// Player 1 score : 59
// Player 2 score : 100
// Player 3 score : 90

Default values:
It is possible that some of the values may be missing from the source variable, in that case, we can assign the default values as follows. As we can see in the code snippet, the score for the player4 is not available in the variable gameScore, and we are assigning the default value 0.

const gameScore = [59, 100, 90];

const [ player1, player2, player3, player4=0 ] = gameScore;
console.log('Player 1 score : '+player1);
console.log('Player 2 score : '+player2);
console.log('Player 3 score : '+player3);
console.log('Player 4 score : '+player4);

// Output
// Player 1 score : 59
// Player 2 score : 100
// Player 3 score : 90
// Player 4 score : 0

With the help of destructuring, you can swap the two variables values:

let player1 = 50;
let player2 = 100;

[player1, player2] = [player2, player1];
console.log('Player 1 score : '+player1);
console.log('Player 2 score : '+player2);

// output
// Player 1 score : 100
// Player 2 score : 50

Now you may be thinking what is the use of destructuring, the destructuring assignment helps to unpack values from the variables which are returned by any functions, for example, let assume there is a function getScore and it returns the score of players,

const getScore = () => {
    return [59, 100, 90];
}

const [ player1, player2, player3, player4=0 ] = getScore();
console.log('Player 1 score : '+player1);
console.log('Player 2 score : '+player2);
console.log('Player 3 score : '+player3);
console.log('Player 4 score : '+player4);

// Output
// Player 1 score : 59
// Player 2 score : 100
// Player 3 score : 90
// Player 4 score : 0

Object destructuring:
In object destructuring, we can use the open and closed braces on the left side, let’s write an example for the same, As we can see in the above code snippet, we are extracting the personDetails object properties into distinct variables.

const personDetails = {
    name: 'John',
    email: 'John@john.com',
    mobile: 9999123
};

const { name, email, mobile } = personDetails;

console.log(name);
console.log(email);
console.log(mobile);

// output
// John
// John@john.com
// 9999123

Change properties name to new variables name:
In some cases, you may wish to change the variables names, for example,

const personDetails = {
    name: 'John',
    email: 'John@john.com',
    mobile: 9999123
};

const { name: personName, email: personEmail, mobile: personMobile } = personDetails;

console.log(personName);
console.log(personEmail);
console.log(personMobile);

// output
// John
// John@john.com
// 9999123