Що таке "property descriptor"?

JavaScriptMiddle~1 хв читання

property descriptor (дескриптор властивості) - це об'єкт-опис, який вказує, як саме працює властивість об'єкта: чи можна її змінити, видалити, перелічити тощо.

Це - внутрішня "мета-інформація" про кожну властивість у JavaScript.

Коротко

Будь-яка властивість у JS має дескриптор - це об'єкт зі службовими прапорцями, які визначають її поведінку.

Отримати дескриптор можна за допомогою:

javascript

Object.getOwnPropertyDescriptor(obj, key)

Приклад

javascript

const user = { name: 'Tim' };

const descriptor = Object.getOwnPropertyDescriptor(user, 'name');
console.log(descriptor);

Виведе приблизно:

javascript

{
  value: 'Tim',
  writable: true,
  enumerable: true,
  configurable: true
}

Це data descriptor (дескриптор даних), і він показує:

value - значення властивості;
writable - чи можна змінювати значення;
enumerable - чи показується під час перебору (for...in, Object.keys());
configurable - чи можна видалити або змінити налаштування.

Буває 2 типи дескрипторів

1. Data descriptor (для звичайних властивостей)

Використовує поля:

value
writable
enumerable
configurable

Приклад:

javascript

Object.defineProperty(user, 'age', {
  value: 25,
  writable: false,
  enumerable: true,
  configurable: false
});

2. Accessor descriptor (для геттерів/сеттерів)

Використовує поля:

get - функція-геттер;
set - функція-сеттер;
enumerable
configurable

Приклад:

javascript

const person = {};
Object.defineProperty(person, 'fullName', {
  get() {
    return 'Tim Brown';
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName); // "Tim Brown"

У таких властивостей немає value і writable, зате є функції доступу.

Як задати власний дескриптор

За допомогою:

javascript

Object.defineProperty(obj, key, descriptor)

Приклад:

javascript

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"

writable: false робить властивість доступною лише для читання.

Перевіримо властивості прапорців

Прапорець	Що робить	Типово
`value`	Значення властивості	`undefined`
`writable`	Чи можна змінювати `value`	`false`
`enumerable`	Чи бере участь у переборі	`false`
`configurable`	Чи можна видалити/перевизначити	`false`

Приклад різниці `enumerable`

javascript

const user = {};
Object.defineProperty(user, 'secret', {
  value: '12345',
  enumerable: false
});

console.log(user.secret);         // доступно напряму
console.log(Object.keys(user));   // []
for (const key in user) console.log(key); // нічого не виведе

enumerable: false приховує властивість під час обходу.

Приклад з `configurable`

javascript

const user = {};
Object.defineProperty(user, 'id', {
  value: 10,
  configurable: false
});

delete user.id; // не видалиться

Як отримати всі дескриптори

javascript

const user = { name: 'Tim', age: 25 };
console.log(Object.getOwnPropertyDescriptors(user));

Виведе об'єкт з дескрипторами всіх властивостей.

Підсумок

Тип	Ключі	Приклад
Data descriptor	`value`, `writable`, `enumerable`, `configurable`	звичайна властивість
Accessor descriptor	`get`, `set`, `enumerable`, `configurable`	геттер/сеттер

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.