Introduction

In this blog, we will learn about What and How to use destructure assignment in arrays and objects.

Destructuring Assignment

ES6 provides a new syntax destructuring assignment, which allows us to unpack the values from arrays or properties from objects and store them in distinct variables.

Array Destructuring

Let’s assume, that you have an array of elements and you need to store the values of the first two elements into a distinct variable.

const arr = [1 ,  2 , 3 , 4 , 5];

let firstValue = arr[0];

let secondValue = arr[1];

This is how you will be doing without destructuring assignment. But destructuring assignment would make the process a piece of cake in a single line of code.

Here is how you do it using destructuring assignment:

const arr = [1 ,  2 , 3 , 4 , 5];

let [firstValue , secondValue] = arr;

//firstValue = 1 , secondValue = 2

What if we want to store the remaining elements in a separate variable?

It is also possible by using a special operator in javascript called rest operator.

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.

const arr = [1 ,  2 , 3 , 4 , 5];

let [firstValue , secondValue , ...rest] = arr;

//firstValue = 1 , secondValue = 2 , rest = [ 3, 4,5]

Okay, That's cool! 🤯

What if we only want the third element (or) a particular element by skipping a few prior elements from an array?

const arr = [1 ,  2 , 3 , 4 , 5];

let [ ,  , thirdValue] = arr;

//thirdValue = 3

By using comma, we can ignore the prior elements.

What if we are unsure about the values and we need to assign default values if the value is not defined?

const arr = [1 ,  2 ];

let [ ,  , thirdValue] = arr;

//Since there are only two elements in the array, the value of thirdValue would be undefined.
console.log(thirdValue) // undefined

We can prevent this by assigning a default value to the variable.

const arr = [1 ,  2 ];

let [ ,  , thirdValue = 3] = arr;

console.log(thirdValue) // 3

Object Destructuring

Destructuring can also be used with objects. We can unpack the properties of the objects to a distinct variable.

Let's assume a sample object and try to extract properties from it.

const obj = { name : "Devananth", role : "Frontend Developer" }

const {name} = obj;

console.log(name) // Devananth

This is how you extract only the required properties from an object.

What if you want to have a different variable name other than the object property?

const obj = { name : "Devananth", role : "Frontend Developer" }

const {name : userName} = obj;

console.log(userName) // Devananth

In the above example, the object property name is retrieved from the obj and assigned to a local variable userName.

What if we need to assign a default value?

Assigning a default value while unpacking the values is also possible.

const obj = { name : "Devananth"}

const {name : userName , age = 21 , role : profession = "Web Developer"} = obj;

console.log(userName , age , profession) // Devananth 21 Web Developer

//If you don't provide default values, it would remain undefined.

What if we need to extract a property of a nested object?

Consider this example

const user = {
  name : "Devananth",
  education: {
         school : "85%",
         college : "95%",  
    }
 }

Now, we need to unpack the property college which is nested inside.

const user = {
  name : "Devananth",
  education: {
         school : "85%",
         college : "95%",  
    }
 }

const { education : {college }} = user;
console.log(college);

//we can even assign a different name
const { education : {college : collegeMarks }} = user;
console.log(collegeMarks)

Conclusion

I hope you have learned about destructing assignment from this blog. Destructuring assignment can be used to improve the code readability.

If you have any queries, post them in the comments.