Совместное использование ?. и ??
Сочетайте безопасный доступ со значениями по умолчанию.
«Совместное использование ?. и ??» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Два инструмента вместе
Опциональная цепочка ?. безопасно читает значения, которые могут отсутствовать, а оператор нулевого слияния ?? задаёт значение по умолчанию. Вместе они позволяют читать вложенные данные и аккуратно использовать резервное значение.
const user = {};
console.log(user.profile?.name ?? "Anonymous");Распространённый шаблон
Идиома a?.b ?? fallback безопасно читает значение и использует резервное значение, если результат равен null или undefined. Она заменяет громоздкие цепочки проверок.
const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"Резервное значение при отсутствии
Если какая-либо связь равна null или undefined, ?. возвращает undefined, после чего ?? заменяет его значением по умолчанию.
const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"Глубокая вложенность
Этот шаблон подходит и для глубоко вложенных структур, сохраняя одно резервное значение в конце.
const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"Сохранение допустимых ложных значений
Поскольку ?? использует значение по умолчанию только для null или undefined, настоящие значения 0, полученные из цепочки, сохраняются.
const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0Ловушка && / ||
Запись a && a.b || fallback ошибочно заменила бы допустимое значение 0 или "". Сочетание ?. и ?? позволяет этого избежать.
const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50); // 0, correctС результатами функций
Можно задать значение по умолчанию и для результата опционального вызова, сочетая оба оператора вокруг вызова метода.
const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"Значение по умолчанию для доступа к массиву
Этот шаблон работает и с доступом через квадратные скобки для массивов или динамических ключей.
const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"Формирование отображаемых строк
Практический пример применения — создание безопасного отображаемого текста из ненадёжных данных.
function label(order) {
return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"Замечание о приоритете операторов
?. имеет более высокий приоритет, чем ??, поэтому a?.b ?? c читается как (a?.b) ?? c — именно так, как требуется.
const u = { age: null };
console.log(u?.age ?? 18); // 18Понятный шаблон
Вместе эти операторы заменяют длинный защитный код одной понятной строкой, делая намерение очевидным.
const profile = null;
console.log(profile?.bio?.length ?? 0); // 0Быстрая проверка
Предскажите результат.
Итоги
Идиома obj?.deep?.prop ?? fallback читает вложенные значения, которые могут отсутствовать, и задаёт значение по умолчанию только тогда, когда результат равен null или undefined. В отличие от подхода с &&/||, она сохраняет допустимые ложные значения, такие как 0 и "". Оператор ?. имеет более высокий приоритет, чем ??, поэтому группировка естественным образом получается правильной.
Часто задаваемые вопросы
Урок «Совместное использование ?. и ??» бесплатный?
Да — полный текст урока «Совместное использование ?. и ??» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Совместное использование ?. и ??»?
Сочетайте безопасный доступ со значениями по умолчанию. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Совместное использование ?. и ??»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Необязательная цепочка с оператором ?.
- Оператор объединения с null ??
- Совместное использование ?. и ??
- Необязательные вызовы и доступ по индексу