Пошук уроків, статей та іншого контенту
Дізнайтеся, як об'єкти дозволяють об'єднувати пов'язані дані у структури з властивостями та значеннями. Розгляньте базове створення, читання та зміну властивостей об'єкта.
Об’єкт — це тип даних JavaScript, який дає змогу об’єднати пов’язані дані в одну структуру.
Об’єкт складається з:
властивостей — назв характеристик;
значень — даних, які відповідають цим властивостям.
Наприклад, інформацію про користувача зручно зберігати в одному об’єкті:
const user = {
name: "Олена",
age: 25,
isOnline: true
};У цьому прикладі:
name, age та isOnline — властивості;
"Олена", 25 та true — значення властивостей.
Об’єкт записують у фігурних дужках {}. Властивості розділяють комами, а назву властивості та її значення — двокрапкою.
Об’єкт можна створити за допомогою літерала об’єкта:
const product = {
title: "Клавіатура",
price: 1200,
inStock: true
};Значеннями властивостей можуть бути різні типи даних:
const book = {
title: "Кобзар",
year: 1840,
available: true,
author: {
name: "Тарас Шевченко"
},
tags: ["поезія", "класика"]
};У цьому об’єкті:
title містить рядок;
year містить число;
available містить логічне значення;
author містить інший об’єкт;
tags містить масив.
Найпоширеніший спосіб отримати значення властивості — використати крапку:
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]); // ОленаУ цьому випадку user[propertyName] означає: отримати властивість, назва якої зберігається у змінній propertyName.
Якщо назва властивості містить пробіли або спеціальні символи, для неї використовують рядок і дужкову нотацію:
const movie = {
title: "Матриця",
"release year": 1999
};
console.log(movie["release year"]); // 1999Запис movie.release year є неправильним, оскільки JavaScript сприйме year як окремий елемент виразу.
Значення властивості можна змінити після створення об’єкта:
const user = {
name: "Олена",
age: 25
};
user.age = 26;
console.log(user.age); // 26Також можна використовувати дужкову нотацію:
user["name"] = "Ірина";
console.log(user.name); // ІринаКлючове слово const забороняє переприсвоїти змінну, але не забороняє змінювати властивості об’єкта, на який вона посилається:
const settings = {
theme: "light"
};
settings.theme = "dark";
console.log(settings.theme); // darkОднак такий код спричинить помилку:
const settings = {
theme: "light"
};
// settings = {}; // Помилка: змінну const не можна переприсвоїтиЯкщо властивості ще немає, присвоєння створить її:
const user = {
name: "Олена"
};
user.age = 25;
user["isOnline"] = true;
console.log(user);
// { name: "Олена", age: 25, isOnline: true }Назви властивостей можуть бути динамічними:
const user = {};
const propertyName = "email";
user[propertyName] = "olena@example.com";
console.log(user.email); // olena@example.comДля видалення властивості використовують оператор delete:
const user = {
name: "Олена",
age: 25,
email: "olena@example.com"
};
delete user.email;
console.log(user);
// { name: "Олена", age: 25 }Після видалення властивість більше не належить цьому об’єкту.
Іноді потрібно перевірити, чи містить об’єкт певну властивість. Для цього використовують оператор in:
const user = {
name: "Олена",
age: 25
};
console.log("name" in user); // true
console.log("email" in user); // falseТакож можна порівняти отримане значення з undefined, але оператор in чіткіше показує, що перевіряється саме наявність властивості:
const user = {
name: undefined
};
console.log("name" in user); // trueУ цьому прикладі властивість name існує, хоча її значення дорівнює undefined.
Об’єкт може містити інші об’єкти. Це дає змогу створювати більш структуровані дані:
const user = {
name: "Олена",
address: {
city: "Львів",
street: "Городоцька"
}
};
console.log(user.address.city); // Львів
console.log(user.address.street); // ГородоцькаЩоб отримати вкладену властивість, використовують кілька крапок:
object.firstProperty.secondPropertyЗмінити вкладену властивість можна так само:
user.address.city = "Київ";
console.log(user.address.city); // КиївЯкщо проміжна властивість може бути відсутньою, прямий доступ до неї може спричинити помилку:
const user = {};
console.log(user.address.city); // ПомилкаБезпечніше використовувати optional chaining ?.:
console.log(user.address?.city); // undefinedОператор ?. зупиняє звернення до властивостей, якщо попереднє значення дорівнює null або undefined.
Масиви використовують для впорядкованого списку значень, а об’єкти — для значень із назвами властивостей.
Масив:
const colors = ["синій", "зелений", "жовтий"];Об’єкт:
const product = {
name: "Футболка",
color: "синій",
size: "M"
};Вони можуть використовуватися разом:
const student = {
name: "Андрій",
courses: ["JavaScript", "HTML", "CSS"]
};
console.log(student.courses[0]); // JavaScriptРозглянемо об’єкт товару. Програма прочитає його властивості, змінить ціну, додасть знижку та виведе оновлену інформацію:
const product = {
name: "Навушники",
price: 1500,
inStock: true
};
// Читаємо властивості об'єкта
console.log(`Товар: ${product.name}`);
console.log(`Початкова ціна: ${product.price} грн`);
// Змінюємо значення властивості
product.price = 1200;
// Додаємо нову властивість
product.discount = 20;
// Виводимо оновлені дані
console.log(`Нова ціна: ${product.price} грн`);
console.log(`Знижка: ${product.discount}%`);
console.log(`Є в наявності: ${product.inStock}`);Результат:
Товар: Навушники
Початкова ціна: 1500 грн
Нова ціна: 1200 грн
Знижка: 20%
Є в наявності: trueОб’єкт може містити не лише дані, а й функції. Функцію, яка є властивістю об’єкта, називають методом:
const user = {
name: "Олена",
sayHello: function () {
console.log(`Привіт, я ${this.name}`);
}
};
user.sayHello(); // Привіт, я ОленаКоротший синтаксис методу:
const user = {
name: "Олена",
sayHello() {
console.log(`Привіт, я ${this.name}`);
}
};
user.sayHello();Ключове слово this у цьому прикладі посилається на поточний об’єкт user.
На початковому етапі важливо запам’ятати основне: об’єкти зберігають пов’язані дані, а методи дають об’єкту можливість виконувати дії.
Для перевірки типу значення використовують оператор typeof:
const user = {
name: "Олена"
};
console.log(typeof user); // objectМасиви також мають результат object:
console.log(typeof [1, 2, 3]); // object
console.log(typeof null); // objectЦе особливість JavaScript. Для перевірки, чи є значення масивом, використовують Array.isArray():
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({ name: "Олена" })); // falseОб’єкти порівнюються за посиланням, а не за вмістом:
const firstUser = {
name: "Олена"
};
const secondUser = {
name: "Олена"
};
console.log(firstUser === secondUser); // falseХоча об’єкти мають однакові властивості, це два різні об’єкти в пам’яті.
Якщо дві змінні посилаються на один і той самий об’єкт, порівняння поверне true:
const user = {
name: "Олена"
};
const anotherUser = user;
console.log(user === anotherUser); // trueЗміна через одну змінну буде видимою через іншу:
anotherUser.name = "Ірина";
console.log(user.name); // Іринаconst user = {
name: "Олена"
};
const propertyName = "name";
console.log(user.propertyName); // undefined
console.log(user[propertyName]); // Оленаuser.propertyName шукає властивість із буквальним ім’ям propertyName. Щоб використати значення змінної, потрібні квадратні дужки.
const user = {
name: "Олена"
};
console.log(user.email); // undefinedЯкщо властивість не існує, JavaScript повертає undefined.
const user = {
name: "Олена",
age: 25
};Між властивостями має бути кома. Без неї виникне синтаксична помилка.
const movie = {
"release year": 1999
};
console.log(movie["release year"]); // правильноДля таких властивостей використовуйте квадратні дужки.
nullconst user = null;
// console.log(user.name); // ПомилкаПеред доступом до вкладених даних перевіряйте, чи існує об’єкт, або використовуйте optional chaining:
console.log(user?.name); // undefinedОб’єкт зберігає пов’язані дані у вигляді властивостей і значень.
Об’єкт створюють у фігурних дужках {}.
Властивість можна прочитати через крапку: user.name.
Для динамічної назви властивості використовують дужки: user[propertyName].
Властивості можна змінювати та додавати після створення об’єкта.
Для видалення властивості використовують delete.
Об’єкти можуть містити вкладені об’єкти, масиви та функції.
const забороняє переприсвоїти змінну, але дозволяє змінювати властивості об’єкта.
Об’єкти порівнюються за посиланням, а не за вмістом.