# Destructuring in JavaScript

# What Destructuring Means?

Destructuring is a syntax that lets you **unpack values** from arrays or objects into separate variables.

Instead of writing:

```javascript
const user = { name: "Krish", age: 20 };
const name = user.name;
const age = user.age;
```

You can write:

```javascript
const { name, age } = user;
```

This reduces boilerplate and improves readability.

# Destructuring Arrays

In arrays, destructuring is based on **position (index)**.

### Example:

```javascript
const numbers = [10, 20, 30];

const [a, b, c] = numbers;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
```

### Skipping values:

```javascript
const [first, , third] = numbers;

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

### Using rest operator:

```javascript
const [head, ...rest] = numbers;

console.log(head); // 10
console.log(rest); // [20, 30]
```

# Destructuring Objects

Object destructuring is based on **property names**, not position.

### Example:

```javascript
const user = {
  name: "Krish",
  age: 20,
  city: "Mumbai"
};

const { name, age } = user;

console.log(name); // Krish
console.log(age); // 20
```

## Default Values

Destructuring allows setting **default values** if a property does not exist.

### Example:

```javascript
const user = { name: "Krish" };

const { name, age = 18 } = user;

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

### In arrays:

```javascript
const numbers = [10];

const [a, b = 20] = numbers;

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

# Benefits of Destructuring

1.  Cleaner Code
    
2.  Better Readability
    
3.  Easier Function Parameters
    
    ```javascript
    function greet({ name, age }) {
      console.log(`Hello ${name}, age ${age}`);
    }
    ```
    
4.  Supports Defaults and Flexibility