Необязательная цепочка с оператором ?.
Безопасно обращайтесь к глубоко вложенным свойствам.
«Необязательная цепочка с оператором ?.» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Проблема
Чтение свойства у объекта, имеющего значение undefined или null, вызывает TypeError. Необязательная цепочка позволяет безопасно читать вложенные значения.
const user = {};
console.log(user.profile && user.profile.name);Оператор ?.
Оператор необязательной цепочки ?. останавливает вычисление и возвращает undefined, если значение слева равно null или undefined, вместо того чтобы вызывать ошибку.
const user = {};
console.log(user.profile?.name); // undefined, no errorЧтение вложенных свойств
Можно объединить несколько шагов ?., чтобы обращаться к глубоко вложенным структурам без ручных проверок на каждом уровне.
const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"Сокращённое вычисление
Если какое-либо звено цепочки имеет значение null или undefined, всё выражение сразу возвращает undefined, а остальная часть не вычисляется.
const data = { user: null };
console.log(data.user?.address?.city); // undefinedСрабатывает только для null и undefined
?. прерывает вычисление только для null или undefined. Другие ложные значения, такие как 0 или "", являются настоящими значениями и обрабатываются обычным образом.
const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"Сравнение с &&
До появления ?. для защитных проверок объединяли операторы &&. Необязательная цепочка короче и понятнее, когда требуется тот же результат.
const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);Продолжение цепочки после вызова
Цепочку можно продолжить после вызова метода, безопасно обращаясь к свойствам возвращённого значения.
const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080Прерывание в середине цепочки
Если промежуточное звено имеет значение null или undefined, вычисление немедленно прекращается, даже если последующие звенья могли бы вызвать функции.
const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/dНе для присваивания
Необязательная цепочка предназначена для чтения. Нельзя присваивать значение необязательной цепочке: слева от = это синтаксическая ошибка.
const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);Объединение с массивами
Она также работает с доступом через квадратные скобки, который будет рассмотрен позже. Принцип безопасности для значений null и undefined остаётся тем же.
const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"Избегайте чрезмерного использования
Используйте ?. только там, где значение действительно может отсутствовать. Чрезмерное использование может скрыть ошибки, которые важно увидеть.
const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"Быстрая проверка
Предскажите результат.
Итоги
Оператор ?. безопасно читает свойства: если левая часть равна null или undefined, он возвращает undefined вместо ошибки и прерывает вычисление остальной цепочки. Он срабатывает только для значений null и undefined, но не для 0 или "", и не может использоваться как цель присваивания.
Часто задаваемые вопросы
Урок «Необязательная цепочка с оператором ?.» бесплатный?
Да — полный текст урока «Необязательная цепочка с оператором ?.» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Необязательная цепочка с оператором ?.»?
Безопасно обращайтесь к глубоко вложенным свойствам. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Необязательная цепочка с оператором ?.»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Необязательная цепочка с оператором ?.
- Оператор объединения с null ??
- Совместное использование ?. и ??
- Необязательные вызовы и доступ по индексу