JavaScriptの条件演算子(三項演算子)

PCの中身を整理したので、お蔵出しシリーズと称して、昔自分のために書いた文章を供養していこうと思います。たぶんあんまり続かない。
今回は2008年2月に書いたらしいものに加筆修正しました。

基本(条件演算子の記法)

if(条件式) {
  条件式が真(true)の場合の処理
}
else {
  条件式が偽(false)の場合の処理
}

っていう文と同じ処理をする式を、

(条件式) ? 条件式が真の場合に評価する式 : 条件式が偽の場合に評価する式

と書くことができる。


?:を条件演算子という。JavaScriptでは唯一、項(被演算子)が三つの演算子なので、三項演算子とも呼ばれる。


条件式のカッコ()は可読性のために入れただけで、必須ではない。同じくスペースも必須ではない。

  • それぞれの項はすべて式である
  • 全体が一つの式になっている
  • 式なので全体をカッコ()でくくってもよい

という点に注目。といってもこれは演算子が作る式ならすべてに当てはまるのだけど。

条件式 ?
条件式が真の場合に評価する式 :
条件式が偽の場合に評価する式

とかなんとか、途中で改行してもOK。

式の評価結果

全体で一つの式になっているので、全体で一つの値を返す。
返す値は最後に評価された式の値になる。


たとえば、変数aに(xの値に応じて)bまたはcを代入したい場合、if文を使うとこんな風になる。

x = 10;
if(x == 10) {
  a = b;
}
else {
  a = c;
}
// 結果:aにbが代入される

これを省略して

x = 10;
(x == 10) ? a = b : a = c;
// 結果:aにbが代入される

と書けて、さらに省略して

x = 10;
a = (x == 10) ? b : c;
// 結果:aにbが代入される

と書ける。
演算子の優先順位にもとづき、代入演算子=より条件演算子?:のほうが先に評価されるので、「(x == 10) ? b : c」という式の値がaに代入される。


最後の書き方は個人的によく使ってる。変数に代入するという目的が目に見えやすい気がするので。


あとは、たとえば「引数が条件に合うかどうかを真偽値で返す関数」が

function hoge(huga) { return (huga == piyo) ? true : false; }

とか書けたりする。
if文が増えないからすっきり。でもこっちはやり過ぎるとたぶんあとで読めない。

応用1:入れ子にもできる

全体が式なので、入れ子にもできる。たとえば

if(x < 10) {
  y = a;
}
else if(x < 20) {
  y = b;
}
else if(x < 30) {
  y = c;
}
else {
  y = d;
}

は、

y = (x < 10) ? a : (x < 20) ? b : (x < 30) ? c : d;

と書ける。改行もできるので

y = (x < 10) ? a :
    (x < 20) ? b :
    (x < 30) ? c :
    d;

とか書いてもいい。
素直にifかswitchで書いたほうが、条件分岐ってことがわかりやすくていいと思う。人の書いたコードで見つけたときに面食らわない程度におぼえておく。

応用2:配列/ハッシュの添え字にもできる

くどいようだが式なので、配列やハッシュの添え字にもできる。

var arr = new Array("あ","い","う","え");
var x = 10;

alert(arr[(x==10)?1:3]); // 結果:「い」

使う必要ないと思う。役に立つのはブックマークレットを作るときくらいかな。