Suggest an edit

Improve this article

Refine the answer for “What is destructuring?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## A simple definition

> **Destructuring** is a way to extract data from arrays and objects **concisely and elegantly**, without extra code.

## Example with an object

### Before ES6:

```javascript
const user = { name: 'Alex', age: 25 };
const name = user.name;
const age = user.age;

console.log(name, age); // Alex 25
```

### With ES6:

```javascript
const user = { name: 'Alex', age: 25 };
const { name, age } = user;

console.log(name, age); // Alex 25
```

Now `name` and `age` are automatically created as variables with the same names as the object's properties.

## Object destructuring - capabilities

### 1. Extracting only the properties you need

```javascript
const { name } = user;
console.log(name); // Alex
```

### 2. Renaming variables

```javascript
const { name: userName, age: userAge } = user;
console.log(userName, userAge); // Alex 25
```

### 3. Default values

```javascript
const { city = 'Paris' } = user;
console.log(city); // Paris
```

### 4. Nested objects

```javascript
const user = {
  name: 'Alex',
  address: { city: 'Paris', zip: 12345 }
};

const { address: { city, zip } } = user;
console.log(city, zip); // Paris 12345
```

## Array destructuring

### Example:

```javascript
const arr = [10, 20, 30];
const [a, b, c] = arr;

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

### 1. Skipping elements:

```javascript
const [first, , third] = [1, 2, 3];
console.log(first, third); // 1 3
```

### 2. Default values:

```javascript
const [x = 0, y = 0, z = 0] = [5, 10];
console.log(x, y, z); // 5 10 0
```

### 3. The rest operator:

```javascript
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]
```

## Mixed destructuring

You can combine objects and arrays:

```javascript
const user = {
  name: 'Tim',
  hobbies: ['music', 'coding'],
  address: { city: 'Berlin' }
};

const {
  name,
  hobbies: [firstHobby],
  address: { city }
} = user;

console.log(name, firstHobby, city); // Tim music Berlin
```

## Destructuring in functions

### 1. Passing an object as an argument:

```javascript
function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age}.`);
}

greet({ name: 'Alex', age: 25 }); // Hello, Alex! You are 25.
```

### 2. Default values:

```javascript
function connect({ host = 'localhost', port = 3000 } = {}) {
  console.log(`Connecting to ${host}:${port}`);
}

connect(); // Connecting to localhost:3000
```

## Destructuring returned data

```javascript
function getUser() {
  return { name: 'Alex', age: 25 };
}

const { name, age } = getUser();
console.log(name, age); // Alex 25
```

## Why destructuring is useful

| Benefit | Explanation |
|---|---|
| Short, clean code | Fewer repeats of `obj.prop` |
| Convenient handling of function arguments | No need to pass a pile of parameters |
| Flexibility | You can set default values, rename, skip |
| Commonly used in React | For example: `const { user, loading } = useAuth();` |

## Quick summary

| Type | Syntax | Example |
|---|---|---|
| Object | `{ prop1, prop2 } = obj` | `const { name, age } = user;` |
| Array | `[a, b] = arr` | `const [x, y] = [10, 20];` |
| Nested | `{ nested: { prop } } = obj` | `const { info: { id } } = data;` |
| Rest | `{ a, ...rest } = obj` / `[a, ...rest] = arr` | - |
| Default | `{ prop = value }` / `[x = 0]` | - |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts588 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.