Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Значення за замовчуванням при деструктуризації». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Чудове питання - **значення за замовчуванням при деструктуризації** - це дуже зручна і часто використовувана можливість ES6, особливо в реальних проєктах (наприклад, у React-хуках або відповідях API).
Розберемо все покроково.

## 1. Загальна ідея

Якщо в об'єкті чи масиві **немає потрібного значення**,
ти можеш задати йому **значення за замовчуванням** прямо в момент деструктуризації.

## Приклад з об'єктом

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

// age в об'єкті немає, підставиться 30
const { name, age = 30 } = user;

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

> Значення за замовчуванням використовується **лише якщо властивість відсутня або дорівнює** `undefined`,
> але **не спрацьовує при** `null`.

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

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

console.log(a); // 1 (undefined -> підставилося)
console.log(b); // null (null не дорівнює undefined)
```

## 2. Значення за замовчуванням у масиві

```javascript
const arr = [10];

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

console.log(a); // 10
console.log(b); // 20 (підставилося)
console.log(c); // 30 (підставилося)
```

## 3. Вкладена деструктуризація з дефолтами

Ти можеш вказувати значення за замовчуванням на будь-якому рівні вкладеності.

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

// Якщо немає address.zip - підстав 10000
const {
  address: { city, zip = 10000 }
} = user;

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

## 4. Значення за замовчуванням у функціях

Дуже часте застосування - при деструктуризації аргументів функцій.

### Приклад:

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

> Тут `= {}` важливе - якщо взагалі не передати аргумент, помилки не буде.

## 5. Комбінація з перейменуванням

Можна одночасно **перейменовувати** змінні й задавати їм дефолти:

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

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

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

## 6. Дефолт + rest-оператор

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

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

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

## Важливо пам'ятати

| Ситуація | Що станеться |
| --- | --- |
| Властивість відсутня | Використовується значення за замовчуванням |
| Властивість `undefined` | Використовується значення за замовчуванням |
| Властивість `null` | Не використовується (null не дорівнює undefined) |
| Властивість є (будь-яке значення) | Значення за замовчуванням ігнорується |

## Підсумок

| Тип деструктуризації | Приклад | Результат |
| --- | --- | --- |
| Об'єкт | `const { a = 1 } = {};` | `a = 1` |
| Масив | `const [x = 5] = [];` | `x = 5` |
| Вкладений об'єкт | `const { user: { name = 'Anon' } = {} } = {};` | `name = 'Anon'` |
| Функція | `function f({ a = 1 } = {}) {}` | Безпечно при відсутності аргумента |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати512 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.