Пошук уроків, статей та іншого контенту
Навчитеся читати, додавати, змінювати й видаляти властивості через крапковий та дужковий синтаксис.
Об’єкт у JavaScript зберігає дані у вигляді пар ключ — значення. Ключ називають властивістю об’єкта.
const user = {
name: "Олена",
age: 25,
isAdmin: false
};У цьому прикладі:
name, age та isAdmin — властивості;
"Олена", 25 та false — значення цих властивостей.
Найчастіше властивість читають через крапку:
const user = {
name: "Олена",
age: 25
};
console.log(user.name); // Олена
console.log(user.age); // 25Загальний вигляд:
object.propertyКрапковий синтаксис зручний, коли назва властивості відома заздалегідь і є коректним ідентифікатором JavaScript.
Ту саму властивість можна прочитати через квадратні дужки:
const user = {
name: "Олена",
age: 25
};
console.log(user["name"]); // Олена
console.log(user["age"]); // 25У дужках назву властивості потрібно записати як рядок.
user["name"];Це означає: знайти в user властивість із назвою "name".
Дужковий синтаксис особливо корисний, коли назва властивості зберігається у змінній:
const user = {
name: "Олена",
age: 25
};
const propertyName = "name";
console.log(user[propertyName]); // ОленаУ цьому випадку JavaScript спочатку отримує значення змінної propertyName, тобто "name", а потім шукає властивість із такою назвою.
Якщо використати крапковий синтаксис, буде шукатися властивість із буквальним іменем propertyName:
console.log(user.propertyName); // undefinedДля динамічних назв властивостей використовуйте дужки.
Нову властивість можна додати за допомогою оператора присвоєння.
const user = {
name: "Олена"
};
user.age = 25;
console.log(user);
// { name: "Олена", age: 25 }const user = {
name: "Олена"
};
user["isAdmin"] = false;
console.log(user);
// { name: "Олена", isAdmin: false }Дужковий синтаксис дає змогу використовувати назву, яка зберігається у змінній:
const product = {
name: "Ноутбук"
};
const propertyName = "price";
product[propertyName] = 35000;
console.log(product);
// { name: "Ноутбук", price: 35000 }Щоб змінити значення наявної властивості, потрібно присвоїти їй нове значення:
const user = {
name: "Олена",
age: 25
};
user.age = 26;
console.log(user.age); // 26Те саме через дужковий синтаксис:
const user = {
name: "Олена",
age: 25
};
user["name"] = "Марія";
console.log(user.name); // МаріяЯкщо властивості з такою назвою ще немає, JavaScript не повідомить про помилку — він створить нову властивість.
const user = {};
user.city = "Львів";
console.log(user.city); // ЛьвівОтже, одна й та сама операція може або змінити властивість, або додати її, якщо властивості ще не існує.
Для видалення властивості використовується оператор delete:
const user = {
name: "Олена",
age: 25
};
delete user.age;
console.log(user);
// { name: "Олена" }Видалення через дужковий синтаксис:
const user = {
name: "Олена",
age: 25
};
delete user["age"];
console.log(user);
// { name: "Олена" }Після видалення звернення до цієї властивості поверне undefined:
console.log(user.age); // undefinedundefinedЯкщо властивість не існує, під час читання JavaScript повертає undefined:
const user = {
name: "Олена"
};
console.log(user.email); // undefinedЦе не означає, що властивість автоматично існує зі значенням undefined. Властивість може бути відсутньою зовсім.
const user = {
name: "Олена",
email: undefined
};
console.log(user.email); // undefinedВ обох випадках результат однаковий, але в першому випадку властивості email немає, а в другому вона існує і має значення undefined.
За допомогою крапкового синтаксису можна використовувати не всі назви властивостей. Наприклад, у назві можуть бути пробіли або дефіси:
const book = {
title: "JavaScript",
"publication year": 2024,
"author-name": "Ірина"
};
console.log(book["publication year"]);
console.log(book["author-name"]);Такі властивості потрібно записувати через дужки та рядок.
Числові назви властивостей також зазвичай читають через дужки:
const scores = {
1: 10,
2: 20
};
console.log(scores[1]); // 10
console.log(scores["2"]); // 20Властивістю об’єкта може бути інший об’єкт:
const user = {
name: "Олена",
address: {
city: "Львів",
street: "Шевченка"
}
};
console.log(user.address.city); // Львів
console.log(user["address"]["street"]); // ШевченкаЗмінити вкладену властивість можна так:
user.address.city = "Київ";
console.log(user.address.city); // КиївВажливо, щоб проміжний об’єкт існував. Якщо user.address має значення undefined, звернення до user.address.city спричинить помилку.
const і зміна властивостейОб’єкт, оголошений через const, можна змінювати:
const user = {
name: "Олена"
};
user.name = "Марія";
user.age = 30;
console.log(user);
// { name: "Марія", age: 30 }const забороняє переприсвоїти саму змінну, але не забороняє змінювати вміст об’єкта.
const user = {
name: "Олена"
};
user = {
name: "Марія"
}; // TypeErrorПерший приклад працює, а другий спричиняє помилку, тому що змінній user намагаються призначити зовсім інший об’єкт.
const profile = {
name: "Андрій",
age: 28
};
// Читання властивостей
console.log(profile.name);
console.log(profile["age"]);
// Додавання нової властивості
profile.city = "Одеса";
// Зміна наявної властивості
profile["age"] = 29;
// Додавання властивості з динамічною назвою
const propertyName = "isOnline";
profile[propertyName] = true;
// Видалення властивості
delete profile.city;
console.log(profile);
// { name: "Андрій", age: 29, isOnline: true }const user = {
name: "Олена"
};
console.log(user[name]); // ReferenceError, якщо змінної name немаєЯкщо назву властивості записують без змінної, її потрібно взяти в лапки:
console.log(user["name"]); // Оленаconst user = {
name: "Олена"
};
const propertyName = "name";
console.log(user.propertyName); // undefinedПравильний варіант:
console.log(user[propertyName]); // Оленаconst firstUser = {
name: "Олена"
};
const secondUser = {
name: "Марія"
};
firstUser.name = "Ірина";
console.log(secondUser.name); // МаріяЗміна firstUser не змінює secondUser, навіть якщо в них є властивості з однаковими назвами.
undefinedconst user = {
name: "Олена",
age: 25
};
user.age = undefined;
console.log(user);
// { name: "Олена", age: undefined }Властивість age усе ще існує. Щоб саме видалити її, використовуйте delete:
delete user.age;
console.log(user);
// { name: "Олена" }Для читання властивості використовуйте object.property або object["property"].
Крапковий синтаксис зручний для відомих простих назв.
Дужковий синтаксис потрібен для динамічних назв і назв зі спеціальними символами.
Присвоєння нової властивості додає її до об’єкта.
Присвоєння наявній властивості змінює її значення.
Оператор delete видаляє властивість.
Звернення до відсутньої властивості повертає undefined.
Об’єкт, оголошений через const, можна змінювати, але не можна замінити іншим об’єктом.