> For the complete documentation index, see [llms.txt](https://artfulbits-se.gitbook.io/typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://artfulbits-se.gitbook.io/typescript/future-javascript/destructuring.md).

# 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

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