Пошук уроків, статей та іншого контенту
Отримаєте значення властивостей у змінні та навчитеся перейменовувати їх і задавати значення за замовчуванням.
Деструктуризація об’єктів — це синтаксис JavaScript, який дає змогу отримати значення властивостей об’єкта та присвоїти їх змінним.
Без деструктуризації:
const user = {
name: "Олена",
age: 28,
city: "Львів"
};
const name = user.name;
const age = user.age;
const city = user.city;
console.log(name); // Олена
console.log(age); // 28
console.log(city); // ЛьвівЗа допомогою деструктуризації:
const user = {
name: "Олена",
age: 28,
city: "Львів"
};
const { name, age, city } = user;
console.log(name); // Олена
console.log(age); // 28
console.log(city); // ЛьвівФігурні дужки зліва від оператора = описують, які властивості потрібно отримати з об’єкта:
const { name, age } = user;JavaScript шукає в об’єкті властивості name та age, а потім створює змінні з такими самими іменами.
Загальний синтаксис:
const { propertyName } = object;Наприклад:
const product = {
title: "Ноутбук",
price: 45000
};
const { title } = product;
console.log(title); // НоутбукМожна отримати кілька властивостей одразу:
const { title, price } = product;
console.log(title); // Ноутбук
console.log(price); // 45000Порядок властивостей у деструктуризації не має значення:
const product = {
title: "Ноутбук",
price: 45000
};
const { price, title } = product;
console.log(title); // Ноутбук
console.log(price); // 45000На відміну від деструктуризації масивів, властивості об’єкта визначаються за іменами, а не за позицією.
Іноді потрібно отримати властивість, але назвати локальну змінну інакше. Для цього використовують синтаксис:
const { propertyName: newVariableName } = object;Наприклад:
const user = {
name: "Олена",
age: 28
};
const { name: userName, age: userAge } = user;
console.log(userName); // Олена
console.log(userAge); // 28Тут:
name і age — назви властивостей об’єкта;
userName і userAge — назви створених змінних.
Після такого присвоєння змінної name не буде:
const user = {
name: "Олена"
};
const { name: userName } = user;
console.log(userName); // Олена
// console.log(name); // ReferenceErrorПерейменування корисне, коли:
назва властивості надто загальна;
у поточній області видимості вже є змінна з таким іменем;
потрібно явно вказати призначення значення;
кілька об’єктів мають властивість з однаковою назвою.
const user = {
name: "Олена"
};
const company = {
name: "Tech Company"
};
const { name: userName } = user;
const { name: companyName } = company;
console.log(userName); // Олена
console.log(companyName); // Tech CompanyЯкщо властивість відсутня в об’єкті, результатом деструктуризації буде undefined:
const user = {
name: "Олена"
};
const { name, age } = user;
console.log(name); // Олена
console.log(age); // undefinedЩоб задати значення за замовчуванням, після назви властивості використовують оператор =:
const user = {
name: "Олена"
};
const { name, age = 18 } = user;
console.log(name); // Олена
console.log(age); // 18Значення за замовчуванням використовується, якщо властивість має значення undefined:
const firstUser = {};
const secondUser = {
age: undefined
};
const thirdUser = {
age: null
};
const { age: firstAge = 18 } = firstUser;
const { age: secondAge = 18 } = secondUser;
const { age: thirdAge = 18 } = thirdUser;
console.log(firstAge); // 18
console.log(secondAge); // 18
console.log(thirdAge); // nullЗначення null не вважається відсутнім, тому для нього значення за замовчуванням не застосовується.
Можна одночасно перейменувати властивість і задати значення за замовчуванням:
const settings = {
language: "uk"
};
const {
language: userLanguage,
theme: userTheme = "light"
} = settings;
console.log(userLanguage); // uk
console.log(userTheme); // lightДеструктуризацію можна виконувати за допомогою const, let або var:
const user = {
name: "Олена",
age: 28
};
const { name } = user;
let { age } = user;
age = 29;
console.log(name); // Олена
console.log(age); // 29Вибір між const і let залежить від того, чи потрібно буде повторно присвоювати змінній значення.
Не можна оголошувати дві змінні з однаковим іменем в одній області видимості:
const name = "Андрій";
const user = {
name: "Олена"
};
// Помилка: Identifier 'name' has already been declared
// const { name } = user;У такій ситуації використовуйте перейменування:
const name = "Андрій";
const user = {
name: "Олена"
};
const { name: userName } = user;
console.log(name); // Андрій
console.log(userName); // ОленаЯкщо змінні вже оголошені, під час деструктуризації потрібно взяти весь вираз у круглі дужки:
const user = {
name: "Олена",
age: 28
};
let name;
let age;
({ name, age } = user);
console.log(name); // Олена
console.log(age); // 28Без круглих дужок JavaScript може сприйняти фігурні дужки як блок коду, а не як деструктуризацію.
Оператор rest (...) дає змогу отримати всі властивості, які не були деструктуровані:
const user = {
id: 1,
name: "Олена",
age: 28,
city: "Львів"
};
const { id, name, ...otherData } = user;
console.log(id); // 1
console.log(name); // Олена
console.log(otherData); // { age: 28, city: "Львів" }Змінна з rest-оператором завжди містить новий об’єкт.
Rest-властивість має бути останньою:
const user = {
name: "Олена",
age: 28,
city: "Львів"
};
const { name, ...details } = user;
console.log(details); // { age: 28, city: "Львів" }Такий підхід часто використовують, щоб відокремити кілька властивостей від решти даних.
Деструктуризація працює і з вкладеними об’єктами:
const user = {
name: "Олена",
address: {
city: "Львів",
country: "Україна"
}
};
const {
name,
address: { city, country }
} = user;
console.log(name); // Олена
console.log(city); // Львів
console.log(country); // УкраїнаУ цьому прикладі змінна address не створюється. Деструктуризація одразу отримує з неї city та country.
Якщо потрібно отримати і весь вкладений об’єкт, і його окрему властивість, це можна зробити так:
const user = {
name: "Олена",
address: {
city: "Львів",
country: "Україна"
}
};
const {
address,
address: { city }
} = user;
console.log(address); // { city: "Львів", country: "Україна" }
console.log(city); // ЛьвівДля вкладених властивостей також можна задавати значення за замовчуванням:
const user = {
name: "Олена"
};
const {
address: {
city = "Невідоме місто"
} = {}
} = user;
console.log(city); // Невідоме місто= {} після address захищає від помилки, якщо властивості address немає взагалі.
Деструктуризацію зручно використовувати в параметрах функцій. Функція отримує об’єкт, а її параметри одразу дістають потрібні властивості:
function createGreeting({ name, city }) {
return `${name} живе у місті ${city}.`;
}
const user = {
name: "Олена",
city: "Львів"
};
console.log(createGreeting(user));
// Олена живе у місті Львів.Це робить функцію зрозумілішою: у її сигнатурі одразу видно, які дані потрібні.
Для параметрів можна задавати значення за замовчуванням:
function getUserLabel({ name, role = "Користувач" }) {
return `${name} — ${role}`;
}
console.log(getUserLabel({ name: "Олена" }));
// Олена — Користувач
console.log(getUserLabel({
name: "Андрій",
role: "Адміністратор"
}));
// Андрій — АдміністраторЯкщо сама функція може бути викликана без аргументу, варто задати значення за замовчуванням для всього параметра:
function printSettings({ theme = "light", language = "uk" } = {}) {
console.log(`Тема: ${theme}, мова: ${language}`);
}
printSettings();
// Тема: light, мова: uk
printSettings({ theme: "dark" });
// Тема: dark, мова: ukБез = {} виклик printSettings() спричинив би помилку, оскільки JavaScript не може деструктуризувати undefined.
Розглянемо функцію, яка форматує дані профілю користувача:
function formatProfile(profile) {
const {
id,
name: displayName,
email,
role = "user",
address: {
city = "Невідоме місто"
} = {},
...additionalData
} = profile;
return {
id,
displayName,
email,
role,
city,
additionalData
};
}
const profile = {
id: 42,
name: "Олена Коваль",
email: "olena@example.com",
address: {
city: "Львів",
country: "Україна"
},
isActive: true
};
console.log(formatProfile(profile));Результат:
{
id: 42,
displayName: "Олена Коваль",
email: "olena@example.com",
role: "user",
city: "Львів",
additionalData: {
isActive: true
}
}У прикладі використано кілька можливостей:
name: displayName — перейменування властивості;
role = "user" — значення за замовчуванням;
вкладена деструктуризація address;
city = "Невідоме місто" — значення за замовчуванням для вкладеної властивості;
...additionalData — отримання решти властивостей.
Деструктуризація не створює повну копію об’єкта. Вона лише отримує його властивості.
Для примітивних значень змінна отримує саме значення:
const user = {
name: "Олена"
};
const { name } = user;
console.log(name); // ОленаДля вкладених об’єктів змінна міститиме посилання на той самий вкладений об’єкт:
const user = {
address: {
city: "Львів"
}
};
const { address } = user;
address.city = "Київ";
console.log(user.address.city); // КиївЗміна address.city змінила вкладений об’єкт у user, оскільки це те саме посилання.
const user = {
name: "Олена"
};
const { name: userName } = user;
console.log(userName); // Олена
// console.log(name); // Помилка: змінна name не створенаУ записі name: userName властивість називається name, а змінна — userName.
undefined або nullconst user = undefined;
// Помилка під час виконання:
// const { name } = user;Якщо значення може бути відсутнім, перевірте його або задайте значення за замовчуванням для всього об’єкта:
const user = undefined;
const { name = "Невідомий користувач" } = user || {};
console.log(name); // Невідомий користувачАбо використовуйте параметр за замовчуванням у функції:
function printName({ name = "Невідомий користувач" } = {}) {
console.log(name);
}
printName(); // Невідомий користувачnullconst user = {
name: null
};
const { name = "Невідомий користувач" } = user;
console.log(name); // nullЗначення за замовчуванням застосовується лише для undefined, а не для null.
const user = {
name: "Олена",
age: 28
};
// Помилка синтаксису:
// const { ...otherData, name } = user;Rest-властивість повинна бути останньою:
const { name, ...otherData } = user;Деструктуризація вкладеного об’єкта не створює глибоку копію. Якщо потрібно незалежно змінювати дані, створіть копію окремо:
const user = {
address: {
city: "Львів"
}
};
const {
address: originalAddress
} = user;
const copiedAddress = { ...originalAddress };
copiedAddress.city = "Київ";
console.log(user.address.city); // Львів
console.log(copiedAddress.city); // КиївДеструктуризація особливо корисна, коли:
потрібно використати кілька властивостей об’єкта;
функція приймає об’єкт із параметрами;
назви властивостей потрібно зробити зрозумілішими;
для необов’язкових властивостей потрібні значення за замовчуванням;
потрібно відокремити частину властивостей від решти.
Не варто надмірно ускладнювати деструктуризацію. Якщо вкладена структура дуже глибока або синтаксис важко прочитати, краще розділити операцію на кілька зрозумілих кроків.
Деструктуризація дає змогу отримувати властивості об’єкта в окремі змінні.
Базовий синтаксис: const { property } = object.
Для перейменування використовують запис property: newName.
Значення за замовчуванням задають через property = defaultValue.
Значення за замовчуванням застосовується, якщо властивість дорівнює undefined.
Оператор ... отримує решту властивостей в окремий об’єкт.
Деструктуризація підтримує вкладені об’єкти.
Її можна використовувати безпосередньо в параметрах функцій.
Деструктуризація не створює глибоку копію вкладених об’єктів.