Let's try to understand Destructuring. In this blog, we will learn about javascript expression Destruturing in arrays and objects.

Prerequisites

This blog assumes that you are familiar with arrays and objects.

Introduction

In simple terms, destructuring is extracting data from arrays and objects and assigning them to variables. It was introduced in ES6. It makes it easy to unpack values from arrays and properties from objects into variables.

first, we will start with array Destructuring then we will learn about object destructuring. let's go.

Array Destructuring

Extracting data from an array is a simple task using destructuring. No need to use loops and indexes.

const colours = ["black", "blue", "white"];
const [black, blue, white] = colours;
console.log(black); //black
console.log(blue); //blue
console.log(white); //white

// we can also do like that

const [black, blue, white] = ["black", "blue", "white"];
console.log(black); //black
console.log(blue); //blue
console.log(white); //white

Note that here sequence of variables and elements of an array is matter, the first value goes to the first variable and the second will go to the second one and so on.

Want to skip some value

Now! if we want one first and last value so we will do that.

const [black, , white] =  ["black", "blue", "white"];
console.log(black); //black
console.log(white); //white

see here we have two commas that help to skip the values. So whenever you want to skip a value just use a comma.

using rest operator

If we want to assign some value to a variable and some to an array, we would do this.

const [black, ...rest] =  ["black", "blue", "white"];
console.log(black); //black
console.log(rest); //["blue", "white"]

here we are unpacking the rest values into a variable.

using default values

we can assign values to the variable if it is undefined

const [black, blue = "blue"] = ["black"];
console.log(black);  //black
console.log(blue); // blue

Because it is undefined, blue will have the value we assign it.

Let's begin with object destructuring.

Object Destruturing

Another simple task to do. In ES6, we can use a variable to get the value of an object's property.

let's see with an example:

const colours = { black: "black", blue: "blue", white: "white" };
const { black, blue, white } = colours;
console.log(black); //black
console.log(blue);  //blue
console.log(white); //white

using rest operator

We can use the rest operator to destruct objects just like we do with arrays.

const colours = { black: "black", blue: "blue", white: "white" };
const { black = "black", ...rest } = colours;
console.log(black);
console.log(rest);

The object's property is given a value, while the remaining properties are assigned to one variable.

using default values

We can also set default values, just like with arrays. if a variable is undefined, the default value will be extracted.

const colours = { black: "black" };
const { black = "black", blue = "blue" } = colours;
console.log(black); //black
console.log(blue); //blue

here, Because black has a value defined in an object, it will store that value, but blue does not, it will store a default value.

In functions

We can use it by giving the function parameters.

function colours({ black: one, blue: two } = {}) {
  console.log(one);
}
colours({ black: "black" });
colours();

here we have {}, We have here, which allows us to invoke a function without giving any argument.

Conclusion

Thank you for reading till the end. Let me know in the comments if you like the blog or if you have any suggestions!