JavaScript often deals with objects and arrays. Extracting values from them used to require a lot of repetitive code.

Destructuring, introduced in ES6, provides a clean and readable way to unpack values from arrays and objects into variables.

In this tutorial, you’ll learn:

• what destructuring is

• array destructuring

• object destructuring

• default values

• renaming variables

• real-world use cases

Let’s start with the basics.

---

What Is Destructuring in JavaScript?

Destructuring is a syntax that allows you to:

• extract values from arrays or objects

• assign them to variables in a single line

Instead of accessing values one by one, you “unpack” them.

---

Why Use Destructuring?

Without destructuring:

const user = { name: "Alex", age: 25 };

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

With destructuring:

const { name, age } = user;

✔ Cleaner
✔ Less repetitive
✔ Easier to read

---

Array Destructuring

---

Basic Array Destructuring

const numbers = [10, 20, 30];

const [a, b, c] = numbers;

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

Values are assigned based on position.

---

Skipping Values

const [first, , third] = [1, 2, 3];

console.log(third); // 3

---

Default Values in Arrays

const [x = 5, y = 10] = [7];

console.log(x); // 7
console.log(y); // 10

---

Swapping Variables Using Destructuring

let a = 1;
let b = 2;

[a, b] = [b, a];

No temporary variable needed.

---

Object Destructuring

---

Basic Object Destructuring

const user = {
  name: "Alex",
  age: 25
};

const { name, age } = user;

Values are matched by property name, not order.

---

Renaming Variables

const { name: username } = user;

console.log(username);

---

Default Values in Objects

const { role = "user" } = user;

console.log(role);

---

Nested Object Destructuring

const person = {
  name: "Sam",
  address: {
    city: "Bangalore",
    zip: 560001
  }
};

const {
  address: { city }
} = person;

console.log(city);

---

Destructuring in Function Parameters

---

Object Destructuring in Functions

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

greet({ name: "Alex", age: 25 });

This avoids accessing properties inside the function.

---

Default Parameters with Destructuring

function createUser({ role = "user" } = {}) {
  console.log(role);
}

createUser();

---

Destructuring with Rest Operator

---

Array Rest Destructuring

const [first, ...rest] = [1, 2, 3, 4];

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

---

Object Rest Destructuring

const { name, ...details } = user;

console.log(details);

---

Common Mistakes

---

❌ Destructuring undefined

const { a } = undefined; // error

Always ensure the value exists.

---

❌ Name mismatch in object destructuring

const { username } = user; // undefined

Property names must match.

---

When Should You Use Destructuring?

✔ Extracting data from APIs
✔ React props
✔ Function parameters
✔ Cleaner code

Avoid overusing it if readability suffers.

---

Mental Model

Destructuring is like unpacking a box and labeling each item instantly.

---

Conclusion

Destructuring is a powerful ES6 feature that:

• reduces boilerplate

• improves clarity

• makes modern JavaScript expressive

Mastering destructuring will make your code cleaner and more professional.