JS объекты основы

Объект в JavaScript — коллекция свойств «ключ–значение», где значением может быть любой тип данных, включая другие объекты и функции.

Зачем нужно

Объекты — базовая структура данных JavaScript: практически всё в языке является объектом или ведёт себя как объект. Они используются для группировки связанных данных и поведения, моделирования предметной области (пользователь, заказ, товар), а также служат основой для прототипного наследования и ООП. Понимание объектов необходимо до изучения классов, замыканий и DOM.

Где используется

  • Хранение данных: конфигурации, настройки, ответы API
  • Модели предметной области: user, product, order
  • Передача именованных параметров в функции (options-объект)
  • Пространства имён (namespace): группировка утилит
  • Прототипы и наследование через цепочку прототипов

Основной контент

Создание объектов

// Литерал — самый частый способ
const user = {
  name: 'Иван',
  age: 30,
  isAdmin: false,
  greet {
    return `Привет, я ${this.name}`;
  }
};

// Object.create — задаём прототип явно
const base = { toString { return `[${this.name}]`; } };
const obj = Object.create(base);
obj.name = 'test';
console.log(obj.toString()); // "[test]"

// Вычисляемые ключи
const key = 'status';
const order = { [key]: 'pending', [`${key}Code`]: 200 };

Доступ и изменение свойств

const product = { name: 'Ноутбук', price: 50000 };

// Точечная нотация
console.log(product.name);  // 'Ноутбук'
product.price = 45000;

// Скобочная нотация — для динамических ключей и ключей с пробелами
const field = 'price';
console.log(product[field]); // 45000

// Проверка наличия свойства
console.log('name' in product);             // true
console.log(product.hasOwnProperty('name')); // true (только собственные)
console.log(product.color);                  // undefined (не выбросит ошибку)

// Optional chaining
const res = product?.category?.id; // undefined, не TypeError

Деструктуризация и spread

const { name, price, discount = 0 } = product; // discount со значением по умолчанию

// Переименование при деструктуризации
const { name: productName } = product;

// Spread — поверхностное копирование
const updated = { ...product, price: 40000 };

// Объединение объектов
const defaults = { color: 'white', size: 'M' };
const custom = { color: 'black' };
const merged = { ...defaults, ...custom }; // { color: 'black', size: 'M' }

Перебор свойств

const config = { host: 'localhost', port: 3000, debug: true };

// for...in — перебирает все перечисляемые свойства включая унаследованные
for (const key in config) {
  if (config.hasOwnProperty(key)) {
    console.log(`${key}: ${config[key]}`);
  }
}

// Object.keys() / values / entries — только собственные перечисляемые
console.log(Object.keys(config));    // ['host', 'port', 'debug']
console.log(Object.values(config));  // ['localhost', 3000, true]
console.log(Object.entries(config)); // [['host','localhost'], ['port',3000], ...]

// Трансформация через entries
const doubled = Object.fromEntries(
  Object.entries({ a: 1, b: 2 }).map(([k, v]) => [k, v * 2])
);
// { a: 2, b: 4 }

Дескрипторы и Object.defineProperty

const obj = {};
Object.defineProperty(obj, 'id', {
  value: 42,
  writable: false,    // нельзя переписать
  enumerable: false,  // не видно в for...in и Object.keys()
  configurable: false // нельзя удалить или переопределить
});

console.log(obj.id); // 42
obj.id = 99;         // в strict mode — TypeError, иначе тихо игнорируется

Частые ошибки

  • Поверхностное копирование через spread: { ...obj } не копирует вложенные объекты — они разделяют ссылку. Для глубокого клонирования используйте structuredClone.
  • this теряется при деструктуризации метода: const { greet } = user; greet — this будет undefined в strict mode. Нужно user.greet.
  • for...in обходит прототип: без hasOwnProperty можно получить унаследованные свойства.
  • Ключи объекта всегда строки или Symbol: obj[1] и obj['1'] — одно и то же свойство.

Связанные темы

Ресурсы

⚡ Источник: Что такое Object в JavaScript согласно спецификации · AsForJS

  • 📅 2025-02-03 · YouTube
  • Тезисы:
    • По спеке Object — это коллекция Property, где каждое Property имеет дескриптор (data или accessor)
    • У всех объектов есть internal methods: [[Get]], [[Set]], [[Delete]], [[OwnPropertyKeys]], [[Prototype Pattern]]
    • Ordinary Object vs Exotic Object (Array, Function, Proxy — все exotic)

⚡ Источник: Производительность JS Обьекты в V8 · AsForJS

  • 📅 2025-02-07 · YouTube
  • Тезисы:
    • V8 использует Hidden Classes (Shapes) для объектов одинаковой структуры
    • Добавление полей в одном порядке = один shape, в разных = разные shapes (полиморфизм)
    • Inline Cache работает только при стабильных shapes

⚡ Источник: Производительность V8 объектов в примерах · AsForJS

  • 📅 2025-02-11 · YouTube
  • Тезисы:
    • delete obj.prop ломает shape — объект переходит в dictionary mode
    • Объявляйте все поля в конструкторе сразу, не накидывайте позже

⚡ Источник: Что Вы не знаете о Assignment Patterns · AsForJS

  • 📅 2025-10-18 · YouTube
  • Тезисы: {a, b} = obj — это Assignment Pattern, по спеке отличается от Binding Pattern в let {a, b} = obj. У них разные грамматики

🎓 Источник: 👶 JavaScript для начинающих 3. Литералы, массивы, объекты

  • 📅 2021-10-02 · YouTube
  • Тезисы: литералы — синтаксис для прямого создания значений. Объектный литерал {} — самый частый способ создания. Массив — особый объект с числовыми ключами

🎓 Источник: 💻 Массивы, объекты, классы, прототипы в JavaScript

  • 📅 2018-10-04 · YouTube
  • Тезисы: объекты и массивы — один тип под капотом. Различие — методы и спец. обработка length