三項演算子を使うのが適切なパターンを紹介!
三項演算子はif文で組まれている条件分岐をより短く・簡潔に記述できる場合があります。一方で複雑な条件では三項演算子を使うと逆に可読性が下がる場合もあります。どういう場合に三項演算子を使うのが適切なのかサンプルコード付きで解説します。
三項演算子はいつ使うのが適切か?
三項演算子は与えられた条件式に応じて二者択一で1つの値を選択します。例として三項演算子は下記のような書き方をします。
三項演算子例
var number = 2;
var ret = (number % 2 === 0)? "偶数" : "奇数";
alert("numberは"+ret+ "です");
上記のサンプルコードではnumber
という変数がの値が偶数であれば三項演算子によって変数ret
には「偶数」という文字列が、一方で奇数の場合は「奇数」という文字列が代入されます。
このように条件に応じて2つの値からどちらかを二者択一で選択するのが三項演算子です。
if〜else文でも同じ事が出来る
先程の三項演算子の使い方と同じロジックはif
文やif〜else
文を使っても実現出来ます。
if〜else文の例
var number = 2;
var ret;
if( number % 2 === 0 ) {
ret = "偶数";
}else{
ret = "奇数";
}
alert("numberは"+ret+ "です");
では三項演算子と同じ事がif〜eles
文で出来るのであればどういう場合で三項演算子を使い、どういう場合では使わないべきなのか迷うところがあると思います。
今回は三項演算子を使うのが適切なパターンについてサンプルコード付きで解説します。
三項演算子を使うのが適切なパターン
二者択一の値の代入
変数に値を代入する際に二者択一の場合は三項演算を使って書いた方がスマートにかけ、適切です。
下記のサンプルコードを見てみましょう。
if〜else文
var number = 2;
var ret;
// 偶数/奇数で分ける
if (number % 2 === 0) {
ret = '偶数';
} else {
ret = '奇数';
}
上記はif〜else
文を使って、偶数の場合と奇数の場合で分岐させて、その中で変数に文字列を代入しています。
これは三項演算子を使って書くとより短く記述することができ、更に分かりやすくなります。
三項演算子で記述
var number = 2;
var ret = number % 2 === 0 ? '偶数' : '奇数';
このように三項演算子は二者択一で値が返ってくるため、変数に代入する際はif文よりも簡潔に書くことが出来ます。
一方でif〜else if〜elseなど条件分岐が多くなった場合は三項演算子では複雑になりすぎて、可読性が下がります。
ネストした三項演算子
number % 2 === 0 ?
number === 2 ? '2' :
'他の偶数' :
'奇数';
その場合は素直にif
文を使って分岐させましょう。
関数などの引数の中で条件分岐する場合
下記のサンプルコードを見てみましょう。
if〜else文
var number = 2;
if( number % 2 === 0 ) {
alert("偶数");
}else{
alert("奇数");
}
上記のようにif〜else
文で二者択一で、alertなど関数の引数部分のみが異なる場合は三項演算子を使って記述しましょう。
三項演算子
var number = 2;
alert(number % 2 === 0 ? '偶数' : '奇数');
こちらも三項演算子で返ってきた値をそのまま引数として関数に渡す事で簡潔に記述が出来ています。
また先程と同様になりますが、if
文でも複数の条件や複雑な条件によって条件分岐する場合は、三項演算子は適切ではありません。あくまで二者択一のパターンでのみ利用しましょう。
まとめ
いかがでしたでしょうか。if
文で組んでいる条件分岐を三項演算子を置き換えると
- コードが短くなる
- 簡潔になり可読性を損なわない
if
文を使うのも一つの方法です。ぜひ今回紹介した内容を活かして適切に三項演算子を使っていきましょう。