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

JavaScriptJunior~2 хв читання

Деструктуризація, це спосіб дістати дані з масивів і об'єктів коротко й красиво, без зайвого коду. Замість кількох рядків з obj.prop ви одним виразом створюєте потрібні змінні, за іменами властивостей для об'єктів і за позицією для масивів.

Теорія

TL;DR

Об'єкти деструктуризуються за іменами властивостей: const { name, age } = user;.
Масиви, за позицією: const [a, b] = arr;.
Змінну можна перейменувати: const { name: userName } = user;.
Можна задати значення за замовчуванням: const { city = 'Paris' } = user;.
Вкладені структури розбираються так само: const { address: { city } } = user;.
Rest збирає решту: const [first, ...rest] = arr;.

Швидкий приклад

До ES6 доводилося писати так:

javascript

const user = { name: 'Alex', age: 25 };
const name = user.name;
const age = user.age;

console.log(name, age); // Alex 25

З ES6 те саме, але одним рядком:

javascript

const user = { name: 'Alex', age: 25 };
const { name, age } = user;

console.log(name, age); // Alex 25

Тепер name і age автоматично створені як змінні з тими самими іменами, що й властивості об'єкта.

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

Витягнути тільки потрібні властивості:

javascript

const { name } = user;
console.log(name); // Alex

Перейменувати змінні:

javascript

const { name: userName, age: userAge } = user;
console.log(userName, userAge); // Alex 25

Значення за замовчуванням спрацьовує, коли властивості немає або вона undefined:

javascript

const { city = 'Paris' } = user;
console.log(city); // Paris

Вкладені об'єкти розбираються тим самим синтаксисом:

javascript

const user = {
  name: 'Alex',
  address: { city: 'Paris', zip: 12345 }
};

const { address: { city, zip } } = user;
console.log(city, zip); // Paris 12345

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

Для масивів значення беруться за позицією, а не за іменем:

javascript

const arr = [10, 20, 30];
const [a, b, c] = arr;

console.log(a, b, c); // 10 20 30

Пропуск елементів робиться порожнім місцем між комами:

javascript

const [first, , third] = [1, 2, 3];
console.log(first, third); // 1 3

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

javascript

const [x = 0, y = 0, z = 0] = [5, 10];
console.log(x, y, z); // 5 10 0

Rest-оператор збирає всі елементи, що лишилися, у новий масив:

javascript

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

Змішана деструктуризація

Об'єкти й масиви можна комбінувати в одному виразі:

javascript

const user = {
  name: 'Tim',
  hobbies: ['music', 'coding'],
  address: { city: 'Berlin' }
};

const {
  name,
  hobbies: [firstHobby],
  address: { city }
} = user;

console.log(name, firstHobby, city); // Tim music Berlin

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

Розбір об'єкта прямо в аргументі позбавляє від довгого списку параметрів:

javascript

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age}.`);
}

greet({ name: 'Alex', age: 25 }); // Hello, Alex! You are 25.

Значення за замовчуванням у параметрах, разом із = {} для випадку, коли аргумент не передали взагалі:

javascript

function connect({ host = 'localhost', port = 3000 } = {}) {
  console.log(`Connecting to ${host}:${port}`);
}

connect(); // Connecting to localhost:3000

Так само зручно розбирати те, що функція повернула:

javascript

function getUser() {
  return { name: 'Alex', age: 25 };
}

const { name, age } = getUser();
console.log(name, age); // Alex 25

Навіщо потрібна деструктуризація

Перевага	Пояснення
Короткий і чистий код	Менше повторів `obj.prop`
Зручна робота з аргументами функцій	Не треба передавати купу параметрів
Гнучкість	Можна задавати значення за замовчуванням, перейменовувати, пропускати
Часто використовується в React	Наприклад: `const { user, loading } = useAuth();`

Коротке резюме синтаксису:

Тип	Синтаксис	Приклад
Об'єкт	`{ prop1, prop2 } = obj`	`const { name, age } = user;`
Масив	`[a, b] = arr`	`const [x, y] = [10, 20];`
Вкладені	`{ nested: { prop } } = obj`	`const { info: { id } } = data;`
Rest	`{ a, ...rest } = obj` або `[a, ...rest] = arr`	`const { id, ...other } = user;`
За замовчуванням	`{ prop = value }` або `[x = 0]`	`const { city = 'Paris' } = user;`

Типові помилки

Плутати перейменування з типом. const { name: userName } = user створює змінну userName, а не оголошує тип; змінної name після цього не існує.
Чекати, що значення за замовчуванням спрацює для null. Воно застосовується лише коли значення undefined, тож { city = 'Paris' } для city: null дасть null.
Деструктуризувати undefined або null. const { a } = undefined кидає TypeError; для параметрів рятує запис = {}.
Забувати, що масив розбирається за позицією. Імена змінних у [a, b] нічого не означають, порядок вирішує все.
Починати рядок з { при присвоєнні без const. Вираз { a } = obj; буде прочитано як блок; треба обгорнути в дужки: ({ a } = obj);.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.