# Destructuring in JavaScript: Write Cleaner and Smarter Code

Modern JavaScript gives us powerful tools to write cleaner and more readable code—and **destructuring** is one of the most useful among them.

## What Does Destructuring Mean?

**Destructuring** is a way to extract values from arrays or objects and assign them to variables in a cleaner, shorter way.

Instead of accessing values one by one, you can unpack them in a single line.

## Destructuring Arrays

### Before (Without Destructuring)

```plaintext
const arr = [10, 20, 30];

const a = arr[0];
const b = arr[1];
const c = arr[2];
```

### After (With Destructuring)

```plaintext
const arr = [10, 20, 30];

const [a, b, c] = arr;
```

Cleaner  
Less repetitive code

### Skipping Values

```plaintext
const arr = [10, 20, 30];

const [a, , c] = arr; // skips 20
```

## Destructuring Objects

### Before (Without Destructuring)

```plaintext
const user = {
  name: "Rahul",
  age: 25
};

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

### After (With Destructuring)

```plaintext
const user = {
  name: "Rahul",
  age: 25
};
const { name, age } = user;
```

### Renaming Variables

```plaintext
const { name: userName, age: userAge } = user;
```

## Default Values

Sometimes values might be missing—default values help avoid `undefined`.

### Example:

```plaintext
const user = {
  name: "Rahul"
};

const { name, age = 18 } = user;

console.log(age); // 18
```

Prevents errors  
Makes code safer

## Benefits of Destructuring

### 1\. Reduces Repetitive Code

```plaintext
// Without destructuring
const title = post.title;
const author = post.author;

// With destructuring
const { title, author } = post;
```

### 2\. Improves Readability

Cleaner code is easier to understand and maintain.

### 3\. Makes Function Parameters Cleaner

```plaintext
function printUser({ name, age }) {
  console.log(name, age);
}
```

Instead of:

```plaintext
function printUser(user) {
  console.log(user.name, user.age);
}
```

## Small Object Example (Real Use Case)

```plaintext
const product = {
  id: 1,
  title: "Laptop",
  price: 50000
};

// Before
const title = product.title;

// After
const { title } = product;
```

## Before vs After Comparison

### Without Destructuring

```plaintext
const user = {
  name: "Amit",
  city: "Delhi"
};

const name = user.name;
const city = user.city;
```

### With Destructuring

```plaintext
const { name, city } = user;
```

## Final Thoughts

Destructuring is a small feature with a big impact. Once you start using it, your code becomes more concise, readable, and professional.

If you're preparing for interviews or writing production code, mastering destructuring is a must-have skill.