Javascript destructuring

Overview

Arrays and Objects are the heart of the javascript and we use it so much while programming. But still, even if we want only a few value or properties from either of them we have to call them entirely. In order to make this simple ES6 introduced destructuring in javascript.

According to the MDN—

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Object Destructuring.

Before ES6

In order to access the properties of objects we had to call them like this.

var person = {
     name: 'prashant yadav',
     age: 23,
     role: 'software engineer'
}

var name = person.name;
var age = person.age;
var role = person.role;
console.log(name, age, role);
// prashant yadav 23 software engineer

After ES6

Now we the destructuring we have much simple syntax to access the properties of objects.

Object destructuring uses object literals syntax { }

let person = {
     name: 'prashant yadav',
     age: 23,
     role: 'software engineer'
}

let {name, age} = person;
console.log(name, age);
//prashant yadav 23

let {name, age, role} = person;
console.log(name, age, role);
//prashant yadav 23 software engineer

let {name, role} = person;
console.log(name, role);
//prashant yadav software engineer

We can now access any property from the object and assign it to the variable, Here the variable name and the property name is same so we are just destructuring it.

let {role} = person; Removes the person.role and assign it the variable named role.

If we want to use a different variable name then we can do it like below.

let {name: fullName, age: completeAge, role: designation} = person;

console.log(fullName, completeAge, designation);
//prashant yadav 23 software engineer

let {name: fullName} pulls the person.name property and assign it to the fullname variable.

Default values can also be assigned to the variables.

let person = {
     name: 'prashant yadav',
     age: 23
}
let {name: fullName, age: completeAge, role: designation = 'Engineer'} = person;

console.log(fullName, completeAge, designation);
//prashant yadav 23 Engineer

Nested objects destructuring

We can also use the destructuring for nested objects.

let person = {
     name: 'prashant yadav',
     age: 23,
     address:{
        street: 'random',
        city: 'mumbai',
        pincode: 421209
     }
}

let {address: {street, city}} = person;
console.log(street, city);
// random mumbai

Custom variables with nested objects destructuring.

let {address: {street: completeStreet , city: completeCity}} = person;
console.log(completeStreet, completeCity);
// random mumbai

---

Array Destructuring

Before ES6

var arr = ['prashant', 23, 'engineer', 'javascript'];
var first = arr[0];
var second = arr[1];
console.log(first, second);
//prashant 23

After ES6

Array destructuring is similar to the object destructring but it uses array literals syntax [ ].

let arr = ['prashant', 23, 'engineer', 'javascript'];
let [first, second] = arr;
console.log(first, second);
//prashant 23

If you want to skip and access values at other positions then we can do so by keeping that position blank.

let [first,,third] = arr;
console.log(first, third);
//prashant engineer 

We have kept the second position blank.

We can also assign default values to the variables

let [,second,,fourth,fifth = 'default value'] = arr;
console.log(second, fourth, fifth);
//23 javascript default value

We can also use ... spread operator to copy all the remaining array values in any variable.

let [first, ...remaining] = arr;
console.log(first, remaining);
//prashant [23, 'engineer', 'javascript']

Nested Array Destructuring

It is also possible to do nested array destructuring.

let arr = ['prashant', 23, 'engineer', ['random', 'mumbai', 421209]];
let [first,,,[,city, zip, state='Maharashtra']] = arr;
console.log(first, city, zip, state);
//prashant mumbai 421209 Maharashtra

Swapping with Array destructuring

We can swap values very easily with an array destructuring.

let first = 1;
let second = 2;
console.log(first, second);
//1 2

//Swap
[first, second] = [second, first];

console.log(first, second);
//2 1

Cloning an array with destructuring

let arr = [2, 3, 5, 6];
let [ ...cloned ] = arr;
console.log(cloned);
//[2, 3, 5, 6]

---

Mixed destructuring in javascript

We can use Array and Object Destructuring simultaneously.

let person = {
     name: 'prashant yadav',
     age: 23,
     address:{
        street: 'random',
        city: 'mumbai',
        pincode: 421209
     },
    phone:[112124124124, 23124124124, 125151241212]
}

let {
   name,
   address: {street: streetAddress},
   phone:[first]
} = person;

console.log(name, streetAddress, first);
//prashant yadav random 112124124124

Destructuring with Functions

We can use destructuring with parameters passed to the functions.

let person = {
     name: 'prashant yadav',
     age: 23,
     address:{
        street: 'random',
        city: 'mumbai',
        pincode: 421209
     },
    phone:[112124124124, 23124124124, 125151241212]
}

let showDetails = ({name, age}) => {
  console.log(`${name} is ${age} years old`);
}

showDetails(person);
//prashant yadav is 23 years old