JavaScriptの「??」「||」「&&」を擦れるくらい使いこなす

JavaScriptの条件分岐の書き方をググると「??」「||」「&&」という謎の記号を見かけたことがあるかと思います。

結論、演算子とも呼ばれていて条件分岐で使うと便利な記号です。

とはいえ勉強したての頃は「if」を使うことが多いと思いますので、改めて演算子の便利な使い方を紹介します。

こちら動画も作成しているので動画の方が良い方は活用ください

JavaScriptの「||」とは何をしているのか？

早速コードを例にして説明していきます。

function handleNumber(num){
  number = num || "エラーです";
  console.log(number);
}

handleNumber("テスト") // "テスト"を出力する

こちらは論理和とも呼ばれていて、「左辺がtrueの時は左辺を返し、それ以外は右辺を返す」ことを行います。

英語でいう「or」、日本語でいう「または」みたいな意味に近いですが、そのように覚えていると便利さに気付けなくなるので注意です。

上記の例だと「テスト」という文字列が入ったのでtrueとなり、「テスト」をそのまま出力します。

「||」のなかでfalseになるのは以下の5つです、覚えておきましょう。

• null
• NaN
• 0
• 空文字列 ("" または '' または ``)
• undefined

逆に言うとfalseになる5つ以外は全てtrueになるということですね。

「(判定したいもの) || (判定に外れたときの処理)」なんて使い方をすると、通常のif文よりも簡潔に書けちゃいます。

一方で通常のif文であれば「条件Aまたは条件B」というOR検索に使用できます。

const log1 = 'OK';
const log2 = 'NG';

if (log1 == 'OK' || log2 == 'OK') {
  console.log('正常です');
} 
// "正常です"を出力する

JavaScriptの「??」とは何をしているのか？

「??」についても同じような例題で確認してみます。

function handleNumber(num){
  number = num ?? "エラーです";
  console.log(number);
}

handleNumber("テスト") // "テスト"を出力する

「左辺がnull,undifinedの時は右辺を返し、それ以外は左辺を返す」という意味になっています。

nullとundifinedのみを判定するときに活用できます。

「(判定したいもの) ?? (null,undifinedのときの処理)」なんて使い方をすれば条件に対して、nullとundifinedでない場合はそのまま左辺の内容を出力してくれます。

こちらもif文を使うより簡潔に書くことができています。

JavaScriptの「&&」とは何をしているのか？

最後に「&&」を見ていきます。

function handleNumber(num1, num2){
  number = num1 > 0 && num2 > 0;

  console.log(number);
}

handleNumber(10, -2); // falseと出力される

「左から右に向けて最初のfalseに遭遇したときにはその値を、両辺ともにtrueであった場合は右辺を返す」ということをやっています。

ちょっと意味が分からないと思うので何点か例を追加しながら説明していきます。

まず上記のコードの場合、引数に2つの数字を入れるのですが左辺、右辺ともに「0より大きいか？」を調べます。

handleNumber(10, -2)とした場合、num1はtrueですがnum2がfalseなので結果としてはfalseを返します。

function handleNumber(num1, num2){
  number = num1 > 0 && num2 > 0;

  console.log(number);
}

handleNumber(-3, 2); // falseと出力される

続いて上記についてはnum1がfalseでnum2がtrueなので結果としてはfalseを返します。

一見すると「左辺と右辺に合うかどうか」に見えるのですが、実際のところは「左から右に向かって最初にfalseになったときにその値を出力する」ことをやっています。

ちょっと日本語が難しいのですが、「左辺と右辺に合うかどうか」という理解だと便利さを感じれないので細かく説明しています。

function handleNumber(num1, num2){
  number = num1 > 0 && num2 > 0;

  console.log(number);
}

handleNumber(5, 4); // trueと出力される

さらに上記の場合、num1とnum2ともにtrueなので結果としてはtrueを返します。

「左辺と右辺に合うかどうかで良いじゃないか？」と思われた方もいるかもしれません。

ただこちらは「両辺ともにtrueだったときには右辺を返す」ということをやっています。

日本語として意味が違うのが感じてもらえると嬉しいです。

ここで少し頭を捻ると以下のような使い方ができるからです。

(条件) && (条件にクリアしたときの処理);

「&&」がfalseを返すのは以下の5つと決まっています。

• false
• null
• NaN
• 0
• 空文字列 ("" または '' または ``)
• undefined

そうした場合、上記のような書き方だと両辺ともにtrueになるわけです。

もう一度言いますが「両辺ともにtrueだったときには右辺を返す」という原理によって、右辺の内容が返すことができるのです。

よって「&&」もif文と同じような使い方ができて、if文よりも簡潔に書くことができました。

一方で通常のif文であれば「条件Aかつ条件B」というAND検索に利用できます。

const age = 30;

if (age >= 20 && age <= 65) {
  console.log('社会人です');
}
// "社会人です"を出力する

自分も最初は理解できなくてモヤモヤしたのですが、色んなケースで試してみて便利さに気付くことができました。

if文も使ってはいますが、状況に応じて楽な書き方を覚えておくと良いでしょう。

また以下の書籍も参考になりますので併せてご覧ください。

今回の記事を作成するのに参考にした本はこちらから