Деструктуроване присвоєння

Двома найбільш вживаними структурами даних у JavaScript є Object та Array.

Об’єкти дозволяють нам створити єдину сутність, яка зберігатиме дані за ключем.
Масиви дозволяють нам зібрати елементи даних у впорядкований список.

Однак, коли ми передаємо їх у функцію, нам може знадобитися не все. Функції можуть знадобитися лише певні елементи або властивості.

Деструктуроване присвоєння – це спеціальний синтаксис, що дозволяє нам “розпаковувати” масиви чи об’єкти в купу змінних, оскільки іноді це зручніше.

Деструктурування також чудово працює зі складними функціями, які мають багато параметрів, типових значень тощо. Незабаром ми це побачимо.

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

Ось приклад того, як масив деструктурується на змінні:

          // у нас є масив з іменем та прізвищем
let arr = ["Іван", "Петренко"]

// деструктуроване присвоєння
// встановлює firstName = arr[0]
// та surname = arr[1]
let [firstName, surname] = arr;

alert(firstName); // Іван
alert(surname);  // Петренко
        

Тепер ми можемо працювати зі змінними замість елементів масиву.

Це чудово виглядає в поєднанні зі split або іншими методами повернення масиву:

let [firstName, surname] = "Іван Петренко".split(' ');
alert(firstName); // Іван
alert(surname);  // Петренко

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

Це називається “деструктуроване присвоєння”, оскільки воно “деструктурує” шляхом копіювання елементів у змінні. Однак, сам масив не змінюється.

Це просто коротший спосіб написати:

          // let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];
        

Небажані елементи масиву також можна викинути за допомогою додаткової коми:

// другий елемент не потрібен
let [firstName, , title] = ["Юлій", "Цезар", "Консул", "Римської республіки"];

alert( title ); // Консул

У наведеному вище коді другий елемент масиву пропускається, третій присвоюється title, а решта елементів масиву також пропускаються (оскільки для них немає змінних).

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

          let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
        

Це працює, тому що внутрішньо деструктуроване присвоювання працює шляхом ітерації над правильним значенням. Це своєрідний синтаксичний цукор для виклику for..of над значенням праворуч від = і присвоювання значень.

Ми можемо використовувати будь-які “призначення” з лівого боку.

Наприклад, властивість об’єкта:

let user = {};
[user.name, user.surname] = "Іван Петренко".split(' ');

alert(user.name); // Іван
alert(user.surname); // Петренко

У попередньому розділі, ми бачили метод Object.entries(obj).

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

let user = {
  name: "Іван",
  age: 30
};

// перебрати циклом ключі-та-значення
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:Іван, потім age:30
}

Подібний код для Map простіший, оскільки він є структурою даних, яка перебирається:

let user = new Map();
user.set("name", "Іван");
user.set("age", "30");

// Map ітерує як пари [key, value], що дуже зручно для деструктурування
for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:Іван, then age:30
}

Існує відомий трюк для обміну значень двох змінних за допомогою деструктурованого присвоєння: