【JavaScript】条件演算子（?:）とif文との違いを整理してみた

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『条件演算子（?:）』について、『if文との違い』」を整理してみました。

よく、書籍や動画で学習していて「はいはい、条件分岐だからif文ね。えっ…if文じゃないの！？」となることがあります。

そんな方に向けた記事とご理解ください。

ぜひ本記事を参考にしてください。

条件演算子（?:）とは

まずは、そもそも条件演算子が何なのか見ていきましょう。

条件演算子とは、『与えられた条件式が、「真」であるか「偽」であるかによって、対応する式の値を出力』するものです。

つまりは条件分岐を行う『if文』とよく似た処理ですね。

ただちょっと書き方が異なるようで、条件演算子では『?クエスチョンマーク』と『:コロン』を使用して記載します。

//記載方法

条件式 ? 「真」の場合の値 : 「偽」の場合の値

//記載方法

条件式 ? 「真」の場合の値 : 「偽」の場合の値

以下が記載例です。

let hour = 14

console.log(hour <= 12 ? "AM" : "PM");
//実行結果：PM

let hour = 14

console.log(hour <= 12 ? "AM" : "PM");
//実行結果：PM

クエスチョン以降に真の値、コロン以降に偽の値を記載します。

if文のように、真偽によって判定されていることが分かりますね。

条件演算子とif文の違い

ではここからが本題。
条件演算子とif文の違いを見ていきます。

前項でもお伝えしたように、条件演算子とif文はどちらも条件による分岐であり、よく似た処理を行います。

違いとしてはこんな感じ↓

ちなみに実務では「if文」の方が使われるが、短くシンプルに条件を判断したいときに「条件演算子」が使われるようです。

それぞれの違いをもう少し詳しく見ていきましょう。

変数定義への組み込み

• 条件演算子：○
  • 「let 変数 = 条件 ? ‘●’ : ‘▲’ 」このような記載はOK
• if文：×
  • 「let 変数 = if(条件){・・・} 」このような記載はNG

変数を宣言し、そのまま条件式を組み込むことが可能かどうかについてです。

条件演算子のみ可能です。

複数の処理

• 条件演算子：×
  • 「let 変数 = 条件 ? 処理① 処理② : 処理③ 処理④」このような記載はNG
• if文：○
  • 「if(条件){処理① 処理②} else{処理③ 処理④} 」このような記載はOK

条件の中に複数の処理を記載可能かどうかについてです。

if文のみ可能です。

スコープ可否

• 条件演算子：×
  • スコープ不可
• if文：○
  • スコープ可

スコープを設定できるかどうかについてです。

そもそもスコープとは、「その変数が使える範囲」のことを指しています。

「コード全体で有効」とか「関数の中だけで有効」とか「{}の中だけで有効」とかそういうことです。

つまり、if文の場合、「｛｝の中だけで有効な変数を作ります。」という感じです。

実際の例で見ていきますが、↓のようなコードを書いても、ログには何も表示されません。

if (true) {
  let a = 1;
  const b = 2;
}

console.log(a);
console.log(b);

if (true) {
  let a = 1;
  const b = 2;
}

console.log(a);
console.log(b);

ちょっと分かりにくい要素ですが、「if文はスコープがあるんだな」と理解しておいてください。

まとめ

以上が「JavaScriptにおける、『条件演算子（?:）』について、『if文との違い』」でした。

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

タカヒデ

ITを楽しく勉強中

X

通信会社の企画職で働く30代 非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中 IT初心者が楽しいと思えるように発信することを目指しています ↓Xもやっているのでフォローしてね