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

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

Просте визначення

Деструктуризація - це спосіб витягти дані з масивів та об'єктів коротко і красиво, без зайвого коду.

Приклад з об'єктом

До 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 автоматично створені як змінні з тими ж іменами, що й властивості об'єкта.

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

1. Витягування лише потрібних властивостей

javascript

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

2. Перейменування змінних

javascript

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

3. Значення за замовчуванням

javascript

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

4. Вкладені об'єкти

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

1. Пропуск елементів:

javascript

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

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

javascript

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

3. 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

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

1. Передача об'єкта в аргумент:

javascript

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

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

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

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`	-
За замовчуванням	`{ prop = value }` / `[x = 0]`	-

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

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

Premium

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