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

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

Деструктуризація — це синтаксис JavaScript, який дозволяє розпаковувати значення з масивів або витягувати властивості з об'єктів у окремі змінні. Введено в ES6.

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

javascript

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

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

javascript

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

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

javascript

const [a = 10, b = 20] = [1];
console.log(a); // 1
console.log(b); // 20 (за замовчуванням)

Патерн решти

javascript

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

Обмін змінними

javascript

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

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

javascript

const { name, age } = { name: "Alice", age: 25 };
console.log(name); // "Alice"
console.log(age);  // 25

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

javascript

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

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

javascript

const { name, role = "user" } = { name: "Alice" };
console.log(role); // "user" (за замовчуванням)

Вкладена деструктуризація

javascript

const user = {
  name: "Alice",
  address: {
    city: "Kyiv",
    zip: "01001"
  }
};

const { address: { city, zip } } = user;
console.log(city); // "Kyiv"
console.log(zip);  // "01001"

Решта в об'єктах

javascript

const { id, ...rest } = { id: 1, name: "Alice", age: 25 };
console.log(id);   // 1
console.log(rest); // { name: "Alice", age: 25 }

Параметри функцій

javascript

// Деструктуризація об'єкта в параметрах
function greet({ name, age }) {
  return `Hello, ${name}! You are ${age}.`;
}
greet({ name: "Alice", age: 25 });

// З значеннями за замовчуванням
function createUser({ name, role = "user", active = true } = {}) {
  return { name, role, active };
}

Загальні випадки використання

Імпорт іменованих експортувань

javascript

import { useState, useEffect } from 'react';

Відповідь API

javascript

const { data, error, loading } = await fetchUser(id);

Багаторазове повернення значень

javascript

function getMinMax(arr) {
  return { min: Math.min(...arr), max: Math.max(...arr) };
}
const { min, max } = getMinMax([3, 1, 4, 1, 5]);

Важливо:

Деструктуризація робить код більш читабельним і лаконічним. Використовуйте її для параметрів функцій, відповідей API, імпортів і скрізь, де потрібно витягти конкретні значення з об'єктів або масивів.

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

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

Premium

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

Дочитали статтю?

Практика завдань