Що таке дескриптори властивостей об’єктів? Розкажіть про їхнє практичне застосування.

Повне пояснення

Що це і навіщо Дескриптори властивостей – внутрішні структури, що зберігають метадані про кожну властивість об’єкта. Вони визначають, чи можна змінювати значення (writable), чи буде властивість перераховувана в циклі for…in (enumerable) і чи можна видалити її (configurable). Також дескриптори підтримують гетери/сетери, що дозволяє виконувати логіку під час доступу.

Ключові принципи/терміни

• value – фактичне значення.
• writable, enumerable, configurable – булеві прапорці.
• get, set – функції‑гетери/сетери.
• Object.getOwnPropertyDescriptor(obj, prop) – отримати дескриптор.
• Object.defineProperty(obj, prop, descriptor) – створити/змінити дескриптор.

Як це працює При доступі до властивості JavaScript‑рушій перевіряє дескриптор. Якщо присутній get, викликається функція; якщо set – передається нове значення. Якщо властивість не writable, присвоєння просто ігнорується (в strict mode – помилка).

Практика та реалізація

const user = {};
Object.defineProperty(user, 'id', {
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false
});
user.id = 456; // нічого не зміниться

interface Person {
  readonly name: string;
}
const p: Person = { name: 'Alice' };
// p.name = 'Bob'; // TS помилка

Тестування

import { describe, it, expect } from 'vitest';
describe('descriptors', () => {
  it('should be read‑only', () => {
    const obj = {};
    Object.defineProperty(obj, 'x', { value: 1, writable: false });
    expect(() => { obj.x = 2; }).not.toThrow(); // в JS нічого не зміниться
    expect(obj.x).toBe(1);
  });
});

Особливості в контексті JS Core

• Дескриптори використовуються у Object.freeze, Object.seal і Object.preventExtensions.
• Підтримка гетерів/сетери дозволяє реалізовувати реактивність (наприклад, Vue 2).
• У TypeScript readonly і const компілюються до відповідних дескрипторів.

Оптимізація, типові помилки та edge cases

1. Забуваємо встановити configurable: true → неможливо змінити дескриптор пізніше.
2. Використовуємо Object.defineProperty без enumerable: false, що розкриває внутрішні поля.
3. Під час Object.assign дескриптори не копіюються – треба використовувати Object.getOwnPropertyDescriptors.
4. У strict mode присвоєння read‑only властивості кидає помилку, що треба враховувати.
5. При створенні гетерів/сетери слід уникати рекурсивних викликів.
6. Не можна змінювати writable з true на false без configurable: true.
7. Під час видалення властивості (delete obj.prop) треба мати configurable: true.
8. При використанні Object.defineProperties з масивом дескрипторів треба перевіряти, що ключі не дублюються.

Cheatsheet + follow‑up питання

• Object.getOwnPropertyDescriptor(obj, prop) → отримати дескриптор.
• Object.defineProperty(obj, prop, { get() {}, set(value) {} }) → гетер/сет.
• Object.freeze(obj) → усі властивості стають read‑only, non‑configurable.

Follow‑up: Як працює Object.seal і чим він відрізняється від Object.freeze?