[ JavaScript 基礎 ] Null合体演算子の使い方 & 注意点

JavaScriptやTypeScriptで条件分岐というと、if文やswitch文などが挙げられますが、それらを使わずにより簡潔に条件分岐の処理を書くことも出来ます。

そこで今回は、その中でも「Null合体演算子」と呼ばれる比較演算子を用いて、条件分岐の処理を書く方法についてご紹介していきます。

Null合体演算子とは

&&(AND)や||(OR)と同じ論理演算子の1種です。左辺が「null」もしくは「undefined」の時に右辺の値を返し、左辺が「null」もしくは「undefined」でない場合は、左辺の値を返すようになります。また、左辺の値を返す場合には、右辺の値は

以下、構文です。(NULL合体演算子の場合は、「??」)になります。

// Aがnullもしくは、undefinedの場合は、Bを返す。
// Aがnullもしくは、undefined以外の場合は、Aを返す。
A ?? B

とてもシンプルなうえ、簡潔なコードでnullやundefinedの判定をすることが可能なため、とても便利です。

基本的には、nullやundefinedが発生しない仕組みを作るのが理想ですが、次のような場合などに正常に必要な値が受け取れないケースが起こりえますので、Null合体演算子で判定をしてあげるようにしてあげます。

「null」や「undefined」が処理の結果として含まれている場合も検討し、処理を分岐させようと考えたら、自然とif文やswitch文を用いたコードを書く方法が思いつくかもしれません。

まずは、変数strの値を何も設定しない状態で、if文・switch文による条件分岐を行ってみます。

let str;
if(str == null || str == undefined) {
  console.log(`strの値は、${str}です。`);
}else {
  console.log("strの値は、nullでもundefinedでもありません。");
}

次は、switch文です。

let str;
switch(str) {
  case null || undefined:
    console.log(`strの値は、${str}です。`);
}

結果としては、どちらもundefinedが返されます。

どちらかといえば、switch文のほうが若干、短く書けましたが、Null合体演算子を使用することで、さらに簡単に書くことが出来ます。

こちらでも同様に変数strの値は設定せずに、書いてみます。

let str;
let str_value = str ?? "strの値は、nullでもundefinedでもありません。";
console.log(`strの値は、${str}です。`);

コードをみると、ifやswitchと比べて{}も使っていませんし、シンプルに書けていることが分かるかと思います。

結果としては、先程と同様に「strの値は、undefinedです。」と表示されます。

リファレンスにも記載されているように、明示的に優先順位を指定せずに組み合わせるのは、SyntaxError(文法エラー)が発生する原因になりますので注意しましょう。

AND 演算子 (&&) と OR 演算子 (||) を直接??と組み合わせて使うことはできません。このような場合SyntaxErrorが発生します。

あまり使う場面はないかもしれませんが、組み合わせて使う時には、以下のように()で優先順位を明示的に指定してあげましょう。

let str;
const result = ( str && `値は${str}です。` ) ?? "値にnullもしくはundefinedが含まれています。";
console.log(result);

()内の処理は、falseになりますので、実行結果は以下のようになります。

ここまで読んで頂き、有り難う御座います。

プログラミングを学習している方やこれから始めようと考えている方にお知らせです。

⇩⇩⇩⇩⇩⇩

などの悩みがある方必見！

実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。

話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。
オンラインで利用できるため、隙間時間で学習ができる。
質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00～22:00です。)
入会金不要で、あわないなと思ったらいつでも退会が可能。
実務経験が３年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる