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

Деструктуризація об'єктів дозволяє розпаковувати значення властивостей об'єктів в окремі змінні. Це корисний і зручний спосіб отримати доступ до властивостей об'єкта. Зазвичай дані приходять у вигляді згрупованих структур (обʼєкти і масиви) відтак доводиться використовувати синтаксис через крапку для доступу до властивостей.

const user = {
  name: "Олександр",
  surname: "Хомяк",
  age: 30,
  city: "Київ",
  hobby: ["electronics", "programming", "sport", "gym"],
  isMarried: false,
};

console.log(user.name); // "Олександр"
console.log(user.age); // 30
console.log(user.hobby); // ["electronics", "programming", "sport", "gym"]

Деструктуризація скорочує код, "витягаючи" властивості в окремі локальні змінні.

const user = {
  name: "Олександр",
  surname: "Хомяк",
  age: 30,
  city: "Київ",
  hobby: ["electronics", "programming", "sport", "gym"],
  isMarried: false,
};

// Деструктуризація об'єкта
const { name, surname, age, city, hobby, isMarried } = user;

console.log(name); // "Олександр"
console.log(age); // 30
console.log(hobby); // ["electronics", "programming", "sport", "gym"]

Деструктуризація завжди розташована у лівій частині операції присвоєння у фігурних дужках після ключового слова const або let. Назви деструктуризованих змінних мають чітко збігатися із властивостями обʼєкта, інакше це буде нова змінна із значенням undefined. Справа від операції присвоєння вказують обʼєкт, який потрібно деструктуризувати. Порядок оголошення змінних у фігурних дужках - неважливий.

Значення за замовчуванням​

При деструктуризації змінній можна задати значення за замовчанням. Тоді, якщо в обʼєкті такої властивості немає, то у змінної буде не значення undefined, а значення задане за замовчанням. Якщо ж така властивість є, то буде присвоєно значення з обʼєкта. Значення за замовчанням задається після символу присвоєння.

const user = {
  name: "Олександр",
  surname: "Хомяк",
};

const { name, surname, avatar = "http://link_to_avatar" } = user;

console.log(avatar); // "http://link_to_avatar"

Зміна імені змінної при деструктуризації

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

const user = {
  name: "Олександр",
  surname: "Хомяк",
};

const { name, surname: lastName } = user;

console.log(lastName); // "Хомяк"

Деструктуризація в циклах

Перебираючи масив об'єктів циклом for...of, можна проводити деструктуризацію всередині циклу. Буде проводитися деструктуризація на кожній ітерації.

const users = [
  { name: "Олександр", surname: "Хомяк" },
  { name: "Тарас", surname: "Шевченко" },
  { name: "Леся", surname: "Українка" },
];

for (const user of users) {
  const { name, surname } = user;
  console.log(name);
  console.log(surname);
}

Можна проводити деструктуризацію і беспосередньо у місці оголошення змінної обʼєкту. Але такий код може бути складно читабельний. Тому використовують, коли потрібно деструктуризувати мало змінних.

const users = [
  { name: "Олександр", surname: "Хомяк" },
  { name: "Тарас", surname: "Шевченко" },
  { name: "Леся", surname: "Українка" },
];

for (const { name, surname } of users) {
  console.log(name);
  console.log(surname);
}

Глибока деструктуризація

Глибока деструктуризація об'єктів дозволяє розпаковувати вкладені властивості об'єктів у відповідні змінні. Це корисно, коли об'єкт має вкладену структуру і потрібен доступ до властивостей вкладених об'єктів. Використовуються вищезгадані принципи.

const user = {
  name: "Олександр",
  surname: "Хомяк",
  age: 30,
  address: {
    country: "Ukraine",
    // city: "Київ",
    zip: 11000,
  },
};

const {
  name,
  surname,
  age,
  address: { country, city: place = "Maidan", zip },
} = user;

console.log(country); //Ukraine
console.log(place); //Maidan

Деструктуризація в параметрах функцій

Деструктуризацію об'єктів також можна використовувати при роботі з параметрами функцій.

const user = {
  name: "Олександр",
  surname: "Хомяк",
};

function myFunc({ name, surname }) {
  console.log(`${name} ${surname}`);
}

myFunc(user); // Олександр Хомяк