if-elseを1行に！三項演算子で書くJavaScriptの条件分岐

JavaScriptでよく使う条件分岐「if-else文」は、三項演算子を使うことで1行でスッキリ書けます。
この記事は、三項演算子の基本的な書き方と、if-else文からの書き換え例を備忘録としてまとめたものです。

if-else

function judgeScore(value) {
  if (value >= 90) {
    return '合格';
  } else {
    return '不合格';
  }
}

const score = 92;
console.log(`${score}点：${judgeScore(score)}`);

scoreが90以上なら合格、それ未満なら不合格を判定する関数です。
今回はscoreを92にしているので、コンソールに【92点：合格】と表示されます。

このif-else文を三項演算子を使って1行で書くと次のようになります。

三項演算子

function judgeScore(value) {
  return score >= 90 ? '合格' : '不合格';
}

const score = 92;
console.log(`${score}点：${judgeScore(score)}`);

scoreが90以上の場合は合格を返し、それ以外の場合は不合格を返します。

こちらもscoreを92にしているので、結果はif-else文と同じで、【92点：合格】とコンソールに表示されます。

scoreを85にすれば【85点：不合格】となります。

if-elseと三項演算子、どっちを使ったらいいの？

処理が簡単であれば三項演算子、複雑ならif-elseが無難というイメージです。

if-elseを使った方がいい場合

• 処理が複数行になったり、条件分岐が複雑なとき。
• 読みやすさや保守性を重視するとき。
• 複数の処理を実行したい場合や、あとで処理を追加する可能性があるとき。

---

三項演算子を使った方がいい場合

• 条件分岐がシンプルで、結果を返すだけの短い処理のとき。
• コードを短くすっきり書きたいとき。
• 1行で書けて読みやすい場合。

開発者ツールのコンソール（出力欄）に結果を表示するのではなく、画面に表示させる方法はこちら👇

フォームに入力された数値に応じてメッセージを切り替える例はこちら👇

Web制作を学ぶならUdemy

HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べます。

【世界で90万人が受講】Web Developer Bootcamp（日本語版）

※このリンクは広告です（アフィリエイトリンク）

📚 おすすめのUdemy講座について詳しく
👉 独学でWebアプリが作れる！初心者におすすめのUdemy講座【体験レビューあり】