# De structuring in JavaScript


# Destructuring in JavaScript

If you've been writing JavaScript for a while, you've probably had moments where you're pulling values out of arrays or objects one by one. It works, but it gets old fast. That's exactly where destructuring comes in.

* * *

## 1\. What destructuring means

Destructuring is just a cleaner way to unpack values from arrays or objects into variables. Instead of reaching into a box multiple times, you grab everything you need in one go.

That's it. Nothing fancy under the hood — just cleaner syntax.

* * *

## 2\. Destructuring arrays

**Before destructuring:**

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

const first = colors[0];
const second = colors[1];
const third = colors[2];
```

**After destructuring:**

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

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

Same result. Much less noise. The order matters here — the first variable maps to the first item, the second to the second, and so on.

Want to skip an item? Just leave a gap:

```js
const [first, , third] = colors; // skips "green"
```

* * *

## 3\. Destructuring objects

This one you'll use all the time. With objects, you pull out values by their key name.

**Before destructuring:**

```js
const user = { name: "Aryan", age: 22, city: "Mumbai" };

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

**After destructuring:**

```js
const user = { name: "Aryan", age: 22, city: "Mumbai" };

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

Three lines become one. And if you want to rename a variable while destructuring:

```js
const { name: userName } = user;
// now it's userName, not name
```

* * *

## 4\. Default values

Sometimes a value might not exist. Instead of getting `undefined`, you can set a fallback right inside the destructuring.

```js
const { name, role = "viewer" } = user;
```

If `user.role` doesn't exist, `role` will be `"viewer"` by default. Works the same way with arrays:

```js
const [a = 1, b = 2] = [10];
// a = 10, b = 2
```

* * *

## 5\. Benefits of destructuring

Here's why it's worth using:

*   **Less repetition** — no more writing `user.name`, `user.age`, `user.city` everywhere
    
*   **Cleaner function parameters** — you can destructure directly in the function signature
    
*   **Easier to read** — at a glance, you know exactly what's being used
    
*   **Works great with APIs** — when you fetch data, you're always dealing with objects and arrays
    

A quick example of destructuring in a function:

```js
// Instead of this:
function greet(user) {
  console.log("Hello, " + user.name);
}

// You can do this:
function greet({ name }) {
  console.log("Hello, " + name);
}
```

* * *

Destructuring won't change how your code runs, but it will change how it reads — and that matters more than people think. Once you start using it, going back to the old way feels unnecessarily verbose.

Start small. Pick one object in your current code and try destructuring it. You'll get it immediately.