# Destructuring in JavaScript.

## What destructring means.

### Problem :-

Before understanding destructuring, let's first look at the problem statement.

The problem is, you have an array or an object, and it contains multiple values. If you want to get a specific value from it, how will you do it? you might use a loop and go through every value just to get one value, which is not the correct or efficient way.

So, to solve this problem, we use destructuring.

### Solution:-

Destructuring means breaking out a specific value and using it in a very simple way. Now let's talk about what it actually is.

Basically, destructuring is applied to arrays and objects. As we know, arrays and objects contain multiple values, so destructuring helps us extract those values ​​and store them in variables. This way, whenever we need a value, we can directly use the variable instead of looping through the entire array or object to get it.

This is the basic overview.

In this, both objects and arrays can be destructured, and both have different ways to do it. Also, we can use destructuring with functions. For example, if a function returns an array, we can destructure that returned value at the time of calling the function and use it easily.

Don't worry, I will share code with you to show how it works step by step.

```javascript
// Basic Array destructuring 
const arr = [10, 20, 30];

const [a, b, c] = arr;

console.log(a);
console.log(b);
console.log(c);
```

In destructuring, when you destructure an array or object, you get the values, but if a value is not present, you can also set a default value for it. Below is code example.

```javascript
const obj = {
    name: "Nikhil"
}

const { name, age = 20 } = obj;

console.log(name);
console.log(age);
```

## Destructuring arrays.

*   So, array destructuring means we have values ​​in an array, and we want to extract each value from that array.
    
*   If we want to print each value or store them in variables, we can do this using destructuring. Then, whatever values ​​we get, we can store them in variables, as we saw in the above example.
    
*   Also, there can be many ways to destructure an array. For example, if you have multiple values ​​in an array but you only need the first two values ​​and not the rest, you can do that as well.
    
*   Below is a code example—you will understand it.
    
    ```javascript
    const arr = ["Nikhil", "Student", "BSC", 253089];
    
    const [name, role, ...rest] = arr;
    
    console.log(name);
    console.log(role);
    console.log(rest);
    ```
    

## Destructuring objects.

*   So, we use object destructuring a lot in the backend. For example, in parameters, the full body comes as an object, so we destructure it and treat each value like a separate variable. But yes, it is still JavaScript.
    
*   Object destructuring means that an object has properties, and it can have multiple properties. If we want to store each property in a variable, we use object destructuring, similar to arrays.
    
*   If we only need some specific values, we can do that as well. Let's look at a code example, it will be easier to understand.
    
*   ```javascript
    const obj = {
        name: "Nikhil",
        role: "Student",
        student: "Chai Code"
    }
    
    const {name, role, student, add = "developer"} = obj;
    
    console.log(name);
    console.log(role);
    console.log(student);
    console.log(add) // add new property.
    ```
    

## Default values.

*   So, default value means when we are destructuring an array or object, if a value is not present or it is undefined, null, or empty, then we can assign a default value at the place where we are destructuring it. Later, we can also overwrite that value.
    
*   So, we have both approaches—how to do it with objects and how to do it with arrays. The code examples for both are given below; you can check them.
    
*   ```javascript
    // Array Default Value..
    
    const arr = [1, 2, 4];
    
    const [a, b, c, d = 8] = arr;
    
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    ```
    
    ```javascript
    // Object Default Value..
    
    const obj = { name: "You", language: "JavaScript" };
    
    const {name, language, nickName = "Nikhil"} = obj;
    
    console.log(name);
    console.log(language);
    console.log(nickName);
    ```
    

## Benefits of destructuring.

1.  Destructuring in JavaScript makes code shorter and cleaner by extracting values directly from arrays and objects. It improves readability by reducing repetitive code like object.property. It helps in writing more maintainable code, especially when dealing with large data structure.
    
2.  Destructuring is very useful in function parameters, making it easier to access required values. It also supports default values, as you above see, which helps avoid errors when data is missing. Renaming variables during extraction .
    
3.  Array destructuring in JavaScript allows you to extract values ​​from an array and assign them to variables in a single line. . The order of variables matters because values ​​are assigned based on position. You can skip elements or assign default values ​​if some values ​​are missing. It is commonly used when working with functions that return arrays.
    

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">So with my above explanation i hope you understand what i learn and what's my thought process on Destructuring in JavaScript</div>
</div>