Suggest an edit

Improve this article

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

Great question - **default values in destructuring** are a very convenient and commonly used ES6 feature, especially in real projects (for example, in React hooks or API responses).
Let's go through it step by step.

## 1. The general idea

If an object or array **doesn't have the value you need**,
you can give it a **default value** right at the point of destructuring.

## Example with an object

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

// there's no age in the object, so 30 is used
const { name, age = 30 } = user;

console.log(name); // Alex
console.log(age);  // 30
```

> The default value is used **only if the property is absent or equal to** `undefined`,
> but it **does not apply for** `null`.

```javascript
const obj = { a: undefined, b: null };

const { a = 1, b = 2 } = obj;

console.log(a); // 1 (undefined -> the default applies)
console.log(b); // null (null is not undefined)
```

## 2. Default values in an array

```javascript
const arr = [10];

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

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

## 3. Nested destructuring with defaults

You can specify default values at any level of nesting.

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

// If address.zip is missing, use 10000
const {
  address: { city, zip = 10000 }
} = user;

console.log(city); // Paris
console.log(zip);  // 10000
```

## 4. Default values in functions

A very common use is destructuring function arguments.

### Example:

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

connect();                      // Connecting to localhost:3000
connect({ port: 8080 });        // Connecting to localhost:8080
connect({ host: 'api.com' });   // Connecting to api.com:3000
```

> The `= {}` here matters - if no argument is passed at all, there will be no error.

## 5. Combining with renaming

You can **rename** variables and give them defaults at the same time:

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

const { name: userName, age: userAge = 25 } = user;

console.log(userName); // Alex
console.log(userAge);  // 25
```

## 6. Default + the rest operator

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

const { age = 18, ...rest } = user;

console.log(age); // 18
console.log(rest); // { name: 'Alex' }
```

## Important to remember

| Situation | What happens |
| --- | --- |
| The property is missing | The default value is used |
| The property is `undefined` | The default value is used |
| The property is `null` | The default is not used (null is not undefined) |
| The property is present (any value) | The default value is ignored |

## Summary

| Destructuring type | Example | Result |
| --- | --- | --- |
| Object | `const { a = 1 } = {};` | `a = 1` |
| Array | `const [x = 5] = [];` | `x = 5` |
| Nested object | `const { user: { name = 'Anon' } = {} } = {};` | `name = 'Anon'` |
| Function | `function f({ a = 1 } = {}) {}` | Safe when the argument is missing |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.