Day-50 Understanding Destructuring in JavaScript

JavaScript is full of powerful features that make coding cleaner and more efficient. One such feature is destructuring.

What is Destructuring?

Destructuring is a syntax in JavaScript that lets you unpack values from arrays or extract properties from objects into distinct variables — all in a clean, readable way.

---

Array Destructuring

Let’s start with arrays.

Traditional way:

const colors = ['red', 'green', 'blue'];
const first = colors[0];
const second = colors[1];
console.log(first, second); // red green

With destructuring:

const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first, second); // red green

You can also skip elements:

const [ , , third] = colors;
console.log(third); // blue

---

Object Destructuring

Objects are even more common in real apps. Destructuring makes it easy to pull out properties.

Traditional way:

const user = { name: 'Alice', age: 25 };
const name = user.name;
const age = user.age;
console.log(name, age); // Alice 25

With destructuring:

const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25

---

Why Use Destructuring?

• Cleaner code
• Fewer lines
• More readable
• Useful in modern JavaScript frameworks and libraries