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

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

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

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

Контент

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

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

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

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

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

## Просте визначення

> **Деструктуризація** - це спосіб витягти дані з масивів та об'єктів **коротко і красиво**, без зайвого коду.

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

### До 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` автоматично створені як змінні з тими ж іменами, що й властивості об'єкта.

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

### 1. Витягування лише потрібних властивостей

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

### 2. Перейменування змінних

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

### 3. Значення за замовчуванням

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

### 4. Вкладені об'єкти

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

### 1. Пропуск елементів:

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

### 2. Значення за замовчуванням:

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

### 3. 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
```

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

### 1. Передача об'єкта в аргумент:

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

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

### 2. Значення за замовчуванням:

```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` | - |
| За замовчуванням | `{ prop = value }` / `[x = 0]` | - |

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

Для рев’юера

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

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