---
sidebar_position: 9
---

# Деструктурирующее присваивание
Деструктуризация позволяет разбивать объект или массив на переменные при присвоении.

Полный синтаксис для объекта:
```js
let {prop : varName = defaultValue, ...rest} = object
```
Полный синтаксис для массива:
```js
let [item1 = defaultValue, item2, ...rest] = array
```
Можно извлекать данные из вложенных объектов и массивов, для этого левая сторона должна иметь ту же структуру, что и правая.

### Деструктуризация массива
```js
let arr = ["Ilya", "Kantor"]; // у нас есть массив с именем и фамилией
let [firstName, surname] = arr; // деструктурирующее присваивание
```
💥 «Деструктуризация» не означает «разрушение».

#### Работает с любым перебираемым объектом с правой стороны
```js
let [a, b, c] = "abc";
let [one, two, three] = new Set([1, 2, 3]);
```
#### Присваивайте чему угодно с левой стороны
```js
let user = {};
[user.name, user.surname] = "Ilya Kantor".split(' ');
alert(user.name, user.surname); // Ilya Kantor
```
#### Цикл с .entries()
```js
let user = {
  name: "John",
  age: 30
};

for (let [key, value] of Object.entries(user)) { // цикл по ключам и значениям
  alert(`${key}:${value}`); // name:John, затем age:30
}
```
#### Трюк обмена переменных
```js
let guest = "Jane";
let admin = "Pete";

[guest, admin] = [admin, guest];// Давайте поменяем местами значения: сделаем guest = "Pete", а admin = "Jane"
alert(`${guest} ${admin}`); // Pete Jane (успешно заменено!)
```

### Остаточные параметры «…»
```js
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// rest это массив элементов, начиная с 3-го
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2
```

### Значения по умолчанию
Если мы хотим, чтобы значение «по умолчанию» заменило отсутствующее, мы можем указать его с помощью =
```js
// значения по умолчанию
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (из массива)
alert(surname); // Anonymous (значение по умолчанию)
```
Значения по умолчанию могут быть гораздо более сложными выражениями или даже функциями. Они выполняются, только если значения отсутствуют.

### Деструктуризация объекта
Деструктурирующее присваивание также работает с объектами.
```js
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200
```

### Остаток объекта «…»
```js
let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = свойство с именем title
// rest = объект с остальными свойствами
let {title, ...rest} = options;

// сейчас title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100
```

### Умные параметры функций
```js
function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}
```

🚀 **Источник: [https://learn.javascript.ru/destructuring-assignment](https://learn.javascript.ru/destructuring-assignment)**