JavaScriptの三項演算子についてサンプルコード付き解説!

JavaScriptの三項演算子について書き方についてサンプルコード付きで解説します。時にif文を省略した形で書ける三項演算子の使い方をマスターしましょう!

コンテンツ [表示]

  1. 1三項演算子とは?
  2. 2JavaScriptの三項演算子の書き方
  3. 3どういう場合に三項演算子を使うべきか?

三項演算子とは?

三項演算子(条件演算子)は文字通り演算子の1つで指定された条件で処理を二者択一で分けることが出来ます。

条件を分けるというとプログラミングではif文がおなじみですが、if文の条件分岐を三項演算子で記述できる場合もあり、時に三項演算子を使った方が適切な場合もあります。

今回は三項演算子のJavaScriptでの書き方についてサンプルコード付きで解説します。

Photo byPexels

JavaScriptの三項演算子の書き方

早速ですが、三項演算子の書き方を紹介します。

三項演算子の構文

条件式 ? 式1 : 式2;

条件式がtrueの場合は式1が評価されて返り、falseの場合は式2が評価されて返ります。つまり条件式によって式1か式2が二者択一で選択され評価された結果が返ります。

三項演算子の書き方としては条件式の後に「?」を記述し、trueの場合の式を書きます。さらに「:(コロン)」でつなぎ、falseの場合の式を書きます。

三項演算子の具体例を1つ見てみましょう。

三項演算子の例

var age = 20;
var ret;

ret = age >= 20 ? "成人" : "未成年";

上記の具体例ではageの変数の値が20以上であれば「成人」の文字列が返り、20より小さければ「未成年」の文字列が返り、変数retに代入されます。

この条件分岐はif文でも記述できることも見ておきましょう。

if文

var age = 20;
var ret;

if( age >= 20 ) {
  ret = "成人";
}else{
  ret = "未成年";
}

if文でも記述できますが、このケースでは三項演算子の方が1行で簡潔に書けますね。このようにif文を省略した形として三項演算子を利用する場合もあります。

また三項演算子は更に条件を入れ子にして複数で書くことができますが、可読性が下がるためおすすめは出来ません。三項演算子の入れ子のやり方については下記を参考にしましょう。

あわせて読みたい
JavaScriptで複数の三項演算子を入れ子にする書き方!のイメージ
JavaScriptで複数の三項演算子を入れ子にする書き方!
JavaScriptで複数の三項演算子を入れ子(ネスト)させる書き方をサンプルコード付きで解説します。複雑にならないレベルで三項演算子を利用するようにしましょう。

どういう場合に三項演算子を使うべきか?

これまで三項演算子の使い方を見てきましたが、プログラムの条件分岐で全て三項演算子で書いていくというのはプログラムの可読性からも適切ではありません。一方で三項演算子で出来ることはif文やif〜else文でも実現することが出来ます。

ではどういう場合に三項演算子を使うべきで、どういう場合では使うべきではないのでしょうか?

下記で三項演算子を使うのが適切な場合や、そうでない場合についてまとめています。ぜひ合わせて参考にしてみましょう。

あわせて読みたい
三項演算子を使うのが適切なパターンを紹介!のイメージ
三項演算子を使うのが適切なパターンを紹介!
三項演算子はif文で組まれている条件分岐をより短く・簡潔に記述できる場合があります。一方で複雑な条件では三項演算子を使うと逆に可読性が下がる場合もあります。どういう場合に三項演算子を使うのが適切なのかサンプルコード付きで解説します。
GeekHive採用サイト

関連記事