Вложенные объекты и безопасный доступ

В прошлом уроке объект user хранил простые значения: имя, возраст, город. Но данные часто сами имеют внутреннюю структуру. Например, адрес – это не одно значение: у него есть город, дом, а позже могут появиться улица, квартира и индекс.

Вместо десятка отдельных свойств удобнее собрать адрес в собственный объект и положить его внутрь user:

nested.jsjs

1const user = {2  name: 'Ира',3  address: {4    city: 'Москва',5    house: 15,6  },7};89console.log(user.address.city);10console.log(user.address.house);

Консоль

Москва

Такой объект называют вложенным. Здесь значением свойства address является ещё один объект.

Каждая точка делает один шаг по этой структуре.

Цепочка точек – несколько обращений подряд

JavaScript не прыгает сразу к city. Он выполняет цепочку по одному шагу слева направо:

берёт значение user;
читает у него address;
получает объект { city: 'Москва', house: 15 };
уже у этого объекта читает city.

user.address.city – просто короткая запись этой последовательности обращений.

Цепочка точек: шаг за шагом вглубь

const user = {

name: 'Ира',

address: {

city: 'Москва',

house: 15,

};

console.log(user.address.city);

Сначала у user читаем свойство address.

Консоль

Нет вывода в консоль.

Меняем данные на нужной глубине

Читать и изменять вложенные свойства можно той же цепочкой:

nested-change.jsjs

1const user = {2  name: 'Ира',3  address: { city: 'Москва', house: 15 },4};56user.address.city = 'Казань';7console.log(user.address.city);89user.address = { city: 'Тверь', house: 3 };10console.log(user.address.house);

Консоль

Казань

В первом присваивании меняется только свойство city внутри объекта address. Во втором присваивание стоит уже после user.address, поэтому старый объект address целиком заменяется новым:

меняется одно свойство внутри address

1user.address.city = 'Казань';2// address: { city: 'Казань', house: 15 }

старый объект address заменяется новым

1user.address = { city: 'Тверь', house: 3 };2// address: { city: 'Тверь', house: 3 }

Когда вложенного объекта нет

Не у каждого пользователя указан адрес:

no-address.jsjs

1const guest = {2  name: 'Гость',3};45console.log(guest.address);6console.log(guest.address.city);

Консоль

undefined

TypeError: Cannot read properties of undefined (reading 'city')

Первое обращение совершенно допустимо: guest.address → undefined. Отсутствующее свойство объекта само по себе ошибки не вызывает.

Проблема начинается на следующем шаге. После первого обращения выражение по смыслу превращается в undefined.city. А прочитать свойство у undefined нельзя – поэтому JavaScript выбрасывает TypeError:

Ошибка возникает на втором шаге – при чтении свойства у undefined.

Сообщение Cannot read properties of undefined (reading 'city') буквально подсказывает причину: JavaScript попытался прочитать city у значения undefined. Поэтому искать проблему нужно в предыдущем звене цепочки: почему guest.address оказался undefined.

Проверка перед обращением

guard.jsjs

1const guest = {2  name: 'Гость',3};45if (guest.address) {6  console.log(guest.address.city);7} else {8  console.log('Адрес не указан');9}

Консоль

Адрес не указан

Проверка решает проблему: к .city мы доходим только тогда, когда address существует. Здесь это безопасно, потому что address ожидается либо объектом, либо undefined. Для одной проверки это нормально. Но если цепочка длинная, такой код быстро разрастается. Для безопасного чтения свойства в JavaScript есть короткая запись – ?..

Optional chaining: `?.`

Оператор ?. делает следующий переход по цепочке безопасным. Он проверяет значение слева:

если там объект – свойство читается как обычно;
если там null или undefined – выражение сразу возвращает undefined, а следующий переход не выполняется.

optional.jsjs

1const guest = {2  name: 'Гость',3};45const user = {6  name: 'Ира',7  address: {8    city: 'Москва',9  },10};1112console.log(guest.address?.city);13console.log(user.address?.city);

Консоль

undefined

Москва

У guest свойства address нет: слева от ?. оказался undefined, переход к city не выполнился, результат – undefined. У user адрес есть, и ?. сработал как обычная точка.

Останавливают ?. только два значения – null и undefined. Ноль, пустая строка и false для него обычные значения: на них цепочка не прервётся и пойдёт дальше:

optional-stops.jsjs

1const empty = '';2const address = null;3let city;45console.log(empty?.length);6console.log(address?.city);7console.log(city?.length);

Консоль

undefined

Как ?. останавливает цепочку

const guest = {

name: 'Гость',

};

console.log(guest.address?.city);

Сначала читаем guest.address.

?. видит слева undefined и останавливает этот переход.

Свойство city уже не читается – этот шаг не выполняется.

Результат всего выражения – undefined.

В консоли undefined. Ошибки не произошло, поэтому программа спокойно выполняет следующие строки.

?. защищает только переход сразу после себя

partial.jsjs

1const order = {2  customer: { name: 'Ира' },3};45// customer есть, address нет – упадёт на .city6console.log(order.customer?.address.city);

Консоль

TypeError: Cannot read properties of undefined (reading 'city')

Запись order.customer?.address.city проверяет только customer. Если customer отсутствует, ?. вернёт undefined. Но если customer существует, а address нет, код всё равно дойдёт до undefined.city и упадёт. Поэтому ?. ставят перед каждым переходом, где промежуточного значения действительно может не быть:

full-chain.jsjs

1console.log(order.customer?.address?.city);

Консоль

undefined

Если в order может лежать undefined или null, цепочка начинается так: order?.customer?.address?.city.

?. работает и с квадратными скобками

optional-brackets.jsjs

1const user = {2  settings: {3    theme: 'dark',4  },5};6const guest = {};78const key = 'theme';910console.log(user.settings?.[key]);11console.log(guest.settings?.[key]);

Консоль

dark

undefined

Для динамического ключа пишут ?.[key]. Идея та же: если settings существует, JavaScript вычислит key и прочитает нужное свойство. Если settings равен null или undefined, результатом станет undefined.

Через `?.` нельзя присваивать

optional-assign.jsjs

1// SyntaxError: слева от присваивания ?. нельзя2user.address?.city = 'Казань';

Optional chaining нельзя использовать слева от обычного присваивания. Если свойство нужно изменить, сначала убедитесь, что промежуточный объект существует:

assign-guarded.jsjs

1if (user.address) {2  user.address.city = 'Казань';3}

Не ставьте ?. на всякий случай

Optional chaining полезен там, где отсутствие данных – нормальная ситуация. Например, у пользователя действительно может не быть адреса: user.address?.city. Но если по логике программы profile обязан существовать, писать user.profile?.name только ради того, чтобы «не упасть», – плохая идея. Ошибка в данных превратится в тихий undefined, и найти настоящую проблему станет сложнее.

?. используют, когда отсутствие данных ожидаемо по логике программы, а не когда хочется «заглушить» ошибку.

// теперь вы знаете

Значение свойства может быть объектом; цепочка user.address.city – несколько обращений подряд, по одному на точку
user.address.city = … меняет свойство внутри address, user.address = { … } заменяет вложенный объект целиком
Отсутствующее свойство даёт undefined, а чтение свойства у undefined – TypeError; причину ищут в предыдущем звене
?. проверяет значение слева: объект – читаем дальше, null или undefined – всё выражение даёт undefined
?. защищает только переход сразу после себя; с динамическим ключом пишут ?.[key]; слева от присваивания ?. нельзя
?. ставят там, где отсутствие данных – нормальная ситуация, а не «на всякий случай»

Проверьте себя

Верно ли: если у объекта нет свойства address, то уже чтение user.address вызывает ошибку?

Вложенные настройки

В объекте app есть вложенный объект settings. Поменяйте тему на «light», добавьте в settings свойство fontSize со значением 16, а затем замените вложенный объект notifications целиком на { email: true }.

const app = {
  name: 'Заметки',
  settings: { theme: 'dark', notifications: { push: true } },
};

// тема light, fontSize 16, notifications = { email: true }


// ── проверочный код: не меняйте ──
console.log(app.settings.theme);
console.log(app.settings.fontSize);
console.log(app.settings.notifications.email);
console.log(app.settings.notifications.push);

Решение

1const app = {2  name: 'Заметки',3  settings: { theme: 'dark', notifications: { push: true } },4};56app.settings.theme = 'light';7app.settings.fontSize = 16;8app.settings.notifications = { email: true };910// ── проверочный код: не меняйте ──11console.log(app.settings.theme);12console.log(app.settings.fontSize);13console.log(app.settings.notifications.email);14console.log(app.settings.notifications.push);

Первые две строки меняют и добавляют свойства внутри settings. Третья заменяет notifications новым объектом, поэтому старое свойство push исчезло – его чтение даёт undefined.

Что появится в консоли?

const user = { name: 'Ира' };
console.log(user.address?.city);

undefined

пустая строка

ошибка TypeError

null

Последняя строка падает с ошибкой TypeError: Cannot read properties of undefined (reading 'address'). Чтение какого свойства вернуло undefined? Впишите имя свойства.

const order = {
  id: 7,
  customer: {
    name: 'Ира',
    address: { street: 'Лесная', house: 4 },
  },
};
console.log(order.delivery.address.street);

Строка доставки

Допишите deliveryLine(id, total, city) и напечатайте строку доставки каждого из трёх заказов. У заказа есть id и сумма total; покупатель customer есть у оформленных заказов, а у черновика draft ещё не выбран; адрес address у покупателя может быть не указан. Город лежит в customer.address.city – достаньте его так, чтобы программа не падала ни на одном заказе, и передайте в функцию. Она возвращает 'Заказ №7: доставка в Казань, бесплатно', где 7 – это id, а при total меньше 3000 вместо 'бесплатно' стоит '300 ₽'; если города нет – 'Заказ №9: самовывоз'.

function deliveryLine(id, total, city) {
  // верните строку доставки по условию
}

const paid = {
  id: 7,
  total: 3000,
  customer: { name: 'Ира', address: { city: 'Казань' } },
};
const pickup = { id: 9, total: 900, customer: { name: 'Гость' } };
const draft = { id: 12, total: 0 };

// напечатайте строку доставки каждого из трёх заказов

Решение

1function deliveryLine(id, total, city) {2  if (!city) {3    return `Заказ №${id}: самовывоз`;4  }5  const price = total >= 3000 ? 'бесплатно' : '300 ₽';6  return `Заказ №${id}: доставка в ${city}, ${price}`;7}89const paid = {10  id: 7,11  total: 3000,12  customer: { name: 'Ира', address: { city: 'Казань' } },13};14const pickup = { id: 9, total: 900, customer: { name: 'Гость' } };15const draft = { id: 12, total: 0 };1617const paidCity = paid.customer?.address?.city;18const pickupCity = pickup.customer?.address?.city;19const draftCity = draft.customer?.address?.city;2021console.log(deliveryLine(paid.id, paid.total, paidCity));22console.log(deliveryLine(pickup.id, pickup.total, pickupCity));23console.log(deliveryLine(draft.id, draft.total, draftCity));

Отсутствовать может и покупатель (у draft), и адрес (у pickup), поэтому ?. стоит после обоих звеньев – customer?.address?.city: у paid запись читается как обычная цепочка, у pickup она останавливается на address, у draft – уже на customer, и в функцию приходит undefined. По undefined функция возвращает строку про самовывоз, не доходя до цены; сумма 3000 уже входит в 'бесплатно', поэтому сравнение >=, а не >.

Что появится в консоли?

const user = {
  name: 'Ира',
  nickname: '',
  address: null,
};
console.log(user.nickname?.length);
console.log(user.address?.city);

0, затем undefined

undefined, затем undefined

пустая строка, затем null

0, затем ошибка TypeError

По правилам программы у каждого заказа обязательно есть покупатель – свойство customer. Верно ли, что здесь ?. не нужен и лучше писать order.customer.name?

const order = { id: 3, total: 1200 };
console.log(order.customer?.name);

Почему

Да: раз customer обязан быть, его отсутствие – ошибка в данных. С ?. код напечатает undefined, и ошибка останется незамеченной, а с точкой программа остановится на этой строке с TypeError. ?. ставят там, где значения действительно может не быть.

Почините падение

Программа падает на втором пользователе: у него не указан адрес. Исправьте строку с чтением города так, чтобы для пользователя без адреса печаталось undefined, а для остальных – город. Объекты менять нельзя.

const ira = { name: 'Ира', address: { city: 'Москва' } };
const guest = { name: 'Гость' };

console.log(ira.address.city);
console.log(guest.address.city);

Решение

1const ira = { name: 'Ира', address: { city: 'Москва' } };2const guest = { name: 'Гость' };34console.log(ira.address?.city);5console.log(guest.address?.city);

Отсутствовать может address, поэтому ?. стоит именно после него. Для Иры оператор ничего не меняет – объект есть, чтение идёт как через точку.

Что произойдёт при выполнении последней строки?

const order = { customer: { name: 'Ира' } };
console.log(order.customer?.address.city);

ошибка: у undefined нет свойства city

напечатается undefined

напечатается null

напечатается пустая строка

Можно ли записать user.address?.city = 'Казань', чтобы изменить город только при наличии адреса?

Переезд без падения

Код меняет город пользователей на 'Казань', но падает на guest: адреса у него нет. Исправьте код так, чтобы город менялся только там, где адрес указан. Присваивание для guest не удаляйте – выполните его только при наличии адреса.

const ira = {
  name: 'Ира',
  address: { city: 'Москва', house: 15 },
};
const guest = { name: 'Гость' };

ira.address.city = 'Казань';
guest.address.city = 'Казань';

// ── проверочный код: не меняйте ──
console.log(ira.address.city);
console.log(ira.address.house);
console.log(guest.address);

Решение

1const ira = {2  name: 'Ира',3  address: { city: 'Москва', house: 15 },4};5const guest = { name: 'Гость' };67ira.address.city = 'Казань';8if (guest.address) {9  guest.address.city = 'Казань';10}1112// ── проверочный код: не меняйте ──13console.log(ira.address.city);14console.log(ira.address.house);15console.log(guest.address);

У guest нет address, поэтому присваивание guest.address.city = 'Казань' пыталось записать свойство city в undefined – отсюда TypeError: Cannot set properties of undefined. Проверка if (guest.address) пропускает присваивание, когда адреса нет, а ?. слева от = дал бы SyntaxError. У ira меняется только city, поэтому house остался 15.

Что появится в консоли?

const guest = {};
const key = 'theme';
console.log(guest.settings?.[key]);

undefined

ошибка: у undefined нет свойств

theme

null

Предыдущий урокСвойства: точка и квадратные скобки Следующий урок Ссылки и сравнение объектов

Вложенные объекты и безопасный доступ

Цепочка точек – несколько обращений подряд

Меняем данные на нужной глубине

Когда вложенного объекта нет

Проверка перед обращением

Optional chaining: ?.

?. защищает только переход сразу после себя

?. работает и с квадратными скобками

Через ?. нельзя присваивать

Проверьте себя

Вложенные настройки

Строка доставки

Почините падение

Переезд без падения

Вложенные настройки

Строка доставки

Почините падение

Переезд без падения

Optional chaining: `?.`

Через `?.` нельзя присваивать