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

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

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

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

Контент

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

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

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

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

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

**Деструктуризація, це спосіб дістати дані з масивів і об'єктів коротко й красиво, без зайвого коду.** Замість кількох рядків з `obj.prop` ви одним виразом створюєте потрібні змінні, за іменами властивостей для об'єктів і за позицією для масивів.

## Теорія

### TL;DR
- Об'єкти деструктуризуються за іменами властивостей: `const { name, age } = user;`.
- Масиви, за позицією: `const [a, b] = arr;`.
- Змінну можна перейменувати: `const { name: userName } = user;`.
- Можна задати значення за замовчуванням: `const { city = 'Paris' } = user;`.
- Вкладені структури розбираються так само: `const { address: { city } } = user;`.
- Rest збирає решту: `const [first, ...rest] = arr;`.

### Швидкий приклад
До ES6 доводилося писати так:

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

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

З ES6 те саме, але одним рядком:

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

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

Тепер `name` і `age` автоматично створені як змінні з тими самими іменами, що й властивості об'єкта.

### Деструктуризація об'єктів

**Витягнути тільки потрібні властивості:**

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

**Перейменувати змінні:**

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

**Значення за замовчуванням** спрацьовує, коли властивості немає або вона `undefined`:

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

**Вкладені об'єкти** розбираються тим самим синтаксисом:

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

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

### Деструктуризація масивів

Для масивів значення беруться за позицією, а не за іменем:

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

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

**Пропуск елементів** робиться порожнім місцем між комами:

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

**Значення за замовчуванням:**

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

**Rest-оператор** збирає всі елементи, що лишилися, у новий масив:

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

### Змішана деструктуризація

Об'єкти й масиви можна комбінувати в одному виразі:

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

### Деструктуризація у функціях

**Розбір об'єкта прямо в аргументі** позбавляє від довгого списку параметрів:

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

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

**Значення за замовчуванням** у параметрах, разом із `= {}` для випадку, коли аргумент не передали взагалі:

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

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

Так само зручно розбирати те, що функція повернула:

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

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

### Навіщо потрібна деструктуризація

| Перевага | Пояснення |
| --- | --- |
| Короткий і чистий код | Менше повторів `obj.prop` |
| Зручна робота з аргументами функцій | Не треба передавати купу параметрів |
| Гнучкість | Можна задавати значення за замовчуванням, перейменовувати, пропускати |
| Часто використовується в React | Наприклад: `const { user, loading } = useAuth();` |

Коротке резюме синтаксису:

| Тип | Синтаксис | Приклад |
| --- | --- | --- |
| Об'єкт | `{ prop1, prop2 } = obj` | `const { name, age } = user;` |
| Масив | `[a, b] = arr` | `const [x, y] = [10, 20];` |
| Вкладені | `{ nested: { prop } } = obj` | `const { info: { id } } = data;` |
| Rest | `{ a, ...rest } = obj` або `[a, ...rest] = arr` | `const { id, ...other } = user;` |
| За замовчуванням | `{ prop = value }` або `[x = 0]` | `const { city = 'Paris' } = user;` |

### Типові помилки

- **Плутати перейменування з типом.** `const { name: userName } = user` створює змінну `userName`, а не оголошує тип; змінної `name` після цього не існує.
- **Чекати, що значення за замовчуванням спрацює для `null`.** Воно застосовується лише коли значення `undefined`, тож `{ city = 'Paris' }` для `city: null` дасть `null`.
- **Деструктуризувати `undefined` або `null`.** `const { a } = undefined` кидає `TypeError`; для параметрів рятує запис `= {}`.
- **Забувати, що масив розбирається за позицією.** Імена змінних у `[a, b]` нічого не означають, порядок вирішує все.
- **Починати рядок з `{` при присвоєнні без `const`.** Вираз `{ a } = obj;` буде прочитано як блок; треба обгорнути в дужки: `({ a } = obj);`.

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

Для рев’юера

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

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