Пошук уроків, статей та іншого контенту
Розглянете об'єкти JavaScript як набори властивостей і методів та навчитеся створювати їх літералами.
Об'єкт у JavaScript — це структура даних, яка зберігає пов'язані значення. Ці значення називають властивостями.
Наприклад, інформацію про користувача зручно зберігати в одному об'єкті:
const user = {
name: "Олена",
age: 25,
isAdmin: false
};
console.log(user);Об'єкт user має три властивості:
name — рядок "Олена";
age — число 25;
isAdmin — логічне значення false.
Об'єкти допомагають описувати сутності програми: користувача, товар, автомобіль, повідомлення або налаштування.
Найпоширеніший спосіб створити об'єкт — використати літерал об'єкта.
Літерал об'єкта записують у фігурних дужках {}. Усередині вказують властивості у форматі:
ключ: значенняconst book = {
title: "Кобзар",
author: "Тарас Шевченко",
year: 1840
};У цьому прикладі:
title, author і year — ключі властивостей;
"Кобзар", "Тарас Шевченко" і 1840 — значення властивостей.
Властивості розділяють комами:
const product = {
name: "Ноутбук",
price: 35000,
inStock: true
};Остання властивість може мати кому, але зазвичай її додають лише за потреби. Такий запис також коректний:
const product = {
name: "Ноутбук",
price: 35000,
inStock: true,
};Щоб отримати властивість, після назви об'єкта ставлять крапку та вказують ім'я властивості:
const user = {
name: "Олена",
age: 25
};
console.log(user.name); // Олена
console.log(user.age); // 25Точкова нотація проста й зручна, якщо назва властивості відома заздалегідь.
Властивість також можна отримати за допомогою квадратних дужок:
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.
Порівняйте:
console.log(user.propertyName); // undefined
console.log(user[propertyName]); // Оленаuser.propertyName шукає властивість із буквальним ім'ям propertyName, а user[propertyName] використовує значення змінної.
Властивість об'єкта можна змінити після створення:
const user = {
name: "Олена",
age: 25
};
user.age = 26;
console.log(user.age); // 26Змінити властивість можна і через дужкову нотацію:
user["name"] = "Андрій";
console.log(user.name); // Андрійconst і зміна об'єктаЯкщо об'єкт оголошено через const, його властивості все одно можна змінювати:
const settings = {
theme: "light"
};
settings.theme = "dark";
console.log(settings.theme); // darkconst забороняє присвоїти змінній інший об'єкт, але не забороняє змінювати властивості вже створеного об'єкта.
const settings = {
theme: "light"
};
// Це дозволено:
settings.theme = "dark";
// Це спричинить помилку:
// settings = {};Якщо потрібно повністю замінити об'єкт, використовуйте let:
let settings = {
theme: "light"
};
settings = {
theme: "dark"
};Нову властивість можна додати звичайним присвоєнням:
const user = {
name: "Олена"
};
user.age = 25;
user.isActive = true;
console.log(user);Тепер об'єкт має властивості name, age та isActive.
Для видалення властивості використовують оператор delete:
const user = {
name: "Олена",
age: 25
};
delete user.age;
console.log(user); // { name: "Олена" }Оператор delete видаляє властивість, але зазвичай у прикладному коді варто обережно змінювати структуру об'єктів, щоб вона залишалася зрозумілою.
Значеннями властивостей можуть бути всі основні типи JavaScript:
const profile = {
name: "Олена", // рядок
age: 25, // число
isOnline: true, // логічне значення
middleName: null, // null
email: undefined, // undefined
skills: ["HTML", "CSS"], // масив
address: { // інший об'єкт
city: "Львів",
country: "Україна"
}
};Об'єкт може містити масиви й інші об'єкти. Завдяки цьому можна описувати складні дані.
Об'єкт, який міститься всередині іншого об'єкта, називають вкладеним об'єктом:
const user = {
name: "Олена",
address: {
city: "Львів",
street: "Вулиця Шевченка"
}
};
console.log(user.address.city); // Львів
console.log(user.address.street); // Вулиця ШевченкаЩоб отримати вкладену властивість, використовують кілька крапок:
object.property1.property2Вкладені об'єкти можна змінювати так само:
user.address.city = "Київ";
console.log(user.address.city); // КиївВластивість, значенням якої є функція, називають методом.
Метод дає об'єкту можливість виконувати дію:
const user = {
name: "Олена",
sayHello: function () {
console.log("Привіт!");
}
};
user.sayHello(); // Привіт!У літералі об'єкта метод можна записати коротше:
const user = {
name: "Олена",
sayHello() {
console.log("Привіт!");
}
};
user.sayHello(); // Привіт!Метод викликають за допомогою круглих дужок ().
thisУсередині методу this зазвичай посилається на об'єкт, якому належить метод:
const user = {
name: "Олена",
introduce() {
console.log(`Мене звати ${this.name}.`);
}
};
user.introduce(); // Мене звати Олена.this.name означає властивість name поточного об'єкта user.
Методи можуть використовувати й змінювати властивості об'єкта:
const counter = {
value: 0,
increase() {
this.value += 1;
}
};
counter.increase();
counter.increase();
console.log(counter.value); // 2Якщо звернутися до властивості, якої немає, JavaScript поверне undefined:
const user = {
name: "Олена"
};
console.log(user.age); // undefinedДля перевірки наявності властивості можна використати оператор in:
const user = {
name: "Олена",
age: 25
};
console.log("name" in user); // true
console.log("email" in user); // falseОператор in перевіряє, чи існує властивість із вказаним ім'ям.
Також можна порівняти результат доступу з undefined, але цей підхід не завжди відрізняє відсутню властивість від властивості, яка явно має значення undefined.
Зазвичай ключі об'єкта записують без лапок:
const user = {
name: "Олена",
age: 25
};Якщо ім'я містить пробіли або спеціальні символи, його потрібно записати в лапках:
const article = {
title: "Основи JavaScript",
"published by": "Fullstack",
"reading-time": 10
};
console.log(article["published by"]);
console.log(article["reading-time"]);Для таких властивостей точкова нотація не підходить:
// Синтаксично некоректний запис:
// article.published byЯкщо назва змінної збігається з назвою властивості, можна використати скорочений запис:
const name = "Олена";
const age = 25;
const user = {
name,
age
};
console.log(user); // { name: "Олена", age: 25 }Без скорочення цей самий об'єкт виглядав би так:
const user = {
name: name,
age: age
};Скорочений запис часто використовують під час створення об'єктів із даних змінних.
Розглянемо повний приклад із властивостями та методом:
const productName = "Навушники";
const productPrice = 1800;
const product = {
name: productName,
price: productPrice,
quantity: 2,
getTotalPrice() {
return this.price * this.quantity;
},
increaseQuantity() {
this.quantity += 1;
}
};
console.log(product.name); // Навушники
console.log(product.getTotalPrice()); // 3600
product.increaseQuantity();
console.log(product.quantity); // 3
console.log(product.getTotalPrice()); // 5400Метод getTotalPrice обчислює загальну вартість товарів, а increaseQuantity збільшує кількість на одиницю.
Неправильно:
const user = {
name: "Олена"
};
const propertyName = "name";
// Неправильно: JavaScript шукає змінну name
// console.log(user[name]);Правильно:
console.log(user["name"]);
console.log(user[propertyName]);Не кожна властивість є методом:
const user = {
name: "Олена"
};
// Неправильно:
// user.name();user.name містить рядок, тому викликати його як функцію не можна.
const user = {
sayHello() {
console.log("Привіт!");
}
};
user.sayHello; // Отримання функції
user.sayHello(); // Виклик функціїЩоб метод виконався, потрібні круглі дужки.
const user = {};
// Такий код спричинить помилку:
// console.log(user.address.city);Властивість address не існує, тому JavaScript не може отримати з неї city.
Для безпечного доступу можна використати оператор опціонального ланцюжка ?.:
console.log(user.address?.city); // undefinedОператор ?. зупиняє звернення, якщо попередня властивість має значення null або undefined.
Створіть об'єкт student, який містить:
ім'я студента;
вік;
масив навичок;
вкладений об'єкт course з назвою курсу;
метод introduce, який виводить у консоль ім'я студента та назву курсу.
Приклад розв'язання:
const student = {
name: "Іван",
age: 22,
skills: ["HTML", "CSS", "JavaScript"],
course: {
title: "Основи JavaScript"
},
introduce() {
console.log(
`Мене звати ${this.name}. Я вивчаю курс "${this.course.title}".`
);
}
};
student.introduce();
console.log(student.skills[0]);Об'єкт — це набір пов'язаних властивостей і методів.
Об'єкт-літерал створюють за допомогою фігурних дужок {}.
Властивості записують у форматі ключ: значення.
Для доступу до властивостей використовують точкову або дужкову нотацію.
Властивості можна читати, змінювати, додавати та видаляти.
Значенням властивості може бути інший об'єкт або масив.
Метод — це властивість, яка містить функцію.
Усередині методу this зазвичай посилається на поточний об'єкт.
Оператор in допомагає перевірити наявність властивості.