Nullish values и оператор ?? в JavaScript: разбор и примеры

В JavaScript, nullish value означает, что переменная не имеет значения, т.е. она либо null, либо undefined. 🤔 Это как пустое место в коробке, где должен был быть подарок. Оператор ?? помогает нам определить, что положить в коробку, если там пусто.

Nullish values решают проблему определения отсутствия значения в переменной. Это важно, потому что позволяет явно различать ситуации, когда значение действительно не задано (например, информация еще не получена или пользователь не ввел данные), от случаев, когда значение есть, но оно равно 0, false или пустой строке ''. 🚀

Это упрощает написание программ, делая код более предсказуемым и безопасным. Вместо того чтобы угадывать, почему переменная "пустая" – из-за ошибки или так задумано, nullish values и оператор ?? дают четкий ответ. Это как если бы в коробке всегда была записка: "подарок еще не выбран" или "здесь должен быть подарок, но его забыли положить". 🎁✨

Пример

Представьте, что вы разрабатываете веб-сайт для книжного магазина. На одной из страниц вы хотите отобразить информацию о книге, включая её цену. Однако, некоторые книги могут быть в продаже по акции, и их акционная цена будет указана отдельно. Если акционная цена не указана, то должна отображаться обычная цена. Вот как можно решить эту задачу с помощью оператора nullish coalescing (??).

let обычнаяЦена = 100; // Цена книги без скидки
let акционнаяЦена = null; // Акционная цена не указана

// Используем оператор nullish coalescing для выбора акционной цены, если она есть, иначе – обычной цены
let ценаДляОтображения = акционнаяЦена ?? обычнаяЦена;

console.log(`Цена книги: ${ценаДляОтображения} руб.`); // Выведет: Цена книги: 100 руб.

В этом примере, если переменная акционнаяЦена содержит null (или undefined), то есть акция отсутствует, оператор ?? "пропускает" её и выбирает обычнаяЦена. Это позволяет легко работать с потенциально отсутствующими данными, не прибегая к сложным условным конструкциям.

Отличие nullish от falsy значений

Nullish значения в JavaScript – это конкретные значения null и undefined, которые говорят нам о том, что переменная не имеет никакого значения. Важно понимать, что это не одно и то же, что и falsy значения. Falsy значения включают в себя 0, false, '' (пустая строка), NaN, null, undefined. Все они в логическом контексте оцениваются как false, но только null и undefined являются nullish. 🧐

Это различие критически важно, когда вы работаете с условиями в вашем коде. Представьте, что вы хотите проверить, было ли поле формы заполнено. Если использовать проверку на falsy значения, то ноль (0) или пустая строка (''), которые могут быть валидными значениями, приведут к неверному результату. Используя проверку на nullish, вы точно знаете, что поле либо было заполнено (даже если это 0 или ''), либо нет.

Как работает оператор nullish coalescing

Оператор nullish coalescing (??) – это современный инструмент в JavaScript, который позволяет легко и безопасно работать с переменными, которые могут иметь значения null или undefined. Этот оператор возвращает правый операнд, если левый операнд равен null или undefined, и левый операнд во всех остальных случаях.

Это особенно полезно для установки значений по умолчанию в JavaScript. Вместо того, чтобы писать длинные и запутанные условные выражения, вы можете использовать ?? для простой и читаемой записи.

Плюсы и минусы использования

Использование оператора nullish coalescing делает ваш код более читаемым и предсказуемым. Он упрощает работу с потенциально отсутствующими данными и помогает избежать ошибок, связанных с неправильной обработкой falsy значений.

Однако, важно помнить о разнице между nullish и falsy значениями и правильно выбирать инструмент для каждой задачи. В некоторых случаях использование логического оператора OR (||) может быть более уместным, если вы хотите обрабатывать все falsy значения одинаково.

Альтернативы оператору nullish coalescing

Хотя оператор ?? является мощным инструментом для работы с nullish значениями, существуют ситуации, когда другие подходы могут быть предпочтительнее. Например, логический оператор OR (||) может использоваться для установки значений по умолчанию, но его поведение отличается от ??, так как он возвращает правый операнд для любого falsy значения левого операнда, а не только для null или undefined.

Важно понимать разницу между этими операторами и выбирать подходящий в зависимости от ситуации. Иногда может потребоваться более традиционный подход с использованием условных выражений, особенно если ваша логика зависит не только от отсутствия значения, но и от его типа или других условий.

В заключение, nullish values и оператор ?? в JavaScript открывают новые возможности для более чистого и безопасного кода. Они позволяют ясно разграничивать случаи отсутствия значения от других сценариев и делают ваш код более предсказуемым и легким для понимания.