Destructuring in JavaScript

in JS destructuring is the most used concept that prevents repetitive code. I will cover each and everything about it, so be with me and complete this blog.

What is Destructuring?

Destructuring is a way to extract values from arrays or objects and store them in variables.

Instead of manually accessing the values one by one using the array or object, we extract the values and store them into a variable in one place, and later we use them.

Example:

const array = [10,20,30]
const [a,b,c] = array;

Destructuring Array

In the above example, I'm destructuring an array. Without the desctructuring this is how our code wil look like:

const a = array[0];
const b = array[1];
const c = array[2];  

Here, I'm repeating the array (variable name) and just tweaking the index to access the values. But with destructuring, I don't need to repeat it; I can extract the values in a single step.

const [a,b,c] = array;

// a = first index value
// b = second index value
// c = third index value

This is the same as the above code, but in a cleaner way because of destructuring.

But here's a question: what if I don't want to use a value? For example, if I don't want to use the first index value, how can I skip it?

Here is how you can skip values

const array = [10, 20, 30];

const [a, , c] = array;

console.log(a, c); // 10, 30

Now, you know how you can skip values. But if you accidentally define a variable, then you will get undefined if there is no value in that index.

const arr = [10, 20];
const [a,b,c] = arr; //c means 2nd index doesn't exist
console.log(a,b,c) // so you will get undefined

To prevent this undefined, you can give a default value in case you are not sure about the value.

Default values

const arr = [10, 20];

const [a, b, c = 30] = arr;

console.log(a, b, c); // 10 20 30

Destructuring Objects

Yes, you can also destruct the objects just like the array. In object destructuring, we use curly braces {}, and the variable name should exactly match the keys.

Without destructuring

const user = {
  name: "Rachit",
  age: 19
};

const name = user.name;
const age = user.age;

Here, I'm repeating the user (object name) to each place where I need to access the value.

But in destructuring, just extract the value and use them.

With destructuring

const user = {
  name: "Rachit",
  age: 19
};

const { name, age } = user;

the variable name should be same as the key otherwise you will get undefined.

Rename Variables

If the key is too long and you want to rename, then you can also do this using colon.

Example:

const user = {
  name: "Rachit",
};

const { name: username } = user;

console.log(username); // Rachit

Default values in Objects

In objects, we can also provide default values like in arrays. Just ensure that the variable name doesn't exist in the object as a key; otherwise, the value will be overridden.

const user = {
  name: "Rachit",
};

const { name, age = 18 } = user;

console.log(age); // 18

Benifits of Destructuring

1. Cleaner code

2. Better Readability

3. Faster Development