Пошук уроків, статей та іншого контенту
Створите об’єкти літералами та зрозумієте роль властивостей і значень у їхній структурі.
Об’єкти — це одна з основних структур даних у JavaScript. Вони дають змогу зберігати пов’язані між собою дані у форматі властивість — значення.
Наприклад, інформацію про користувача зручно зберігати в одному об’єкті:
const user = {
name: "Олена",
age: 25,
isOnline: true
};У цьому прикладі:
name, age і isOnline — властивості об’єкта;
"Олена", 25 і true — значення цих властивостей.
Об’єкт можна створити за допомогою фігурних дужок {}. Такий запис називається літералом об’єкта:
const book = {
title: "Кобзар",
author: "Тарас Шевченко",
year: 1840
};Властивості записують усередині фігурних дужок. Властивість і її значення розділяють двокрапкою:
property: valueКілька властивостей розділяють комами:
const product = {
name: "Навушники",
price: 1500,
available: true
};Значенням властивості може бути будь-який тип даних JavaScript:
const data = {
text: "Рядок",
count: 10,
active: false,
nothing: null,
items: [1, 2, 3]
};Також значенням може бути інший об’єкт або функція.
Можна створити порожній об’єкт і додати властивості пізніше:
const user = {};Поки що об’єкт user не має жодної властивості.
Найпоширеніший спосіб отримати значення властивості — використовувати крапку:
const user = {
name: "Олена",
age: 25
};
console.log(user.name); // Олена
console.log(user.age); // 25Загальний синтаксис:
object.propertyТочкова нотація проста й зручна, коли назва властивості відома заздалегідь і є коректним ідентифікатором.
Властивість також можна отримати через квадратні дужки:
const user = {
name: "Олена",
age: 25
};
console.log(user["name"]); // Олена
console.log(user["age"]); // 25У дужках назву властивості записують як рядок.
Дужкова нотація особливо корисна, коли назва властивості зберігається в змінній:
const user = {
name: "Олена",
age: 25
};
const propertyName = "name";
console.log(user[propertyName]); // ОленаЯкщо використати точкову нотацію, JavaScript шукатиме властивість із буквальним ім’ям propertyName:
console.log(user.propertyName); // undefinedНазви властивостей зазвичай записують без лапок:
const car = {
brand: "Toyota",
model: "Corolla"
};Якщо назва містить пробіли або спеціальні символи, її потрібно записати в лапках:
const profile = {
name: "Олена",
"favorite color": "синій"
};
console.log(profile["favorite color"]); // синійДля такої властивості не можна використати звичайну точкову нотацію:
// Некоректний синтаксис:
// console.log(profile.favorite color);На практиці краще надавати властивостям прості назви без пробілів, наприклад favoriteColor.
Об’єкт, оголошений через const, не можна переприсвоїти повністю, але його властивості можна змінювати:
const user = {
name: "Олена",
age: 25
};
user.age = 26;
console.log(user.age); // 26Також можна використовувати дужкову нотацію:
const user = {
name: "Олена",
age: 25
};
user["name"] = "Ірина";
console.log(user.name); // Іринаconst забороняє змінити посилання на об’єкт, але не забороняє змінювати його вміст:
const user = {
name: "Олена"
};
user.name = "Ірина"; // ДозволеноСпроба присвоїти змінній новий об’єкт спричинить помилку:
const user = {
name: "Олена"
};
// user = { name: "Ірина" }; // ПомилкаЯкщо властивості ще не існує, присвоєння створить її:
const user = {
name: "Олена"
};
user.age = 25;
user.isOnline = true;
console.log(user);Після виконання код об’єкт матиме три властивості:
{
name: "Олена",
age: 25,
isOnline: true
}Додати властивість можна і через квадратні дужки:
const settings = {};
settings["theme"] = "dark";
settings["language"] = "uk";
console.log(settings.theme); // darkДля видалення властивості використовують оператор delete:
const user = {
name: "Олена",
age: 25,
isOnline: true
};
delete user.isOnline;
console.log(user);Властивість isOnline після цього більше не існує.
Перевірити наявність властивості можна за допомогою оператора in:
const user = {
name: "Олена",
age: 25
};
console.log("name" in user); // true
console.log("isOnline" in user); // falseЯкщо звернутися до властивості, якої немає, JavaScript поверне undefined:
const user = {
name: "Олена"
};
console.log(user.age); // undefinedЦе не помилка саме по собі. Але під час роботи з такими значеннями варто перевіряти, чи існує потрібна властивість.
const user = {
name: "Олена"
};
if (user.age === undefined) {
console.log("Вік не вказано");
}Об’єкти можуть містити інші об’єкти як значення властивостей:
const user = {
name: "Олена",
address: {
city: "Львів",
street: "Наукова"
}
};
console.log(user.address.city); // Львів
console.log(user.address.street); // НауковаЩоб змінити властивість вкладеного об’єкта:
user.address.city = "Київ";
console.log(user.address.city); // КиївОб’єкти також можуть містити масиви:
const course = {
title: "JavaScript",
topics: ["змінні", "об’єкти", "масиви"]
};
console.log(course.topics[0]); // змінніЯкщо властивість містить функцію, її називають методом об’єкта:
const user = {
name: "Олена",
sayHello() {
console.log(`Привіт! Мене звати ${this.name}.`);
}
};
user.sayHello(); // Привіт! Мене звати Олена.Ключове слово this у цьому методі посилається на поточний об’єкт user.
Методи дають змогу зберігати в об’єкті не лише дані, а й дії, пов’язані з цими даними.
Якщо назва змінної збігається з назвою властивості, можна використати скорочений синтаксис:
const name = "Олена";
const age = 25;
const user = {
name,
age
};
console.log(user);Це еквівалентно такому запису:
const user = {
name: name,
age: age
};Скорочений запис часто використовують під час створення об’єктів зі змінних.
У наступному прикладі створюється об’єкт товару, зчитуються його властивості, змінюється ціна та додається нова властивість:
const product = {
name: "Механічна клавіатура",
price: 2500,
category: "Аксесуари",
inStock: true
};
console.log(`Товар: ${product.name}`);
console.log(`Ціна: ${product.price} грн`);
product.price = 2300;
product.discount = 10;
if (product.inStock) {
console.log("Товар є в наявності");
}
console.log(`Нова ціна: ${product.price} грн`);
console.log(`Знижка: ${product.discount}%`);У цьому прикладі:
Об’єкт створено за допомогою літерала.
Значення властивостей виведено в консоль.
Значення price змінено.
Додано нову властивість discount.
Значення inStock використано в умовній конструкції.
Неправильно:
const user = {
name: "Олена"
age: 25
};Між властивостями має бути кома:
const user = {
name: "Олена",
age: 25
};const user = {
name: "Олена"
};
const propertyName = "name";
console.log(user[propertyName]); // Олена
console.log(user.propertyName); // undefineduser[propertyName] використовує значення змінної, а user.propertyName шукає властивість із назвою propertyName.
const user = {};
console.log(user.address.city); // ПомилкаВластивість address має значення undefined, тому JavaScript не може отримати city з неіснуючого об’єкта.
Безпечніший варіант — перевірити наявність об’єкта:
if (user.address) {
console.log(user.address.city);
}Або використати оператор optional chaining:
console.log(user.address?.city); // undefinedconst propertyName = "name";
const user = {
name: "Олена"
};
console.log(user[propertyName]); // Олена
console.log(user["propertyName"]); // undefinedpropertyName і "propertyName" — різні випадки. Перше — змінна, друге — буквальний рядок.
Об’єкт зручно створювати за допомогою літерала {}.
Об’єкт складається з властивостей і їхніх значень.
Властивості можуть містити рядки, числа, логічні значення, масиви, інші об’єкти та функції.
Для доступу до властивості використовують точкову або дужкову нотацію.
Властивості можна змінювати, додавати й видаляти.
Дужкова нотація корисна, коли назва властивості зберігається у змінній.
Об’єкти можуть містити вкладені об’єкти та методи.
Оголошення об’єкта через const не забороняє змінювати його властивості.