JavaScript Destructuring Explained with Example.

Javascript destructuring is a special syntax that was introduced in ES6. In this article, we will be discussing javascript destructuring, let’s get started.

What is Javascript Destructuring?

Javascript destructuring is a special syntax that allows assigning values from an object property or an array straight into a variable.

Related: Javascript Closures Explained

Example 1:

In this example, we will see how to write a code using javascript destructuring with a simple example.

const indgeek = ["technology","finance"];

const article1 = indgeek[1]
const article2 = indgeek[2]

In this code snippet, we have just assigned two values from an array into a variable without using javascript destructuring. Now we will write the same code using the javascript destructuring method.

// with destructuring
const indgeek = ["technology","finance"];


const [article1,article2] = indgeek; // used javascript destructuring

console.log(article1); // technology
console.log(article2); // finance

Here we write the same code but have used javascript destructuring instead of writing the first method.

Example 2:

In this example, we will work with an object. First, we will create an object and then assign values.

const YouTubeChannel = { // object 
    name: "indgeek",
    sub: 500,
    type: "technology"
}

const {name, sub, type} = YouTubeChannel; // assigning values into variable

console.log(name); // indgeek
console.log(sub); // 500
console.log(type);   // technology

In this example, we have assigned all values to different variables and then printed them.

const YouTubeChannel = {
    name: "indgeek",
    sub: 500,
    type: "technology"
}

const {name, ...other} = YouTubeChannel;

console.log(name); // indgeek
console.log(other); // { sub: 500, type: 'technology' }

For that example, we have assigned the name value of the object to the name variable and then assigned all the values to the other variable.

Example 3:

const YouTubeChannel = {
    name: "indgeek",
    sub: 500,
    type: "technology"
}

const {name:ytname, type:yttype, sub:ytsub} = YouTubeChannel;

console.log(ytname);  // indgeek
console.log(yttype); //500
console.log(ytsub); // technology

Here we changed the name of the variable and also change their position. To do that we specify all the variables with all values name.

Summing Up:

In this article, we have learned javascript destructuring with some examples. But if you want to learn more about javascript then subscribe here. I hope you like the post. If you do, please share it with your friend.