基本的な使用法

以下のプログラムは、Nullish 合体演算子の基本的な使用法を示しています。

// nullish 合体演算子の基本的な使用法
const nullValue = null;
const undefinedValue = undefined;
const emptyString = "";
const zeroNumber = 0;
const falseValue = false;

// nullとundefinedの場合のみ右辺が使用される
console.log(nullValue ?? "デフォルト値"); // "デフォルト値"
console.log(undefinedValue ?? "デフォルト値"); // "デフォルト値"

// 空文字列、0、falseなどのfalsy値は有効な値として扱われる
console.log(emptyString ?? "デフォルト値"); // ""
console.log(zeroNumber ?? 42); // 0
console.log(falseValue ?? true); // false

// 値が存在する場合は左辺の値が使用される
console.log("実際の値" ?? "デフォルト値"); // "実際の値"

このプログラムでは、Nullish 合体演算子（??）を使用して、値が null または undefined の場合にのみデフォルト値を使用しています。空文字列（""）、0、false などの falsy 値は有効な値として扱われ、右辺は評価されません。

オブジェクトのプロパティに対する使用

以下のプログラムは、オブジェクトのプロパティに対する Nullish 合体演算子の使用例を示しています。

const user = {
  name: "Alice",
  age: 0,
  settings: {
    theme: "",
    notifications: false
  }
};

const userWithoutSettings = {
  name: "Bob",
  age: 30
};

// オブジェクトのプロパティに対する使用
const theme = user.settings?.theme ?? "デフォルトテーマ";
console.log(theme); // "" (空文字列)

const notifications = user.settings?.notifications ?? true;
console.log(notifications); // false

// 存在しないプロパティに対する使用
const bobTheme = userWithoutSettings.settings?.theme ?? "デフォルトテーマ";
console.log(bobTheme); // "デフォルトテーマ"

このプログラムでは、オプショナルチェイニング（?.）と組み合わせて Nullish 合体演算子を使用しています。user.settings.theme は空文字列ですが、これは null や undefined ではないため、その値（空文字列）が使用されます。一方、userWithoutSettings.settings は undefined なので、userWithoutSettings.settings?.theme も undefined となり、デフォルト値が使用されます。

関数パラメータのデフォルト値

以下のプログラムは、関数パラメータのデフォルト値に Nullish 合体演算子を使用する例を示しています。

// 関数パラメータのデフォルト値
function createUser(name, age, isAdmin) {
  return {
    name: name ?? "匿名ユーザー",
    age: age ?? 18,
    isAdmin: isAdmin ?? false
  };
}

console.log(createUser("Alice", 25, true));
// { name: "Alice", age: 25, isAdmin: true }

console.log(createUser("Bob", 0, false));
// { name: "Bob", age: 0, isAdmin: false }

console.log(createUser(undefined, null, undefined));
// { name: "匿名ユーザー", age: 18, isAdmin: false }

console.log(createUser());
// { name: "匿名ユーザー", age: 18, isAdmin: false }

このプログラムでは、関数パラメータのデフォルト値を設定するために Nullish 合体演算子を使用しています。パラメータが null または undefined の場合にのみデフォルト値が使用されるため、0 や false などの falsy 値も有効な入力として扱われます。

論理OR演算子との比較

以下のプログラムは、Nullish 合体演算子と論理 OR 演算子（||）の違いを示しています。

// Nullish 合体演算子と論理 OR 演算子の比較
const emptyString = "";
const zeroNumber = 0;
const falseValue = false;
const nullValue = null;
const undefinedValue = undefined;

// 論理 OR 演算子 (||) は全ての falsy 値に対してデフォルト値を使用する
console.log(emptyString || "デフォルト値"); // "デフォルト値"
console.log(zeroNumber || 42); // 42
console.log(falseValue || true); // true
console.log(nullValue || "デフォルト値"); // "デフォルト値"
console.log(undefinedValue || "デフォルト値"); // "デフォルト値"

// Nullish 合体演算子 (??) は null と undefined の場合のみデフォルト値を使用する
console.log(emptyString ?? "デフォルト値"); // ""
console.log(zeroNumber ?? 42); // 0
console.log(falseValue ?? true); // false
console.log(nullValue ?? "デフォルト値"); // "デフォルト値"
console.log(undefinedValue ?? "デフォルト値"); // "デフォルト値"

このプログラムでは、Nullish 合体演算子（??）と論理 OR 演算子（||）の動作の違いを比較しています。論理 OR 演算子は全ての falsy 値（""、0、false、null、undefined など）に対してデフォルト値を使用しますが、Nullish 合体演算子は null または undefined の場合のみデフォルト値を使用します。

注意点

• 演算子の優先順位: Nullish 合体演算子（??）は論理 OR（||）や論理 AND（&&）よりも優先順位が低いため、複雑な式で使用する場合は括弧を使用して明示的にグループ化することが推奨されます。
• 論理演算子との混在: 安全でない演算を防ぐため、&& や || 演算子と ?? 演算子を同じ式で混在させることはできません。混在させる場合は括弧でグループ化する必要があります。
• 短絡評価: Nullish 合体演算子は短絡評価を行います。左辺が null または undefined でない場合、右辺の評価は行われません。
• チェーン: 複数の Nullish 合体演算子をチェーンして使用することができます（例：value1 ?? value2 ?? value3）。
• 副作用: 右辺の式は左辺が null または undefined の場合にのみ評価されるため、右辺に副作用を持つ式がある場合は注意が必要です。