Destructuring in JavaScript

---

Introduction

When working with JavaScript, we often deal with arrays an object. And many times, we end up writing code just to access their values.
That's where destructuring comes in.

Destructuring is a simple and powerful feature that lets you unpack values from arrays or objects into variable - in a much cleaner way.

---

What Destructuring Means

In simple terms, destructuring is taking values out of an array or object and assigning them to variables in a short and readable way.

Instead of manually accessing each value, destructuring lets JavaScript do it for you.

---

Before vs After Destructuring

Let’s first understand the problem it solves.

Without Destructuring

const user = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

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

console.log(name, age, city);

Here, we are repeating user again and again.

With Destructuring

const user = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

const {name, age, city } = user;

console.log(name, age, city);

Much cleaner. Less repetition. Easier to read.

---

Destructuring Arrays

const colors = ["red", "green", "blue"];

const [first, second, third] = colors;

console.log(first);  // red
console.log(second); // green
console.log(third);  // blue

You can also skip values,

const numbers = [10, 20, 30];

const [first, , third] = numbers;

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

---

Destructuring Objects

Object destructuring is based on property names.

const product = {
  title: "Laptop",
  price: 50000
};

const { title, price } = product;

console.log(title); // Laptop
console.log(price); // 50000

You can also rename variables,

const { title: productName, price: cost } = product;

console.log(productName); // Laptop
console.log(cost); // 50000

---

Default Values

Sometimes a value might not exist. You can set a default.

const user = {
  name: "Elon"
};

const { name, age = 40 } = user;

console.log(name); // Elon
console.log(age);  // 40

If age is not present, it uses the default value.

---

Why Destructuring is Useful

1. Reduces Repetitive Code

Instead of writing:

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

You write:

const { name, age } = user;

---

2. Improves Readability

It becomes very clear what values you are extracting.

---

3. Works Great with Functions

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

greet({ name: "Elon", city: "New York" });

Cleaner function parameters.

---

4. Makes Code More Maintainable

Less repetition means fewer chances of mistakes.

---

Small Real-Life Example

Without destructuring:

function displayUser(user) {
  console.log(user.name);
  console.log(user.email);
}

With destructuring,

function displayUser({ name, email }) {
  console.log(name);
  console.log(email);
}

Less typing. Same result.

---

One Thing to Be Careful About

If you try to destructure something that is undefined or null, it will throw an error.

const { name } = undefined; // Error

So always make sure the value exists.

---