Какие знаешь свойства объектов?

Свойства объектов в JavaScript

В JavaScript объекты — это основные строительные блоки языка, представляющие собой коллекции пар ключ-значение. Свойства объектов можно разделить на несколько категорий в зависимости от их типа, поведения и способа описания.

Категории свойств объектов

1. Собственные (own) и унаследованные (inherited) свойства

• Собственные свойства — определены непосредственно в самом объекте.
• Унаследованные свойства — получены из цепочки прототипов объекта.

const parent = { inheritedProp: 'value' };
const child = Object.create(parent);
child.ownProp = 'own value';

console.log(child.ownProp); // собственное свойство
console.log(child.inheritedProp); // унаследованное свойство

2. Перечислимые (enumerable) и неперечислимые (non-enumerable) свойства

• Перечислимые свойства — отображаются в циклах for...in и методах типа Object.keys().
• Неперечислимые свойства — скрыты от таких операций (например, встроенные методы объектов).

const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });

console.log(Object.keys(obj)); // ['a'] - только перечислимые
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b'] - все свойства

3. Типы свойств по дескрипторам

Каждое свойство имеет дескриптор, определяющий его поведение:

• Дескриптор данных (data descriptor) — содержит значение свойства:

  • value — значение свойства
  • writable — разрешено ли изменение значения
  • enumerable — перечислимость
  • configurable — можно ли удалять или изменять дескриптор

• Дескриптор доступа (accessor descriptor) — содержит функции get/set:

  • get — функция, возвращающая значение
  • set — функция, устанавливающая значение
  • enumerable и configurable — аналогично data descriptor

// Data descriptor
const dataObj = {};
Object.defineProperty(dataObj, 'name', {
  value: 'John',
  writable: false, // свойство только для чтения
  enumerable: true,
  configurable: true
});

// Accessor descriptor
const accessorObj = {
  _internalValue: 0,
  get value() {
    return this._internalValue;
  },
  set value(newVal) {
    if (newVal >= 0) this._internalValue = newVal;
  }
};

Методы для работы со свойствами

Основные методы Object:

• Object.defineProperty(obj, prop, descriptor) — определяет новое или изменяет существующее свойство
• Object.defineProperties(obj, descriptors) — определяет несколько свойств сразу
• Object.getOwnPropertyDescriptor(obj, prop) — возвращает дескриптор свойства
• Object.getOwnPropertyDescriptors(obj) — возвращает все дескрипторы объекта
• Object.getOwnPropertyNames(obj) — возвращает массив всех собственных свойств (включая неперечислимые)
• Object.keys(obj) — возвращает массив перечислимых собственных свойств
• Object.values(obj) — возвращает массив значений перечислимых собственных свойств
• Object.entries(obj) — возвращает массив пар [ключ, значение] для перечислимых свойств

Флаги и дескрипторы свойств:

• configurable: true — свойство можно удалять, менять его дескриптор
• enumerable: true — свойство появляется в циклах
• writable: true — значение свойства можно изменять
• Значение по умолчанию: при создании свойства через присваивание все флаги равны true

// Пример комплексной работы со свойствами
const user = {};

// Добавляем свойство с полным контролем
Object.defineProperty(user, 'birthYear', {
  value: 1990,
  writable: false,
  enumerable: true,
  configurable: false // нельзя удалить или изменить дескриптор
});

// Добавляем вычисляемое свойство
Object.defineProperty(user, 'age', {
  get() {
    return new Date().getFullYear() - this.birthYear;
  },
  enumerable: true,
  configurable: true
});

console.log(user.age); // вычисляется динамически

Специальные и символьные свойства

Свойства-символы (Symbol properties):

const id = Symbol('id');
const obj = {
  [id]: 123,
  name: 'Test'
};

// Символьные свойства игнорируются в Object.keys()
// но доступны через Object.getOwnPropertySymbols()
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(id)]

Встроенные специальные свойства:

• __proto__ — историческое свойство для доступа к прототипу (не рекомендуется к использованию)
• constructor — ссылка на функцию-конструктор, создавшую объект
• length — у массивов и строк
• prototype — у функций-конструкторов

Особенности современных объектов

В ES6+ появились дополнительные возможности:

• Короткая запись свойств: { x, y } вместо { x: x, y: y }
• Вычисляемые имена свойств: { [dynamicKey]: value }
• Spread-оператор для объектов: const newObj = { ...oldObj, newProp: 1 }

// Современный синтаксис
const name = 'John';
const dynamicKey = 'age';

const person = {
  name, // короткая запись
  [dynamicKey]: 30, // вычисляемое имя
  greet() { // сокращенный метод
    return `Hello, ${this.name}`;
  }
};

Заключение

Понимание свойств объектов в JavaScript — фундаментальный навык для любого Frontend Developer. Современные фреймворки (React, Vue, Angular) активно используют дескрипторы свойств для реактивности, а методы работы со свойствами критически важны для:

• Создания неизменяемых (immutable) структур данных
• Реализации валидации и инкапсуляции
• Оптимизации производительности приложений
• Создания метапрограммирования и продвинутых паттернов проектирования

Работа со свойствами объектов демонстрирует мощь и гибкость JavaScript как языка, сочетающего простоту базовых операций с возможностями для создания сложных, контролируемых абстракций.