# Destructuring in JavaScript

## Introduction

When working with arrays and objects in JavaScript, we often need to extract values and assign them to variables.

Traditionally, this requires multiple lines of code.

To simplify this, JavaScript provides:

> **Destructuring**

Destructuring allows us to extract values from arrays and objects in a clean and concise way.

* * *

## What is Destructuring?

Destructuring means:

> Extracting values from arrays or objects and assigning them to variables in a single step.

* * *

## Destructuring Arrays

### Without Destructuring:

```javascript
const arr = [10, 20, 30];

const first = arr[0];
const second = arr[1];
```

* * *

### With Destructuring:

```javascript
const arr = [10, 20, 30];

const [first, second] = arr;

console.log(first);  // 10
console.log(second); // 20
```

* * *

## Skipping Values in Arrays

```javascript
const arr = [10, 20, 30];

const [first, , third] = arr;

console.log(first); // 10
console.log(third); // 30
```

* * *

## Destructuring Objects

### Without Destructuring:

```javascript
const user = {
  name: "Manoj",
  age: 22
};

const name = user.name;
const age = user.age;
```

* * *

### With Destructuring:

```javascript
const user = {
  name: "Manoj",
  age: 22
};

const { name, age } = user;

console.log(name); // Manoj
console.log(age);  // 22
```

* * *

## Renaming Variables

```javascript
const user = {
  name: "Manoj"
};

const { name: userName } = user;

console.log(userName);
```

* * *

## Default Values

If a value does not exist, we can assign a default value.

### Example:

```javascript
const user = {
  name: "Manoj"
};

const { name, age = 18 } = user;

console.log(age); // 18
```

* * *

## Destructuring in Function Parameters

```javascript
function greet({ name, age }) {
  console.log(`Hello ${name}, age ${age}`);
}

greet({ name: "Manoj", age: 22 });
```

* * *

## Benefits of Destructuring

### 1\. Cleaner Code

```javascript
// Without destructuring
const name = user.name;

// With destructuring
const { name } = user;
```

* * *

### 2\. Less Repetition

*   No need to repeatedly access object properties
    
*   Reduces boilerplate code
    

* * *

### 3\. Better Readability

*   Makes code easier to understand
    
*   Especially useful in large applications
    

* * *

## Visual Concept

### Object Destructuring

```text
{ name: "Manoj", age: 22 }
        ↓
 name → "Manoj"
 age  → 22
```

* * *

### Array Destructuring

```text
[10, 20, 30]
 ↓   ↓
10   20
```

* * *

## Common Mistakes

*   Using wrong variable names in object destructuring
    
*   Forgetting default values
    
*   Trying to destructure undefined values
    

* * *

## Interview Points

*   Destructuring extracts values from arrays and objects
    
*   Works with both arrays and objects
    
*   Supports default values and renaming
    
*   Improves readability and reduces code
    

* * *

## Conclusion

Destructuring is a powerful feature in JavaScript that:

*   Simplifies variable assignment
    
*   Reduces repetitive code
    
*   Improves readability
    

It is widely used in modern JavaScript and frameworks like React.

* * *