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の可能性がある
- 配列やオブジェクトからmap関数を用いて、要素を取り出す時にnullもしくは、undefinedが取得される可能性がある
- APIから取得したデータを画面に反映させようとしたが、正常に値が取得できない
Null合体演算子の使い方
「null」や「undefined」が処理の結果として含まれている場合も検討し、処理を分岐させようと考えたら、自然とif文やswitch文を用いたコードを書く方法が思いつくかもしれません。
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合体演算子を使用することで、さらに簡単に書くことが出来ます。
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になりますので、実行結果は以下のようになります。
まとめ
- JavaScriptで条件分岐を行うための方法として、「Null合体演算子」を使ったものがある
- 「Null合体演算子」は、正常に必要な値が受け取れないケースが起こりうることを想定した処理で活用したりする
- if文やswitch文を使った書き方よりも三項演算子に近い形でシンプルに書ける
- &&や||など他の論理演算子と組み合わせるときには、()で優先順位を明示的に指定してあげないとSyntaxError(文法エラー)が発生する
最後に
ここまで読んで頂き、有り難う御座います。
プログラミングを学習している方やこれから始めようと考えている方にお知らせです。
⇩⇩⇩⇩⇩⇩
- 独学で学習を続けても中々、理解が定着しない..
- エラーが出てしまい、想定した結果が得られない…
- フリーランスとしてデビューしたいが何からやったらいいかわからない…
などの悩みがある方必見!
実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。
- 話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。 - オンラインで利用できるため、隙間時間で学習ができる。
- 質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00~22:00です。)
- 入会金不要で、あわないなと思ったらいつでも退会が可能。
- 実務経験が3年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
- 質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる
最初から定額であると少し抵抗があるという方もフリープランからお試しが出来るので安心です。会員登録も無料!
コメント