Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке property descriptor?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке Property Descriptor

**Property Descriptor (дескриптор властивості)** - це внутрішній об'єкт, який описує **поведінку властивості об'єкта**:
чи можна її змінювати, перелічувати, видаляти, і чи має вона геттер/сеттер.

Простіше кажучи:

> Це "метадані" про властивість - не лише її значення, а й флаги, що визначають, як із нею можна працювати.

## Види властивостей у JS

Властивості бувають двох типів:

1. **Data Property (властивість-дані)**
→ зберігає конкретне значення (`value`)
2. **Accessor Property (властивість-аксесор)**
→ визначає функції `get` та/або `set`

## Структура дескриптора

### Для властивості-даних:

```javascript
{
  value: any,             // значення
  writable: boolean,      // чи можна змінювати value
  enumerable: boolean,    // чи видно при переборі (for...in, Object.keys)
  configurable: boolean   // чи можна видаляти або змінювати дескриптор
}
```

### Для властивості-аксесора:

```javascript
{
  get: function | undefined, // геттер
  set: function | undefined, // сеттер
  enumerable: boolean,
  configurable: boolean
}
```

## Приклад: отримати дескриптор

```javascript
const user = { name: 'Tim' };

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

Виведе:

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

Усі ці флаги за замовчуванням дорівнюють `true`, якщо властивість створена звичайним чином.

## Приклад: задати властивість вручну

```javascript
const user = {};

Object.defineProperty(user, 'role', {
  value: 'admin',
  writable: false,       // не можна змінювати значення
  enumerable: false,     // не з'являється при переборі
  configurable: false    // не можна видалити чи переналаштувати
});

console.log(user.role); // 'admin'
user.role = 'user';
console.log(user.role); // 'admin' - значення не змінилось
```

## Перевіримо перелічуваність і конфігурованість

```javascript
const user = {};
Object.defineProperty(user, 'name', {
  value: 'Tim',
  enumerable: false,
  configurable: false
});

console.log(Object.keys(user)); // [] - не перелічується
delete user.name;               // не видалиться
console.log(user.name);         // 'Tim'
```

## Приклад з геттером і сеттером

```javascript
const person = {};
let _age = 25;

Object.defineProperty(person, 'age', {
  get() {
    return _age;
  },
  set(value) {
    if (value < 0) throw new Error('Вік не може бути від\'ємним');
    _age = value;
  },
  enumerable: true,
  configurable: true
});

console.log(person.age); // 25
person.age = 30;         // викликає setter
console.log(person.age); // 30
```

## Масове визначення властивостей

```javascript
const user = {};
Object.defineProperties(user, {
  name: {
    value: 'Alex',
    writable: true,
    enumerable: true
  },
  age: {
    value: 25,
    writable: false
  }
});
```

## Отримати всі дескриптори об'єкта

```javascript
const obj = { a: 1, b: 2 };
console.log(Object.getOwnPropertyDescriptors(obj));
```

Результат:

```javascript
{
  a: { value: 1, writable: true, enumerable: true, configurable: true },
  b: { value: 2, writable: true, enumerable: true, configurable: true }
}
```

## Застосування в реальних задачах

1. **Створення "read-only" властивостей**

```javascript
  Object.defineProperty(config, 'API_KEY', {
    value: '12345',
    writable: false
  });
  ```
2. **Приховані властивості**

```javascript
  Object.defineProperty(obj, '_id', {
    value: 42,
    enumerable: false
  });
  ```
3. **Реалізація реактивності**
(наприклад, Vue.js використовує `get`/`set` у дескрипторах для відстеження змін)
4. **Імітація приватних полів (до появи** `#`**)**

```javascript
  Object.defineProperty(obj, 'secret', {
    value: 'hidden',
    enumerable: false
  });
  ```

## Підсумок

| Властивість дескриптора | Для чого потрібна |
|---|---|
| `value` | саме значення |
| `writable` | чи можна змінити `value` |
| `enumerable` | чи видно при переборі |
| `configurable` | чи можна видалити/перевизначити |
| `get` | функція-геттер |
| `set` | функція-сеттер |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати514 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.