Що таке деструктуризація?

Повне пояснення

Що це і навіщо

Деструктуризація — це механізм, що дозволяє швидко отримувати значення з масивів чи об’єктів без явного звернення до ключів. Це корисно, коли потрібно працювати з кількома полями одночасно або передавати їх як окремі аргументи.

Ключові принципи

• Об’єктна деструктуризація: const {a, b} = obj; – отримуємо властивості a і b. Можна задавати нові назви: const {a: x, b: y} = obj;.
• Масивна деструктуризація: const [x, y] = arr; – розпаковуємо елементи за індексом. Підтримується пропуск елементів: const [, y] = arr;.
• Значення за замовчуванням: const {c = 10} = obj;.
• Глибока деструктуризація: const {a: {b}} = obj;.

Як це працює

Під час виконання JS‑парсера синтаксис деструктуризації розкладається на прості присвоєння. Наприклад, const {a} = obj; еквівалентно const a = obj.a;. Це робиться на рівні компіляції, тому немає додаткових накладних витрат.

Практика і реалізація

// Об’єктна деструктуризація
const user = {name: 'Ivan', age: 30};
const {name, age} = user;
console.log(name); // Ivan

// Масивна деструктуризація
const coords = [10, 20];
const [x, y] = coords;
console.log(x, y); // 10 20

Тестування

import {describe, it} from 'vitest';

describe('destructuring', () => {
  it('should extract properties', () => {
    const obj = {a: 1, b: 2};
    const {a, b} = obj;
    expect(a).toBe(1);
    expect(b).toBe(2);
  });
});

Оптимізація, типові помилки та edge cases

• Невизначені ключі: const {c} = obj; поверне undefined. Використовуйте значення за замовчуванням.
• Проблеми з типами: у TS варто явно вказувати інтерфейси, щоб уникнути any.
• Глибока деструктуризація: перевірте, що вкладені об’єкти існують, щоб уникнути TypeError.

Альтернативи

• Класичне присвоєння: const a = obj.a; const b = obj.b;.
• Функція Object.entries() + цикл, якщо потрібно обробити всі ключі.

Часті помилки

1. Забудьте про значення за замовчуванням → undefined.
2. Неправильний синтаксис дужок → помилка парсера.
3. Вкладені об’єкти без перевірки → TypeError.
4. Використання деструктуризації в старих браузерах без транспілятора → не підтримується.
5. Перевантаження змінних з однаковими іменами → конфлікт.
6. Неочікувані типи (наприклад, масив замість об’єкта) → помилка.
7. Зміна значень після деструктуризації не впливає на оригінальний об’єкт.
8. Під час деструктуризації масиву з недостатньою довжиною → undefined.

Cheatsheet

• Об’єкт: {a, b}
• Масив: [x, y]
• За замовчуванням: {c = 10}
• Переіменування: {a: x}