Understanding Destructuring in JavaScript

What Destructuring means ?

Destructuring is another powerful and modern feature which is being used by the modern JavaScript developer for clean and clear syntax. It is widely being used for extracting the value from an array or property of an object and assign the value to a variable. It is to unpack the value instead of repetitive access like const firstName = person.firstName So, to avoid this repetitive task just unpaking the value and storing it to a new variable.

Array Destructuring

Array destructuring extracts elements from the array by it's position into a variable using square brackets [ ] . Here we have some values of rank stored in an array and in second line we have just created an array and assigned a variable so the every element of an array rank is being extracted by their position and assigned in a new elements of array.

const rank = [ "first", "second", "third"];
const ["one", "two", "three"] = rank;       // Here the value is being assigned to a new variables from the array by it's position

console.log(one);     //Output is first

Destructuring in Objects

For destructuring for an object we use curly braces to extract the exact property of an object not by the position.

const person = {
    firstName = "Ravi";
    lastName = "Paswan";
}

const { firstName, lastName } = person;

console.log(firstName)         // Output is Ravi ( Modern )
console.log(person.firstName); // Output is Ravi ( Old )

We can also rename a value

const person = {
    firstName = "Ravi";
    lastName = "Paswan";
}

const { firstName: name, lastName } = person;  // Modern

const person.name = person.firstName;        //Old 
delete person.firstName;                     //Old

console.log(name) // Output is Ravi

Here we have renamed the value of firstName to name by : this symbol. In old practices we were using two lines of code but in modern it is just done by ( : ) symbol and writing the new property name

Default Values

Sometimes the value we are trying to extract may not exist. In such case, destructuring allows us to assign a default value. It also ensures that the code doesn't break when data is missing.

In Objects

const user = {
 name: "Ankit" 
}; 

const { name, age = 18 } = user; 

console.log(age); // Output is 18.

In arrays

const numbers = [1];
const [a, b = 5] = numbers; 

console.log(b); // Output is 5.

Benefits of Destructuring

Destructuring is more easier and it also have a fancy syntax that is short and more readable too.

It makes the code readable and it has clean and clear syntax.
It can extract fast and extract multiple values in a single line instead of writing multiple statement.
It reduces the repetitive code writing into easier and single line code.
It is more manageable when we will be working with APIs and complex data structure.