# Destructuring

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!