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.