JavaScriptのNull合体演算子とは？使い方を解説！
JavaScriptの新しい仕様でNull合体演算子が追加されました。SwiftやPHPでおなじみの「??」の書き方ですが、JavaScriptでのNull合体演算子の使い方をサンプルコード付きで解説します。
Null合体演算子とは？
JavaScriptのECMAScript2020の新しい仕様でNull合体演算子が追加されました。
JavaScriptのNull合体演算子は論理演算子の１つで??と、はてなを２つ使い下記のように表します。
Null合体演算子
var tmp;
var ret = tmp ?? "後者";
console.log(ret); // 「後者」が表示??の記号を挟んで左辺と右辺がありますが、Null合体演算子は左辺がnullかundefinedであれば、右辺を返し、nullかundefined以外の値であれば左辺を返します。
※JavaScriptのnullとundefinedの違いが曖昧な方はコチラをチェックしておきましょう。
つまり上記のサンプルコードでは変数tmpがundefinedのため右辺の"後者"という文字列が返ります。
falsyな値（空文字や0）の場合
ここで一点注意なのはNull合体演算子は空文字や数字の0の場合は左辺を返すという事です。下記のサンプルコードを見て理解を深めましょう。
Null合体演算子のfalsyな値の場合
var tmp;
// undefinedの場合
ret = tmp ?? "後者";
console.log(ret); // 「後者」が表示
// nullの場合
ret = null ?? "後者";
console.log(ret); // 「後者」が表示
// 空文字の場合
ret = "" ?? "後者";
console.log(ret); // 空文字が表示
// 数字の0の場合
ret = 0 ?? "後者";
console.log(ret); // 0が表示
// falseの場合
ret = false ?? "後者";
console.log(ret); // falseが表示OR演算子との違いは？
JavaScriptでは下記のようにOR演算子を使った記述をよく見かけると思います。
OR演算子の例
var tmp;
var ret = tmp || "後者";
console.log(ret); // 後者一見同じ用途に見える、Null合体演算子とOR演算子の違いは何でしょうか？
実は、先程見てきたfalsyな値に対する挙動が異なります。
Null合体演算子はnullかundefinedの場合のみ右辺を返しますが、OR演算子の場合はnullとundefinedはもちろんの事、空文字や数字の0でも右辺を返します。
Null合体演算子とOR演算子の挙動の違い
// 数字の0
var ret1 = 0 ?? "後者";
console.log(ret1); // 0を返す
var ret2 = 0 || "後者";
console.log(ret2); // 後者を返すNull合体演算子とOR演算子のfalsyの場合の挙動の違いは覚えておきましょう。
Null合体演算子の使い方
それではNull合体演算子の使い方を更に見ていきましょう。
基本的な使い方
基本的な使い方
var name = "";
var ret = name ?? "hoge";
console.log(ret); // 空文字が返るこれまで見てきた通りNull合体演算子は??を使い、左辺がnullとundefinedの時のみ右辺を返します。
空文字については左辺が返り、この挙動がOR演算子と異なるため状況に応じて使い分けしましょう。
短絡評価
Null合体演算子はOR演算子と同じく短絡評価です。つまり左辺が返る場合は、右辺は評価しません。下記のサンプルコードを見てみましょう。
短絡評価のサンプル
var ret1 = "" ?? console.log("評価されない");
var ret2 = null ?? console.log("評価される");
// →評価されるが出力上記のサンプルコードではret1については左辺が空文字のため右辺は評価されず、何も表示されません。
一方でret2については左辺がnullのため、右辺が評価され「評価される」の文字が出力されます。
AND・OR演算子と一緒に使わない事
JavaScriptの文法の問題ですが、Null合体演算子はAND演算子・OR演算子とセットで使うことはできません。
下記は文法エラーとなりますので、注意しましょう。
Null合体演算子で文法エラーになる例
var ret = 0 || null ?? 'hoge';まとめ
Null合体演算子について構文や使い方について解説してきました。これまでOR演算子でfalsyな値について処理が困っていた部分をNull合体演算子でundefinedとnullの場合に限定できるためより厳密に書くことが可能になります。
ただしNull合体演算子は新しい仕様のため全てのブラウザに対応しているわけではなく、ブラウザの対応状況は確認しつつ使うようにしていきましょう。
ちなみにNull合体演算子のブラウザの対応状況は下記のリンクから調べることができます。あわせて参考にしてみましょう。
