Articles
Введение в JavaScript
Оператор Nullish Coalescing в JavaScript

Оператор Nullish Coalescing в JavaScript

Эта статья объясняет оператор Nullish Coalescing в JavaScript.

YouTube Video

Оператор Nullish Coalescing в JavaScript

В JavaScript оператор Nullish Coalescing (??) проверяет, является ли значение null или undefined, и возвращает другое значение по умолчанию, если это так. Он похож на широко используемый логический оператор ИЛИ (||), но отличается тем, что специализируется на null и undefined.

Логический оператор OR возвращает правое значение, если левое значение является ложным, в то время как оператор объединения с null возвращает правое значение только если левое значение равно null или undefined. Эта функция позволяет корректно обрабатывать значения, такие как 0 и пустые строки ("").

Базовый синтаксис 

1let result = value ?? defaultValue;
  • value — это проверяемое значение.
  • defaultValue — это значение, возвращаемое, если value равно null или undefined.

Примеры использования оператора Nullish Coalescing

В следующем примере реализуется процесс возврата значения по умолчанию в случае null или undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

В этом коде, так как name равно null, возвращается значение defaultName, "Anonymous". Если name является значением, отличным от null или undefined, возвращается это значение.

Отличия от логического оператора ИЛИ

Оператор объединения с null похож на логический оператор OR, но имеет важное различие. Логический оператор OR проверяет «ложные» значения (false, 0, NaN, "", null, undefined и т. д.), в то время как оператор объединения с null проверяет только значения null и undefined.

Пример логического оператора ИЛИ: 

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Пример оператора Nullish Coalescing: 

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

Таким образом, оператор объединения с null сохраняет допустимые значения, такие как 0 и пустые строки (""), и возвращает значение по умолчанию только при необходимости. Поскольку логический оператор OR рассматривает эти значения как ложные и возвращает значение по умолчанию, важно выбирать подходящий оператор в зависимости от случая использования.

Пример использования в комбинации:

Оператор объединения с null также можно комбинировать с другими логическими операторами, но при этом требуется осторожность.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;
  • Например, при использовании совместно с логическим оператором OR (||) или логическим оператором AND (&&) следует использовать скобки, чтобы уточнить порядок операций.
1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false
  • В этом примере сначала оценивается a ?? b, и, так как a равно null, возвращается b. Затем выражение b || c оценивается, и поскольку b ложно, возвращается c.

Случаи, когда оператор объединения с null полезен

Ниже приведены случаи, когда оператор объединения с null оказывается полезным.

  • Значения по умолчанию для форм Это можно использовать в случаях, когда для полей ввода формы устанавливается значение по умолчанию, если пользователь ничего не вводит.
1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18
  • Обработка ответов API Обработка запасного варианта может быть выполнена, если значение является null или undefined в ответах от API.
1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Резюме

Оператор объединения с null (??) очень полезен для инициализации данных и обработки ответов API, так как возвращает значение по умолчанию при обнаружении null или undefined. В частности, это лучший выбор, чем традиционный логический оператор OR (||), если нужно правильно обрабатывать ложные значения, такие как 0 или пустые строки.

Об операторе присваивания объединения с null (??=)

Обзор

В JavaScript был введён оператор присваивания объединения с null ??= для эффективного присвоения нового значения переменным, которые содержат null или undefined. Этот оператор представляет собой удобное сокращение для присваивания значения переменной только в том случае, если значение равно null или undefined.

Основное использование

Оператор присваивания объединения с null работает следующим образом:.

  • Если переменная равна null или undefined, ей присваивается значение из правой части выражения.
  • Если переменная не равна ни null, ни undefined, то оператор ничего не делает, и значение переменной остаётся неизменным.

Синтаксис

Базовый синтаксис оператора присваивания объединения с null следующий:.

1x ??= y;
  • x присваивается значение y, если x равно null или undefined.
  • Если у x уже есть значение (не равное null или undefined), то значение x не изменяется.

Пример

Давайте посмотрим на основной пример использования оператора присваивания слияния с null.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"
  • В этом коде, поскольку userName равно null, переменной присваивается значение defaultName.

Далее приведен пример, в котором значение не является ни null, ни undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"
  • В данном случае, поскольку "Alice" уже присвоено переменной userName, новое присваивание не выполняется.

Сравнение с другими операторами присваивания

В JavaScript также существует несколько других операторов присваивания. Особенно важно различие между оператором присваивания логического ИЛИ (||=).

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

Оператор присваивания логического OR присваивает значение даже при наличии таких ложных значений, как false, 0 или пустая строка (""), в то время как оператор присваивания объединения с null работает только тогда, когда значение равно null или undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Поскольку оператор присваивания объединения с null работает только с null или undefined, он очень полезен, когда нужно сохранить такие значения, как 0 или false.

Примеры использования в реальном мире

Реальный пример использования оператора присваивания слияния с null может быть следующим:.

  1. Установка значений по умолчанию

    Это полезно для установки значений по умолчанию, когда пользовательский ввод или ответы API могут быть null или undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

  1. Обработка необязательных параметров

    Его можно использовать для выполнения действий по умолчанию, когда аргументы функции не указаны.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Резюме

Оператор присваивания объединения с null (??=) присваивает значение только в том случае, если левое значение равно null или undefined, делая код более лаконичным и предотвращая нежелательные присваивания. Особенно при работе с "ложными" значениями, такими как 0 или false, он может быть более подходящим, чем традиционный логический оператор ИЛИ (||=).

Используя этот оператор, вы можете создавать более устойчивый и читаемый код.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

`truthy` и `falsy` в JavaScriptВстроенные функции в JavaScript