【JavaScript】三項演算子 - 条件による値の分岐

JavaScriptの三項演算子について解説します。

三項演算子

三項演算子は広義では３つのオペランドを持つ演算子です。

特にプログラミングにおいては“条件に応じた値を返す演算子”という意味になります。

条件によって値が変える処理はif文の代わりに三項演算子を使うことで、ソースコードを簡潔に記述できます。

基本構文

条件値 ? 値（真の場合） : 値（偽の場合）

条件値は最終的に真偽値であれば良いため、比較演算子や論理演算子を使った条件式を記述できます。

三項演算子は条件値がtrueの場合にコロン（:）の左側の値、falseの場合はコロン（:）の右側の値を返します。

また、値も最終的に１つの値であれば良いため、変数や式の利用が可能です。

サンプル

let permission = 1;

___ih_hl_start
let type = permission == 1 ? 'MEMBER' : 'GUEST';
___ih_hl_end

console.log(type);

MEMBER

３行目のpermission == 1 ? 'MEMBER' : 'GUEST'の部分が三項演算子を使ったコードです。

条件値はpermission == 1、値（真の場合）は'MEMBER'、値（偽の場合）は'GUEST'になっています。

このサンプルでは条件値が真（true）となるため、三項演算子の演算結果は'MEMBER'になり、代入演算子によって変数typeに記憶されています。

if文と三項演算子

三項演算子で実現可能な処理はif文で書き換えることができます。

例えば上記サンプルをif文で書き換えると次のようになります。

let permission = 1;

___ih_hl_start
let type = '';

if( permission == 1 ) {
    type = 'MEMBER';
}
else {
    type = 'GUEST';
}
___ih_hl_end

console.log(type);

MEMBER

このように同様の処理をif文で実現できますが、コード量が増え、少し分かりづらくなりました。

処理によってif文と三項演算子を使い分けると、ソースコードの質を向上することができます。

使い分けの１つのポイントは分岐数にあります。

単純な値が２つに分岐する場合は三項演算子、３つ以上に分岐する場合はif文（またはswitch文）の方が適している場合が多くあります。

例えば、３つに分岐する三項演算子は次のようになります。

let permission = 2;

___ih_hl_start
let type = permission == 1 ? 'MEMBER' : ( permission == 2 ? 'ADMIN' : 'GUEST' );
___ih_hl_end

console.log(type);

ADMIN

３行目で三項演算子の構造の中に三項演算子を使っています。

変数permissionの値が1の場合は'MEMBER'、2の場合は'ADMIN'、それ以外は'GUEST'となる処理です。

このソースコードは読みづらく感じる方が多いかと思います。

これをif文で書き換えると次のようになります。

let permission = 2;

___ih_hl_start
let type = '';

if( permission == 1 ) {
    type = 'MEMBER';
}
else if( permission == 2 ) {
    type = 'ADMIN';
}
else {
    type = 'GUEST';
}
___ih_hl_end

console.log(type);

ADMIN

こちらのソースコードの方が読みやすく感じる方が多いのではないでしょうか。

このように処理によって得意不得意があるので、使い分けて使用しましょう。