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

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

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

---

✅ With Destructuring

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

const arr = [10, 20, 30];

const [a, b, c] = arr;

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

---

🔹 Skipping Values

const arr = [10, 20, 30];

const [first, , third] = arr;

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

---

🔹 Using Rest Operator

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

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

const { name, age } = user;

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

---

🔹 Renaming Variables

const user = {
  name: "Sayantan"
};

const { name: userName } = user;

console.log(userName); // Sayantan

---

🔹 Nested Destructuring

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.

const user = {
  name: "Sayantan"
};

const { name, age = 18 } = user;

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

---

🔹 Destructuring in Function Parameters

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

// 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

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

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

console.log(name, age);

---

⚠️ Common Mistakes

❌ Wrong Variable Names

const user = { name: "Sayantan" };

const { username } = user; // ❌ undefined

✔ Must match property name

---

❌ Accessing Nested Without Safety

const user = {};

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

✔ Use optional chaining or defaults

---

🧠 Mental Model

• Array destructuring → position-based

• Object destructuring → key-based