Suggest an edit

Improve this article

Refine the answer for “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)

**Destructuring is a way to extract data from arrays and objects briefly and neatly, without extra code.** Instead of several lines of `obj.prop` you create the variables you need in a single expression, by property name for objects and by position for arrays.

## Theory

### TL;DR
- Objects are destructured by property name: `const { name, age } = user;`.
- Arrays are destructured by position: `const [a, b] = arr;`.
- A variable can be renamed: `const { name: userName } = user;`.
- A default value can be supplied: `const { city = 'Paris' } = user;`.
- Nested structures unpack the same way: `const { address: { city } } = user;`.
- Rest collects the remainder: `const [first, ...rest] = arr;`.

### Quick example
Before ES6 you had to write this:

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

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

With ES6 the same thing fits on one line:

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

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

Now `name` and `age` have been created automatically as variables with the same names as the object properties.

### Destructuring objects

**Pull out only the properties you need:**

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

**Rename the variables:**

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

**Default values** kick in when the property is missing or `undefined`:

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

**Nested objects** unpack with the same syntax:

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

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

### Destructuring arrays

For arrays the values are taken by position, not by name:

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

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

**Skipping elements** is done with an empty slot between commas:

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

**Default values:**

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

**The rest operator** collects every remaining element into a new array:

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

### Mixed destructuring

Objects and arrays can be combined in a single expression:

```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

**Unpacking an object right in the argument** saves you from a long parameter list:

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

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

**Default values** in parameters, together with `= {}` for the case where no argument was passed at all:

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

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

Unpacking whatever a function returned is just as convenient:

```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 and clean code | Fewer repetitions of `obj.prop` |
| Convenient function arguments | No need to pass a pile of parameters |
| Flexibility | You can set defaults, rename and skip |
| Used constantly in React | For example: `const { user, loading } = useAuth();` |

A short syntax summary:

| Kind | 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` or `[a, ...rest] = arr` | `const { id, ...other } = user;` |
| Default | `{ prop = value }` or `[x = 0]` | `const { city = 'Paris' } = user;` |

### Common mistakes

- **Confusing renaming with a type annotation.** `const { name: userName } = user` creates a variable `userName`, it does not declare a type, and no `name` variable exists afterwards.
- **Expecting a default to apply to `null`.** Defaults only apply when the value is `undefined`, so `{ city = 'Paris' }` on `city: null` yields `null`.
- **Destructuring `undefined` or `null`.** `const { a } = undefined` throws a `TypeError`; for parameters the `= {}` fallback saves you.
- **Forgetting that arrays unpack by position.** The variable names in `[a, b]` mean nothing, the order decides everything.
- **Starting a line with `{` when assigning without `const`.** The expression `{ a } = obj;` is read as a block; wrap it in parentheses: `({ a } = obj);`.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.