6 мин чтения

Объекты — пары ключ-значение

Если массив — это список, то объект — это «карточка» с подписанными полями. Имя, возраст, email — у каждого товара / пользователя / запроса есть свои поля. ИИ генерирует объекты везде — props компонентов, тела запросов, конфиги.

Объект = карточка

Объект задаётся фигурными скобками. Внутри — пары ключ: значение, разделённые запятыми. Ключ обычно строка (без кавычек если простой). Значение — что угодно: строка, число, массив, другой объект, функция.

Доступ к полям

Два способа: точкой (user.name) и квадратными скобками (user["name"]). Точка короче и чаще используется. Скобки нужны когда имя поля в переменной (user[fieldName]) или с пробелами (obj["with spaces"]). Если поля нет — вернёт undefined, не ошибку.

Опциональная цепочка `?.`

Если объект может быть null/undefined — обращение user.name бросит ошибку. Спасает ?.: user?.name вернёт undefined без ошибки если user пустой. Цепочки: user?.profile?.address?.city — если на любом шагу null, всё выражение вернёт undefined. ИИ часто пишет ?. — теперь ты знаешь зачем.

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

Вместо

$ const name = user.name; const age = user.age;

const { name, age } = user;. Достали сразу. С переименованием: const { name: имя } = user. С дефолтом:

$ const { name = "Гость" } = user

В функциях:

$ function greet({ name, age }) {...}

Это везде в React — props почти всегда деструктурируются.

Spread и копирование

{ ...obj } — копия объекта. { ...obj, name: "новое" } — копия с заменой одного поля. Так в React обновляют объекты в state, не меняя оригинал. Object.keys(obj), Object.values(obj), Object.entries(obj) — превращают объект в массивы для итерации.

примерjavascript

const пользователь = {
  имя: 'Алексей',
  возраст: 28,
  email: 'a@example.com',
  адрес: { город: 'Львов', улица: 'Шевченко 12' },
  любитКофе: true,
};

// Доступ
console.log(пользователь.имя);              // 'Алексей'
console.log(пользователь['email']);         // 'a@example.com'
console.log(пользователь.адрес.город);      // 'Львов'

// ?. защита от null
const X = null;
console.log(X?.имя);                          // undefined, не ошибка

// Деструктуризация
const { имя, возраст } = пользователь;
console.log(имя, возраст);                  // Алексей 28

// С дефолтом
const { телефон = 'не указан' } = пользователь;
console.log(телефон);                        // 'не указан'

// Вложенная деструктуризация
const { адрес: { город } } = пользователь;
console.log(город);                          // 'Львов'

// Spread — копия с изменением
const обновлённый = { ...пользователь, возраст: 29 };
// пользователь не изменился, обновлённый — новый объект

// Массивы из объекта
console.log(Object.keys(пользователь));     // ['имя', 'возраст', 'email', ...]
console.log(Object.entries(пользователь));  // [['имя', 'Алексей'], ...]

// Удалить поле без мутации
const { email: _, ...безEmail } = пользователь;
// безEmail — копия без поля email

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

главное

01Объект = пары ключ:значение в фигурных скобках
02Доступ через точку быстрее, через скобки — когда ключ в переменной
03?. (optional chaining) защищает от null — частый паттерн в AI-коде
04Деструктуризация ({ a, b } = obj) — везде в React и современном JS
05{ ...obj, поле: "новое" } — копия с обновлением (для state в React)
06Object.keys / values / entries — превращают объект в массивы для перебора

проверь себя

01У вас `const data = null`. Что вернёт `data?.user?.name`?

02Какой синтаксис правильно обновляет state в React, добавляя поле?

03`const { name = "Гость" } = user` — что делает дефолт?

следующий урок: map, filter, reduce — функции высших порядков →