Articles
JavaScript入門
JavaScriptにおけるNull合体演算子

JavaScriptにおけるNull合体演算子

この記事ではJavaScriptにおけるNull合体演算子について説明します。

YouTube Video

JavaScriptにおけるNull合体演算子

JavaScriptにおいて、Null合体演算子(Nullish Coalescing Operator, ??)は、**nullまたはundefined**であるかどうかを判定し、これらの値であれば別のデフォルト値を返す演算子です。これは、よく使われる論理OR演算子（||）と似ていますが、nullとundefinedに特化している点で異なります。

論理OR演算子は、左辺の値がfalsyであれば右辺の値を返しますが、Null合体演算子は、左辺の値がnullまたはundefinedのときのみ右辺を返します。これにより、0や空文字列（""）などの値も正しく扱うことができるのが特徴です。

基本構文 

1let result = value ?? defaultValue;
  • valueは、チェックされる値です。
  • defaultValueは、valueがnullまたはundefinedの場合に返される値です。

Nullish Coalescing Operatorの使用例

以下の例では、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ではない値であれば、その値が返されます。

論理OR演算子との違い

Null合体演算子は、論理OR演算子とよく似ていますが、重要な違いがあります。論理OR演算子は「falsy」な値（false、0、NaN、""、null、undefinedなど）をチェックするのに対し、Null合体演算子は**nullとundefinedのみ**をチェックします。

論理OR演算子の例: 

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 Operatorの例: 

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演算子はこれらの値をfalsyとみなし、デフォルト値を返してしまうため、用途に応じて使い分ける必要があります。

組み合わせ使用時の例:

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がfalsyのためcが最終的に返されます。

Null合体演算子が有効なケース

Null合体演算子が有効なケースとして次のようなケースがあります。

  • フォームのデフォルト値 フォーム入力フィールドで、ユーザーが何も入力しなかった場合にデフォルト値をセットするシナリオで利用できます。
1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18
  • APIレスポンス処理 APIからのレスポンスにおいて、値がnullやundefinedの時にフォールバック処理を行えます。
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合体演算子（??）は、nullやundefinedの場合にデフォルト値を返すため、データの初期化やAPIレスポンスの処理などに非常に有用です。特に、0や空文字列などのfalsyな値を正しく扱いたい場合に、従来の論理OR演算子(||)よりも優れた選択肢となります。

Null合体代入演算子（??=）について

概要

JavaScriptにおいて、null や undefined の値を持つ変数に対して、新しい値を効率的に代入するために、Null合体代入演算子 ??= が導入されました。この演算子は、特定の値が null または undefined の場合にのみ変数に代入を行う便利なショートカットです。

基本的な使い方

Null合体代入演算子は、次のように動作します。

  • 変数が null または undefined の場合に、右辺の値を代入します。
  • 変数が null でも undefined でもない場合は、何もせずそのままの値を保持します。

構文

Null合体代入演算子の基本構文は、次のようになります。

1x ??= y;
  • x が null または undefined の場合に y が x に代入されます。
  • 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"
  • この場合、userName にはすでに "Alice" が設定されているため、代入は行われません。

他の代入演算子との比較

JavaScriptには他にもいくつかの代入演算子があります。特に、論理OR代入演算子（||=）との違いが重要です。

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

論理OR代入演算子は、false、0、""（空文字列）などの「falsy」な値に対しても代入を行いますが、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 といった「falsy」な値を扱う際には、従来の論理OR演算子（||=）よりも適切な場合があります。

この演算子を活用することで、より堅牢で読みやすいコードを作成することができます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

JavaScriptにおける`truthy`と`falsy`