Пошук уроків, статей та іншого контенту
Як витягувати значення з об'єктів і масивів в окремі змінні одним виразом.
Без деструктуризації дістати кілька полів з об'єкта в окремі змінні означає повторювати ім'я об'єкта для кожного поля:
const user = { name: "Олена", age: 28, city: "Київ" };
const name = user.name;
const age = user.age;
const city = user.city;Деструктуризація робить те саме одним рядком, читається як «шаблон», що збігається зі структурою об'єкта:
const { name, age, city } = user;Якщо властивості немає в об'єкті, змінна отримає значення за замовчуванням замість undefined:
const { name, country = "Україна" } = user;
country; // "Україна" — user не має поля country, підставилось значення за замовчуваннямКоли потрібна інша назва змінної, ніж ключ об'єкта, використовують двокрапку:
const { name: userName } = user;
userName; // "Олена" — змінна user.name тепер зветься userNameСтруктура шаблону повторює вкладеність самого об'єкта:
const order = {
id: "A1",
customer: { name: "Максим", address: { city: "Одеса" } },
};
const {
customer: {
name,
address: { city },
},
} = order;
name; // "Максим"
city; // "Одеса"У вкладеній деструктуризації самі проміжні ключі (customer, address) не стають змінними — доступні лише кінцеві поля, які ви явно назвали.
Синтаксис схожий, але з квадратними дужками — і позиція в шаблоні відповідає позиції в масиві, а не імені ключа:
const colors = ["червоний", "зелений", "синій"];
const [first, second] = colors;
first; // "червоний"
second; // "зелений"Порожнє місце в шаблоні пропускає елемент:
const [, , third] = colors;
third; // "синій" — пропущено перші два елементиКласична задача — поміняти місцями значення двох змінних — розв'язується деструктуризацією масиву в один рядок:
let a = 1;
let b = 2;
[a, b] = [b, a];
a; // 2
b; // 1Ми вже бачили цей патерн у модулі «Функції» — той самий синтаксис деструктуризації працює прямо в сигнатурі функції, без окремого рядка з привласненням:
function printUser({ name, age = 18 }) {
console.log(`${name}, ${age}`);
}
printUser({ name: "Тарас" }); // "Тарас, 18"function handleResponse({ data, status, error = null }) {
if (error) {
console.error("Помилка:", error);
return;
}
console.log(`Статус ${status}, отримано:`, data);
}Плутанина, що вкладені проміжні ключі теж стають змінними — стають доступними лише явно названі кінцеві поля.
Спроба деструктурувати undefined чи null — це кидає TypeError, а не повертає undefined для кожного поля.
Забування дужок навколо [a, b] = [b, a] при обміні значень уже оголошених змінних — без них це синтаксична помилка.
Деструктуризація — це компактний спосіб дістати потрібні значення з об'єкта чи масиву в окремі змінні за одну операцію, зі значеннями за замовчуванням і перейменуванням із коробки. Вона однаково добре працює і в звичайному присвоєнні, і в параметрах функції.
Спробуйте самостійно
Маючи const point = { x: 10, y: 20, z: 0 }, деструктуризуйте x та y в окремі змінні, а z перейменуйте на depth з значенням за замовчуванням 1, якщо його немає в об'єкті.