JavaScriptの三項演算子についてサンプルコード付き解説!
JavaScriptの三項演算子について書き方についてサンプルコード付きで解説します。時にif文を省略した形で書ける三項演算子の使い方をマスターしましょう!
三項演算子とは?
三項演算子(条件演算子)は文字通り演算子の1つで指定された条件で処理を二者択一で分けることが出来ます。
条件を分けるというとプログラミングではif
文がおなじみですが、if
文の条件分岐を三項演算子で記述できる場合もあり、時に三項演算子を使った方が適切な場合もあります。
今回は三項演算子のJavaScriptでの書き方についてサンプルコード付きで解説します。
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
文を省略した形として三項演算子を利用する場合もあります。
また三項演算子は更に条件を入れ子にして複数で書くことができますが、可読性が下がるためおすすめは出来ません。三項演算子の入れ子のやり方については下記を参考にしましょう。
どういう場合に三項演算子を使うべきか?
これまで三項演算子の使い方を見てきましたが、プログラムの条件分岐で全て三項演算子で書いていくというのはプログラムの可読性からも適切ではありません。一方で三項演算子で出来ることはif
文やif〜else
文でも実現することが出来ます。
ではどういう場合に三項演算子を使うべきで、どういう場合では使うべきではないのでしょうか?
下記で三項演算子を使うのが適切な場合や、そうでない場合についてまとめています。ぜひ合わせて参考にしてみましょう。