object – тип даних JavaScript, котрий використовується для зберігання наборів значень (примітивні значення або інші об’єкти), а отримання доступу до цих значень відбувається за ім’ям (ключем). В JavaScript об’єкти використовуються регулярно, вони одна з основ мови.
object дозволяє групувати пов’язані дані та/або функціональні можливості. Зазвичай об’єкти складаються з декількох змінних та функцій, котрі називаються властивостями та методами. object дає змогу будувати більш складні структури (ніж просто значення на кшталт примітивів).
В цьому записі буде розглянуто:
- Створення object
- Властивості об’єкта
- Використання ключового слова this
- Синтаксис квадратних дужок
- Скорочені властивості
- Визначення getters та setters
Створення object
Створення порожнього об’єкта, за допомогою літералу object, в котрому використовуються фігурні дужки: {…}
let obj = {};
console.log(typeof obj);
// OUTPUT: objectСтворення порожнього об’єкта, за допомогою конструктора object, з використанням ключового слова new:
let obj = new Object();
console.log(typeof obj);
// OUTPUT: objectЗазвичай використовують варіант з фігурними дужками {…}. Таке оголошення називають літералом об’єкта або літеральною нотацією.
При використанні літерального синтаксису {…}, можна одразу додати в об’єкт властивості, у вигляді пар «ключ: значення»:
let person = {
name: 'Тарас',
age: 30,
};Об’єкт person зараз має дві властивості – name та age.
Створення об’єкта використовуючи функцію-конструктор:
function Person(name, age) {
this.name = name;
this.age = age;
this.info = function () {
return `${this.name} ${this.age}`;
};
}
let personOne = new Person('Любомир', 30);
let personTwo = new Person('Вікторія', 25);
console.log(personOne.info()); // OUTPUT: Любомир 30
console.log(personTwo.info()); // OUTPUT: Вікторія 25Цей спосіб дозволяє створити багато об’єктів по одному шаблону, з різними значеннями властивостей.
Створення об’єкта використовуючи метод JavaScript Object.create():
let person = {
firstName: 'Валентин',
lastName: 'Дубко',
fullName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
let employee = Object.create(person, {
job: {
value: 'менеджер',
},
});
console.log(employee.fullName()); // OUTPUT: Валентин Дубко
console.log(employee.job); // OUTPUT: менеджерЦей спосіб дає змогу створити новий об’єкт з заданого об’єкта-прототипу. В наведеному прикладі, для створення об’єкта employee, було використано прототип person, таким чином отримавши новий об’єкт з розширеними властивостями.
Властивості об’єкта
Для звернення до властивостей об’єкта використовується запис «ім’я (ключ) властивості + крапка»:
let person = {
name: 'Тарас',
age: 30,
};
console.log(person.name);
// OUTPUT: ТарасОб’єкти JavaScript є динамічними, тому що властивості зазвичай можна додавати і видаляти. Наприклад додати нову властивість до об’єкту:
let person = {
name: 'Тарас',
age: 30,
};
person.isActive = true;
console.log(person.isActive);
// OUTPUT: trueА також видаляти властивості використовуючи оператор delete:
let person = {
name: 'Тарас',
age: 30,
};
delete person.age;
console.log(person.age);
// OUTPUT: undefinedПеревірка існування властивості в об’єкті:
let person = {
name: 'Тарас',
age: 30,
};
console.log('name' in person);
// OUTPUT: trueОтримати масив з іменами всіх властивостей об’єкту:
let person = {
name: 'Тарас',
age: 30,
};
console.log(Object.keys(person));
// OUTPUT: [ 'name', 'age' ]Перебір властивостей об’єкта за допомогою циклу for:
let person = {
name: 'Тарас',
age: 30,
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// OUTPUT:
// name: Тарас
// age: 30Об’єкти також можуть зберігати в собі інші об’єкти і функції:
let person = {
name: 'Тарас',
age: 30,
addition: {
isActive: true,
},
info: function() {
console.log(`${this.name} : ${this.age} : ${this.addition.isActive}`);
},
};
person.info();
// OUTPUT:
// Тарас : 30 : trueНа що слід звернути увагу в прикладі вище:
- об’єкт person містить вкладений об’єкт addition, та метод info
- метод info використовує ключове слово this, котре є посиланням на поточний об’єкт (завдяки чому можна отримати доступ до його властивостей) (рядок 8)
- для виклику метода, до ім’я (ключа) потрібно додати круглі дужки: в моєму прикладі це person.info() (рядок 12)
Наостанок давайте подивимось, що буде якщо спробувати роздрукувати весь об’єкт console.log(person):
let person = {
name: 'Тарас',
age: 30,
addition: {
isActive: true,
},
info: function () {
console.log(`${this.name} : ${this.age} : ${this.addition.isActive}`);
},
};
console.log(person);Результат:
{
name: 'Тарас',
age: 30,
addition: { isActive: true },
info: [Function: info]
}Використання ключового слова this
В JavaScript спеціальне ключове слово this, можна використовувати для посилання на поточний об’єкт:
function Person(name, age) {
this.name = name;
this.age = age;
}
function sayHi() {
console.log(`Привіт, моє ім'я ${this.name}`);
}
user = new Person('Валентин', 28);
manager = new Person('Оксана', 23);
// додаємо функцію sayHi до обох об'єктів
user.sayHi = sayHi;
manager.sayHi = sayHi;
user.sayHi(); // OUTPUT: Привіт, моє ім'я Валентин
manager.sayHi(); // OUTPUT: Привіт, моє ім'я ОксанаВ прикладі вище визначено два об’єкти Person. Кожен об’єкт має власне ім’я та вік. Функція sayHi() використовує ключове слово this, отримуючи значення властивості поточного об’єкта (а саме this.name), завдяки чому виводиться повідомлення з ім’ям відповідного об’єкта, до якого вона приєднана.
Синтаксис квадратних дужок
Ім’я властивості об’єкта може бути будь-яким рядком (включаючи порожній), або значенням типу symbol JavaScript. В звичайних випадках, як:
let person = {
name: "Тарас",
age: 30,
}
console.log(person.name);для доступу до властивостей використовується крапкова нотація. Однак у випадках, коли ім’я не є допустимим ідентифікатором JavaScript, крапкова нотація працювати не буде. Наприклад коли ім’я має пробіл:
let obj = {};
obj['date created'] = 'value';
console.log(obj['date created']);На такі випадки існує альтернативний спосіб доступу до властивостей – через квадратні дужки. Такий синтаксис працює для присвоєння значення, отримання та видалення властивостей об’єкту.
Ця нотація також дає змогу звернутися до властивості, ім’я котрої є результатом виразу. Наприклад, ім’я властивості може зберігатися у змінній та визначатися динамічно, вже під час виконання програми:
const prompt = require("prompt-sync")({sigint:true});
let person = {
name: 'Тарас',
age: 30,
};
let key = prompt('Введіть властивість person: ');
console.log(person[key]);В цьому прикладі, змінна key буде обчислена під час виконання коду, в залежності від користувацького вводу. Після чого вона може бути використана для доступу до властивості. Це дає більшу гнучкість. Запис “через крапку” такого не дозволяє.
Результат:
Скорочені властивості
В коді нерідко доводиться використовувати існуючі змінні, як значення властивостей котрі мають таке саме ім’я. Наприклад:
function createPerson(name, age) {
return {
name: name,
age: age,
};
}
let user = createPerson ('Вадим', 25);
console.log(user.name);
// OUTPUT: ВадимВ прикладі вище імена властивостей name і age, збігаються з іменами змінних, котрі підставляються як значення цих властивостей. Такий підхід настільки поширений, що існують спеціальні короткі властивості для спрощення цього запису:
function createPerson(name, age) {
return {
name,
age,
};
}
let person = createPerson('Вадим', 25);
console.log(person.name);
// OUTPUT: ВадимВ цьому прикладі, замість name:name та age:age, використовуються просто name та age. Працювати буде так само, як при використанні повної форми. При цьому, можна використовувати звичайні та короткі властивості в одному об’єкті:
function createPerson(name, age) {
return {
name,
age,
isActive: true,
};
}Визначення getters та setters
getters та setters – це accessor properties. За своєю суттю це функції, котрі використовуються для присвоєння або отримання значення властивості, але у зовнішньому коді вони мають вигляд звичайних властивостей об’єкта:
let person = {
firstName: 'Андрій',
lastName: 'Василенко',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(value) {
[this.firstName, this.lastName] = value.split(" ");
}
};
console.log(person.fullName); // OUTPUT: Андрій Василенко
person.fullName = 'Іван Бандурко';
console.log(person.firstName); // OUTPUT: Іван
console.log(person.lastName); // OUTPUT: Бандурко
console.log(person.fullName); // OUTPUT: Іван БандуркоМетоди getter і setter визначаються як звичайні методи, але з префіксом з ключового слова get або set. При цьому getter не повинен очікувати параметрів, тоді як setter очікує один параметр (значення для встановлення).