Що робить Object.defineProperty()?

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

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

Синтаксис

javascript

Object.defineProperty(obj, propName, descriptor);

Аргумент	Опис
`obj`	Об'єкт, у якому створюється чи змінюється властивість
`propName`	Ім'я властивості (рядок або `Symbol`)
`descriptor`	Об'єкт-дескриптор - задає, як працює властивість

Приклад - звичайна властивість

javascript

const user = {};

Object.defineProperty(user, 'name', {
  value: 'Tim',
  writable: true,      // можна змінювати
  enumerable: true,    // видно при переборі (for...in / Object.keys)
  configurable: true   // можна видалити чи змінити
});

console.log(user.name); // "Tim"

Це те саме, якби ти написав:

javascript

const user = { name: 'Tim' };

Але з defineProperty ти можеш точно керувати поведінкою властивості.

1. `writable` - чи можна змінювати

javascript

const user = {};
Object.defineProperty(user, 'name', {
  value: 'Tim',
  writable: false
});

user.name = 'Oleh'; // не зміниться
console.log(user.name); // "Tim"

writable: false робить властивість тільки для читання.

2. `enumerable` - чи видно властивість при переборі

javascript

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

console.log(Object.keys(user)); // [] не видно
console.log(user.secret);       // можна прочитати напряму

Зручно для "внутрішніх" даних.

3. `configurable` - чи можна видалити або перевизначити

javascript

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

delete user.name; // не спрацює
Object.defineProperty(user, 'name', { value: 'Oleh' }); // помилка

configurable: false робить властивість назавжди "зафіксованою".

4. Геттер і сеттер через дескриптор

Object.defineProperty() можна використовувати для створення обчислюваних властивостей:

javascript

const user = { firstName: 'Tim', lastName: 'Cooper' };

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(value) {
    const [first, last] = value.split(' ');
    this.firstName = first;
    this.lastName = last;
  }
});

console.log(user.fullName); // "Tim Cooper"
user.fullName = 'Oleh Shevchenko';
console.log(user.firstName); // "Oleh"

Якщо вказані get або set, то value і writable використовувати не можна.

5. Переглянути поточні налаштування властивості

javascript

console.log(Object.getOwnPropertyDescriptor(user, 'fullName'));

Приклад виводу:

javascript

{
  get: [Function: get],
  set: [Function: set],
  enumerable: false,
  configurable: false
}

6. Створити кілька властивостей одразу

javascript

Object.defineProperties(user, {
  age: { value: 25, writable: true },
  city: { value: 'Kyiv', enumerable: true }
});

defineProperties() - аналог, але для групи властивостей.

Підсумок

Атрибут	За умовчанням	Що робить
`value`	`undefined`	Значення властивості
`writable`	`false`	Чи можна змінювати значення
`enumerable`	`false`	Чи видно властивість при переборі
`configurable`	`false`	Чи можна видалити / змінити дескриптор
`get`	`undefined`	Функція-геттер
`set`	`undefined`	Функція-сеттер

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

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

Premium

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