# Mastering JavaScript Destructuring: Arrays, Objects & Defaults

JavaScript offers many modern features that make code cleaner and more readable. One of the most useful among them is **destructuring**.

In this article, we’ll break down what destructuring is, how it works with arrays and objects, and why developers love using it.

* * *

## What is Destructuring?

Destructuring is a way to **extract values from arrays or properties from objects and assign them to variables** in a concise way.

Instead of writing repetitive code to access values, destructuring lets you do it in one line.

### Without Destructuring

```js
const user = {
  name: "Vaibhav",
  age: 22
};

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

### With Destructuring

```js
const user = {
  name: "Vaibhav",
  age: 22
};

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

Cleaner and shorter, right?

* * *

## Destructuring Arrays

Array destructuring extracts values based on their **position (index)**.

### Example

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

const [first, second, third] = colors;

console.log(first);  // red
console.log(second); // green
```

### Skipping Values

```js
const [first, , third] = colors;

console.log(third); // blue
```

### Swapping Variables

```js
let a = 1;
let b = 2;

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

console.log(a, b); // 2, 1
```

* * *

## Destructuring Objects

Object destructuring extracts values based on **property names**.

### Example

```js
const user = {
  name: "Vaibhav",
  age: 22,
  city: "Dehradun"
};

const { name, age } = user;

console.log(name); // Vaibhav
```

### Renaming Variables

```js
const { name: userName } = user;

console.log(userName); // Vaibhav
```

### Nested Destructuring

```js
const user = {
  name: "Vaibhav",
  address: {
    city: "Dehradun"
  }
};

const { address: { city } } = user;

console.log(city); // Dehradun
```

* * *

## Default Values

Destructuring allows you to set default values if a property doesn’t exist.

### Example

```js
const user = {
  name: "Vaibhav"
};

const { name, age = 18 } = user;

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

This prevents `undefined` values and makes your code safer.

* * *

## Benefits of Destructuring

### 1\. Less Repetitive Code

You don’t need to repeatedly access object properties.

### 2\. Improved Readability

Code becomes shorter and easier to understand.

### 3\. Cleaner Function Parameters

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

### 4\. Easier Data Handling

Especially useful when working with APIs and large objects.

* * *

## Before vs After Destructuring

### Before

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

const title = product.title;
const price = product.price;
```

### After

```js
const { title, price } = product;
```

* * *

## Visual Understanding

### Object → Variable Extraction

```plaintext
Object:
{ name: "Vaibhav", age: 22 }

Destructuring:
{ name, age }

Result:
name = "Vaibhav"
age = 22
```

* * *

### Array Mapping

```plaintext
Array:
["red", "green", "blue"]

Destructuring:
[first, second, third]

Result:
first  = "red"
second = "green"
third  = "blue"
```

* * *

## Final Thoughts

Destructuring is a small feature with a big impact. It helps you write **cleaner, shorter, and more maintainable code**.

Once you start using it regularly, going back to traditional property access will feel unnecessarily verbose.