Readonly властивості
у JavaScript властивість можна зробити "тільки для читання" (read-only), щоб її не можна було змінити, видалити або перевизначити.
Є кілька способів - від простого до максимально суворого.
1. Через Object.defineProperty()
Це основний спосіб задати властивість із потрібними атрибутами.
const user = {};
Object.defineProperty(user, 'name', {
value: 'Tim',
writable: false, // забороняє змінювати
enumerable: true, // буде видно під час перебору
configurable: false // не можна видалити або перевизначити
});
console.log(user.name); // "Tim"
user.name = 'Oleh'; // не зміниться
console.log(user.name); // "Tim"
delete user.name; // не видалиться
console.log(user.name); // "Tim"writable: false робить властивість тільки для читання.
Якщо також вказати configurable: false, її неможливо навіть видалити.
Як це виглядає у дескрипторі
console.log(Object.getOwnPropertyDescriptor(user, 'name'));Виведе:
{
value: 'Tim',
writable: false,
enumerable: true,
configurable: false
}2. Через Object.freeze() (заморозити весь об'єкт)
Якщо хочеш зробити всі властивості незмінними одразу, можна "заморозити" об'єкт:
const user = {
name: 'Tim',
age: 25
};
Object.freeze(user);
user.name = 'Oleh'; // не зміниться
user.city = 'Kyiv'; // не можна додати нове
delete user.age; // не можна видалити
console.log(user); // { name: 'Tim', age: 25 }Object.freeze() робить:
- усі наявні властивості
writable: falseіconfigurable: false; - забороняє додавати нові.
3. Через getter без setter (обчислюване, але тільки для читання)
const user = {
firstName: 'Tim',
lastName: 'Smith',
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(user.fullName); // "Tim Smith"
user.fullName = 'Oleh Petrov'; // не спрацюєЯкщо в об'єкті є get, але немає set,
то ця властивість автоматично стає тільки для читання.
4. Через Object.seal() (часткова захист)
Якщо не хочеш "заморожувати" об'єкт повністю, а просто заборонити додавання і видалення властивостей:
const user = { name: 'Tim' };
Object.seal(user);
user.name = 'Oleh'; // можна змінити
delete user.name; // не можна видалити
user.age = 30; // не можна додатиНа відміну від freeze(), seal() дозволяє змінювати значення,
але забороняє змінювати структуру об'єкта.
ПІДСУМОК
| Спосіб | Що робить | Змінювати значення | Додавати/видаляти |
|---|---|---|---|
Object.defineProperty(obj, key, { writable: false }) | Робить конкретну властивість read-only | Ні | Так |
Object.freeze(obj) | Заморожує весь об'єкт | Ні | Ні |
Object.seal(obj) | Забороняє видаляти і додавати властивості | Так | Ні |
| Геттер без сеттера | Обчислювана властивість "тільки для читання" | Ні | Так |
В одній фразі:
Щоб зробити властивість тільки для читання, використовуй
javascriptObject.defineProperty(obj, 'key', { value: val, writable: false });або "заморозь" весь об'єкт з
Object.freeze(obj).
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.