Пошук уроків, статей та іншого контенту
Навіщо потрібні об'єкти, як створювати, читати й змінювати властивості та методи.
Уявіть, що потрібно зберегти дані про користувача: ім'я, вік, email. Без об'єктів довелося б тримати три окремі змінні (userName, userAge, userEmail), передавати їх окремими аргументами в кожну функцію й вручну стежити, що вони стосуються однієї людини. Об'єкт групує пов'язані дані в одну структуру — це основний спосіб моделювати «річ із властивостями» в JavaScript.
const user = {
name: "Олена",
age: 28,
email: "olena@example.com",
};Є два способи прочитати властивість — вони рівнозначні, коли ключ відомий заздалегідь:
user.name; // "Олена"
user["name"]; // "Олена" — те саме значенняКвадратні дужки обов'язкові, коли ключ — динамічний (у змінній) або містить символи, недопустимі для крапкової нотації (пробіли, дефіси, починається з цифри):
const key = "age";
user[key]; // 28 — крапкою так не можна: user.key поверне undefined
const product = { "product-id": "A1", "in stock": true };
product["product-id"]; // "A1" — крапкою неможливо через дефісuser.city = "Львів"; // додати нову властивість
user.age = 29; // змінити наявну
delete user.email; // видалити властивість повністюКоли значення властивості — функція, її називають методом. Скорочений синтаксис зручніший за function expression:
const user = {
name: "Олена",
greet() {
// скорочений синтаксис методу — те саме, що greet: function () { ... }
return `Привіт, я ${this.name}`;
},
};
user.greet(); // "Привіт, я Олена"Усередині звичайного методу this посилається на об'єкт, через який метод викликали (user). Детально про правила визначення this — у модулі «JavaScript під капотом».
Коли ім'я властивості збігається з іменем змінної, можна не повторювати його двічі:
const name = "Максим";
const age = 30;
const user = { name, age }; // те саме, що { name: name, age: age }Квадратні дужки прямо в літералі об'єкта дозволяють обчислити ім'я ключа на льоту:
const field = "email";
const user = {
name: "Ірина",
[field]: "iryna@example.com", // ключ обчислено зі змінної field
};
user.email; // "iryna@example.com"Пряма перевірка через порівняння з undefined підводить, якщо властивість навмисно дорівнює undefined:
const user = { name: "Петро", age: undefined };
user.age !== undefined; // false — виглядає, ніби властивості немає, хоча вона є
"age" in user; // true — правильний спосіб перевірити саме наявність ключаТри методи для отримання вмісту об'єкта у вигляді масивів — зручно для перебору чи трансформації:
const scores = { math: 90, physics: 85, chemistry: 78 };
Object.keys(scores); // ["math", "physics", "chemistry"]
Object.values(scores); // [90, 85, 78]
Object.entries(scores); // [["math", 90], ["physics", 85], ["chemistry", 78]]function average(scores) {
const values = Object.values(scores);
const total = values.reduce((sum, score) => sum + score, 0);
return total / values.length;
}
average({ math: 90, physics: 85, chemistry: 78 }); // 84.33...reduce детально розглянемо за кілька уроків — тут достатньо розуміти, що він підсумовує масив значень.
Перевірка властивості через !== undefined замість оператора in, коли значення саме по собі може бути undefined.
Спроба звернутись через крапку до ключа з пробілом чи дефісом — потрібні квадратні дужки.
Забування, що delete видаляє властивість повністю, а не встановлює її в undefined чи null.
Об'єкти групують пов'язані дані й поведінку (методи) в одну структуру. Крапкова нотація зручніша для статичних, наперед відомих ключів; квадратні дужки — обов'язкові для динамічних ключів. Object.keys/values/entries перетворюють об'єкт на масив, з яким уже можна працювати методами масивів — про них далі в цьому модулі.
Спробуйте самостійно
Створіть об'єкт product з полями title, price і методом getFormattedPrice(), що повертає рядок на кшталт "299 грн", використовуючи this.price усередині методу.