# Destructuring in JavaScript

In JavaScript, working with arrays and objects often involves extracting values. Traditionally, this required repetitive code.

**Destructuring** solves this problem by allowing you to **unpack values from arrays or objects into variables in a clean and concise way**.

* * *

## 🔹 What is Destructuring?

👉 **Destructuring = breaking down complex data structures (arrays/objects) into smaller variables**

Instead of accessing values one by one, you can extract them in a single line.

* * *

## 🔹 Before vs After Destructuring

### ❌ Without Destructuring

```js
const user = {
  name: "Sayantan",
  age: 21
};

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

* * *

### ✅ With Destructuring

```js
const user = {
  name: "Sayantan",
  age: 21
};

const { name, age } = user;
```

✔ Less code ✔ Cleaner ✔ More readable

* * *

## 🔹 Destructuring Arrays

Array destructuring is based on **position (index)**.

### 📌 Example

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

const [a, b, c] = arr;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
```

* * *

### 🔹 Skipping Values

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

const [first, , third] = arr;

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

* * *

### 🔹 Using Rest Operator

```js
const arr = [1, 2, 3, 4];

const [first, ...rest] = arr;

console.log(first); // 1
console.log(rest);  // [2, 3, 4]
```

* * *

## 🔹 Destructuring Objects

Object destructuring is based on **property names**, not position.

### 📌 Example

```js
const user = {
  name: "Sayantan",
  age: 21,
  city: "Kolkata"
};

const { name, age } = user;

console.log(name); // Sayantan
console.log(age);  // 21
```

* * *

### 🔹 Renaming Variables

```js
const user = {
  name: "Sayantan"
};

const { name: userName } = user;

console.log(userName); // Sayantan
```

* * *

### 🔹 Nested Destructuring

```js
const user = {
  name: "Sayantan",
  address: {
    city: "Kolkata"
  }
};

const {
  address: { city }
} = user;

console.log(city); // Kolkata
```

* * *

## 🔹 Default Values

If a value is missing, you can assign a default.

```js
const user = {
  name: "Sayantan"
};

const { name, age = 18 } = user;

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

* * *

## 🔹 Destructuring in Function Parameters

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

greet({ name: "Sayantan", age: 21 });
```

✔ Very common in real-world code (especially React)

* * *

## 🔹 Benefits of Destructuring

### ✅ 1. Reduces Repetitive Code

```js
// Without
const name = user.name;
const age = user.age;

// With
const { name, age } = user;
```

* * *

### ✅ 2. Improves Readability

Cleaner and easier to understand structure.

* * *

### ✅ 3. Makes Code More Expressive

You clearly see what data is being used.

* * *

### ✅ 4. Useful in Modern JavaScript

*   React props
    
*   API responses
    
*   Function arguments
    

* * *

## 🔹 Real-World Example

```js
const response = {
  data: {
    user: {
      name: "Sayantan",
      age: 21
    }
  }
};

const {
  data: {
    user: { name, age }
  }
} = response;

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

* * *

## ⚠️ Common Mistakes

### ❌ Wrong Variable Names

```js
const user = { name: "Sayantan" };

const { username } = user; // ❌ undefined
```

✔ Must match property name

* * *

### ❌ Accessing Nested Without Safety

```js
const user = {};

const {
  address: { city }
} = user; // ❌ error
```

✔ Use optional chaining or defaults

* * *

## 🧠 Mental Model

*   **Array destructuring → position-based**
    
*   **Object destructuring → key-based**