Объекты и деструктуризация

Что такое объект

Объект — набор пар ключ → значение. Если массив отвечает на вопрос «какой третий элемент?», то объект — «какое имя? а возраст?».

const user = {
  name: 'Ana',          // ключ: значение
  age: 30,
  isAdmin: false,
  address: { city: 'Казань' },          // значением может быть другой объект
  greet() { return `Привет, ${this.name}` },  // или функция (метод)
}

Объекты описывают одну вещь с несколькими свойствами: пользователя, товар, заказ, конфигурацию компонента, props в React.

Массив или объект?

Чаще всего — массив объектов: список товаров, где каждый товар — объект.

Создание — полезный синтаксис

const name = 'Ana'
const field = 'email'

const user = {
  name,                         // сокращение — то же, что name: name
  [field]: 'ana@x.com',         // вычисляемый ключ — ключ = значение field
  'full-name': 'Ana Petrova',   // ключ со спецсимволами — в кавычках
}

Доступ — виды и когда

Несуществующее свойство → undefined (не ошибка). Ошибка будет, только если читать что-то из undefined: undefined.city → TypeError. Отсюда ?..

Деструктуризация — достаём поля в переменные

const { name, age } = user                       // две переменные
const { name: userName } = user                  // переименование
const { role = 'user' } = user                   // значение по умолчанию
const { address: { city } } = user               // вложенная
const { password, ...safeUser } = user           // убрать один ключ, остальное сохранить

Чаще всего — в параметрах, именно так выглядят props компонента:

function Card({ title, children, variant = 'default' }) { ... }

Spread — копирование и объединение

const updated = { ...user, age: 31 }           // копия + один изменённый ключ
const settings = { ...defaults, ...userPrefs } // для одного ключа побеждает последнее значение

Spread делает поверхностную копию — вложенные объекты остаются общими. Подробнее — в Ссылки и иммутабельность.

Перебор объекта

Рецепт «преобразовать объект как массив»:

const prices = { apple: 2, pear: 3 }
const doubled = Object.fromEntries(
  Object.entries(prices).map(([fruit, price]) => [fruit, price * 2]),
)

Группировка

Object.groupBy(products, p => p.category)
// { laptops: [...], accessories: [...] }

Объект как словарь (lookup)

Если часто ищете по id, превратите массив в объект (или Map) — поиск станет мгновенным:

const byId = Object.fromEntries(users.map(u => [u.id, u]))
byId[42]   // вместо users.find(u => u.id === 42) каждый раз

Коротко

• Объект = ключ → значение; описывает одну вещь.
• .key для фиксированных ключей, [expr] для динамических, ?. — если может отсутствовать.
• Деструктуризация достаёт поля, spread копирует и объединяет.
• Object.entries + fromEntries для преобразований.

Официальные источники

• MDN — Working with objects
• MDN — Destructuring
• MDN — Spread syntax
• MDN — Object.groupBy