Javascript Destructuring

Destructuring allows you to extract individual values ​​from an object into variables or constants:

const user = {
    name: "Tom",
    age: 24
    phone: "+367438787",
    email: "tom@gmail.com"
};
let {name, email} = user;
console log(name); // Tom
console log(email); // tom@gmail.com

When destructuring an object, variables are placed in curly braces and the object is assigned to them. The mapping between object properties and variables/constants is by name.

We can specify that we want to get the object’s property values ​​into variables/consts with a different name:

const user = {
    name: "Tom",
    age: 24
    phone: "+367438787",
    email: "tom@gmail.com"
};
const {name: userName, email: mailAddress} = user;
console.log(userName); // Tom
console.log(mailAddress); // tom@gmail.com

In this case, the name property is mapped to the userName variable, and the email field is mapped to the email address variable.

You can also set default values ​​for variables/constants, if the object suddenly does not have the corresponding properties:

const user = {
    name: "Tom",
    age: 24
};
const {name = "Sam", email: mailAddress = "sam@gmail.com"} = user;
console log(name); // Tom
console.log(mailAddress); // sam@gmail.com

If a variable/constant during destructuring is mapped to a property that represents a complex object, then after destructuring this variable/constant will also represent a complex object:

let user = {
    name: "Tom",
    age: 24
    account: {
        login: "tom555",
        password: "qwerty"
    }
};
const {account} = user;
console.log(account.login); // tom555
console.log(account.password);      // qwerty

But if we want to get individual values ​​from a nested complex object, as in the example above, the account object inside the user object, then we don’t have to get this entire object – we can also provide separate variables / constants for its properties:

const user = {
    name: "Tom",
    age: 24,
    account: {
        login: "tom555",
        password: "qwerty"
    }
};
let {name, account: {login}} =  user;
console.log(name);      // Tom
console.log(login);     // tom555

Here we get the login value of the property into the variable user.account.login.

Retrieving the Remaining Properties of an Object Using the Rest Operator

The rest operator or operator … allows you to get the remaining properties of an object that are not mapped to variables/constants into a separate variable/constant:

const tom = {
    name: "Tom",
    age: 24,
    phone: "+367438787",
    email: "tom@gmail.com"
};
const {name, age, ...contacts} = tom;
console.log(name);      // Tom
console.log(age);       // 24
console.log(contacts);  // {phone: "+367438787", email: "tom@gmail.com"}

In this case, we decompose the object tom into three constants: name, age and contacts. The name and age constants are mapped to object properties tom boy name. And the constant contacts gets all the remaining unmapped properties of the object. However, to get them, the operator … : is specified before the name of the constant …contacts. That is, in this case, the constant contacts will offer an object that will contain the email and phone properties of the tom object.

It’s worth noting that a variable/constant that receives all the remaining properties of an object will always represent the object, even if it only receives one property from the object.

Array destructuring

You can also decompose arrays:

 
let users = ["Tom", "Sam", "Bob"];
let [a, b, c] = users;

console.log(a);     // Tom
console.log(b);     // Sam
console.log(c);     // Bob

When destructuring an array, variables are placed in square brackets and sequentially receive the values ​​of the array elements.

If there are fewer variables/constants than array elements, then the remaining array elements are simply omitted.

let users = ["Tom", "Sam", "Bob"];
let [a, b] = users;
 
console.log(a);     // Tom
console.log(b);     // Sam

If there are more variables/consts than array elements, then unmatched variables/consts get the value undefined:

let users = ["Tom", "Sam", "Bob"];
let [a, b, c, d] = users;
 
console.log(a);     // Tom
console.log(b);     // Sam
console.log(c);     // Bob
console.log(d);     // undefined

Getting the remaining elements of an array into another array

With the … operator , you can get all the remaining elements of an array as another array:

let users = ["Tom", "Sam", "Bob", "Mike"];
let [tom, ...others] = users;
 
console.log(tom);       // Tom
console.log(others);    // ["Sam", "Bob", "Mike"]

Here the array others will contain the last three elements of the array.

Skipping elements

At the same time, we can skip a number of array elements, leaving gaps instead of variable names:

let users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
let [first,,,,fifth] = users;

console.log(first);     // Tom
console.log(fifth);     // Alice

The expression first,,,,fifthspecifies that we want to get the first element of the array into the first variable, then skip three elements and get the fifth element into the fifth variable.

Similarly, you can get, for example, the second and fourth elements:

let users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
let [,second,,forth] = users;

console.log(second);        // Sam
console.log(forth);         // Ann

Destructuring objects from arrays

You can combine getting data from an array and an object:

let people = [
    {name: "Tom", age: 34},
    {name: "Bob", age: 23},
    {name: "Sam", age: 32}
];
let [,{name}] = people;

console.log(name);      // Bob

In this case, we get the value of the name property of the second object in the array.

Parameter destructuring

If an array or an object is passed to a function as a parameter, then it can also be decomposed into separate values ​​in a similar way:

function display({name:userName, age:userAge}){
    console.log(userName, userAge);
}
function sum([a, b, c]){
    const result = a + b + c;
    console.log(result);
}
let user = {name:"Alice", age:33, email: "alice@gmail.com"};

let numbers = [3, 5, 7, 8];

display(user);  // Alice 33
sum(numbers);   // 15

Value exchange

Thanks to destructuring, it became very easy to exchange values ​​between two variables:

let first = "Tom";
let second = "Bob";
[first, second] = [second, first];
 
console.log(first);     // Bob
console.log(second);    // Tom

This simplifies a number of tasks. For example, we use destructuring for the simplest sorting of an array:

let nums = [9, 3, 5, 2, 1, 4, 8, 6];
for(let i = 0; i < nums.length; i++)
    for(let j = 0; j < nums.length; j++)
        if (nums[i] < nums[j]) [nums[j], nums[i]] = [nums[i], nums[j]];
        
console.log(nums);  // [1, 2, 3, 4, 5, 6, 8, 9]