JavaScriptの条件 (三項) 演算子 (?:) の演算子の優先順位でハマった罠

JavaScript には他の言語(C,C++など）と同じように 条件 (三項) 演算子 (?:) を使用できます。

条件 (三項) 演算子 (?:) (JavaScript)
http://msdn.microsoft.com/ja-jp/library/be21c7hw(v=vs.94).aspx

式と演算子 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#conditional_operator


条件 (三項) 演算子 は次のように使用します。

var flag = true;
var x = flag ? 1 : 0;

ここでは、flag が true の場合、x には 1 が代入されます。
flag が false の場合、x には 0 が代入されます。

条件によって代入する値を変えたい場合などに、if 文を使う場合と比べて手短に処理を記載することができるため、非常に重宝します。


今回ハマったのは、次のようなコードを書いてしまったからです。

var flag = true;
var x = 1 + flag ? 1 : 0;

意図としては、flag が true の場合、x には 1 + 1 で 2 が、flag が false の場合、x には 1 + 0 で 1 を入れようとしました。
しかし、結果は flag が true でも false でも x は 1 になります。


この時の演算子の優先順位を () で分かりやすく示すと次のようになります。

var flag = true;
var x = (1 + flag) ? 1 : 0;


つまり、1 に flag ? 1 : 0 の結果を足しているのではなく、1 + flag の結果を条件式として評価していたのです。
flag が true の場合、1 + flag は 2 に、flag が false の場合、1 + flag は 1 となるため、条件式は常に 真 となり、x が flag にかかわりなく常に 1 となったわけです。


式と演算子 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence

この表を見てわかるように、条件 (三項) 演算子 (?:) は下から 3 番目というかなり優先順位としては低い位置にいます。

そのため、加算/減算の方が先に実行され、そのあとに 条件 (三項) 演算子 (?:)  が実行されます。


もし、意図したとおり、1 に flag ? 1 : 0 の結果を足したい場合には、()で演算子の優先順位を制御する必要があります。

var flag = true;
var x = 1 + (flag ? 1 : 0);

これで、flag が true の場合には、x が 2 に、flag が false の場合には、x が 1 という意図通りの計算結果が得られます。


なかなか普段は意識しない演算子の優先順位ですが、計算結果が意図したとおりの値になっていなかった場合には、演算子の優先順位を疑ってみるのも一つでしょう。