# Destructuring

Деструктуризація.

TypeScript підтримує такі форми деструктуризації (буквально назви деструктурування, тобто розбивання структури):

1. Деструктуризація об'єкта
2. Деструктуризація масиву

Легко думати про деструктуризацію як про протилежність *structuring* . Методом *structuring* в JavaScript є об’єктний літерал:

```ts
var foo = {
    bar: {
        bas: 123
    }
};
```

Без приголомшливої підтримки *structuring* , вбудованої в JavaScript, створення нових об’єктів на льоту справді було б дуже громіздким. Деструктуризація забезпечує такий самий рівень зручності для отримання даних із структури.

## Object Destructuring

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

Деструктуризація є корисною, тому що вона дозволяє робити в одному рядку те, що інакше потребувало б кількох рядків. Розглянемо такий випадок:

```ts
var rect = { x: 0, y: 10, width: 15, height: 20 };

// Деструктуризація присвоєння
var {x, y, width, height} = rect;
console.log(x, y, width, height); // 0,10,15,20

rect.x = 10;
({x, y, width, height} = rect); // призначити існуючим змінним за допомогою зовнішніх дужок
console.log(x, y, width, height); // 10,10,15,20
```

Тут, за відсутності деструктуризації, вам доведеться виділяти `x,y,width,height` один за одним із `rect` .

Щоб призначити витягнуту змінну новій назві змінної, ви можете зробити наступне:

```ts
// структуризация
const obj = {"some property": "some value"};

// деструктуризация
const {"some property": someProperty} = obj;
console.log(someProperty === "some value"); // true
```

Крім того, ви можете отримати глибокі дані зі структури за допомогою деструктуризації. Це показано в наступному прикладі:

```ts
var foo = { bar: { bas: 123 } };
var {bar: {bas}} = foo; // дорівнює `var bas = foo.bar.bas;`
```

## Object Destructuring with rest

Деструктурування об'єкта за допомогою оператора *rest*

Ви можете вибрати будь-яку кількість елементів з об’єкта та отримати *an object* із решти елементів за допомогою деструктуризації об’єкта з rest.

```ts
var {w, x, ...remaining} = {w: 1, x: 2, y: 3, z: 4};
console.log(w, x, remaining); // 1, 2, {y:3,z:4}
```

Добрим випадом використання також є ігнорування певних властивостей. Наприклад:

```ts
// Приклад функції
function goto(point2D: {x: number, y: number}) {
  // Уявіть код, який може зламати
// якщо ви передаєте об'єкт
// з більшою кількістю елементів, ніж бажано

}
// Якийсь момент, який ви отримуєте звідкись
const point3D = {x: 1, y: 2, z: 3};
/** Чудове використання rest для видалення додаткових властивостей */
const { z, ...point2D } = point3D;
goto(point2D);
```

## Array Destructuring

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

Поширене питання програмування: «Як поміняти місцями дві змінні, не використовуючи третю?». Рішення TypeScript:

```ts
var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2,1
```

Зауважте, що деструктурування масиву — це фактично компілятор, який виконує `[0], [1], ...` і так далі за вас. Немає гарантії, що ці значення будуть існувати.

## Array Destructuring with rest

Деструктурування масиву з rest

Ви можете вибрати будь-яку кількість елементів із масиву та отримати *an array* із решти елементів за допомогою деструктуризації масиву з rest.

```ts
var [x, y, ...remaining] = [1, 2, 3, 4];
console.log(x, y, remaining); // 1, 2, [3,4]
```

## Array Destructuring with ignores

Деструктурування масиву з ігноруванням.

Ви можете ігнорувати будь-який індекс, просто залишивши його розташування порожнім , тобто , , у лівій частині призначення. Наприклад:

```ts
var [x, , ...remaining] = [1, 2, 3, 4];
console.log(x, remaining); // 1, [3,4]
```

## JS Generation

JavaScript для цілей, відмінних від ES6, просто передбачає створення тимчасових змінних, так само як вам довелося б це зробити самостійно без підтримки деструктуризації, наприклад

```ts
var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2,1

// becomes //

var x = 1, y = 2;
_a = [y,x], x = _a[0], y = _a[1];
console.log(x, y);
var _a;
```

## Summary

Деструктуризація може зробити ваш код більш читабельним і придатним для обслуговування, зменшивши кількість рядків і зробивши більш зрозумілим. Деструктуризація масиву може дозволити вам використовувати масиви як кортежі.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://artfulbits-se.gitbook.io/typescript/future-javascript/destructuring.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.