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:

const arr = [10, 20, 30];

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

---

With Destructuring:

const arr = [10, 20, 30];

const [first, second] = arr;

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

---

Skipping Values in Arrays

const arr = [10, 20, 30];

const [first, , third] = arr;

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

---

Destructuring Objects

Without Destructuring:

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

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

---

With Destructuring:

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

const { name, age } = user;

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

---

Renaming Variables

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:

const user = {
  name: "Manoj"
};

const { name, age = 18 } = user;

console.log(age); // 18

---

Destructuring in Function Parameters

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

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

---

Benefits of Destructuring

1. Cleaner Code

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

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

---

Array Destructuring

[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.

---