昨日の記事 ( JavaScriptの演算子の優先順位 x = a == b はどうやって処理される?)では、次のようなコードを紹介しました。
let a = 5;
let b = 5;
let x = a == b;
この場合、演算子の優先順位により、a == b;を最初に計算します。a と b は同じ値(5 == 5)であるため、a == b は true となります。
結果として
let x = true;
と同じ意味になる、という説明をしました。
では、こんな場合はどうなるでしょうか?
let x = a == b == c;
一見すると、
「a と b と c が全部同じかどうかを調べている」
ように見えますよね。
ですが、ここには少し注意が必要です。
ちょっと危ない例(読みづらい書き方)
❌ よく誤解される書き方
a == b == c
見た目は「3つを比べている」ように見えますが、
JavaScript は 左から順に処理を行います。
(== は左結合の演算子です)
そのため、この式は実際には次のように解釈されます。
(a == b) == c
つまり、
- まず
a == bを評価 - その結果(
trueまたはfalse)をcと比較
という順番で処理されています。
例1:数字で「たまたま合ってしまう」パターン
let a = 1;
let b = 1;
let c = 1;
console.log(a == b == c);
JavaScriptの処理順
a == b→1 == 1→truetrue == c→true == 1
ここでポイントです。== は型変換が起きる比較演算子なので、
trueは数値に変換されると1として扱われます
その結果、
true == 1 // → 1 == 1 → true
となり、最終結果は true になります。
「全部 1 だから true」
確かに結果は合っていますが、偶然そうなっているだけで、
とても危ない状態です。
例2:直感とズレ始めるパターン
let a = 1;
let b = 1;
let c = 2;
console.log(a == b == c);
処理順
a == b→truetrue == 2→1 == 2→false
結果は false。
ここまでは「まあ、そうかな」と思えるかもしれません。
ですが、次の例がさらに厄介です。
例3:もっと怖い例(全部同じに見えないのに true)
let a = 2;
let b = 2;
let c = 1;
console.log(a == b == c);
処理順
a == b→2 == 2→truetrue == 1→1 == 1→true
結果は true。
2, 2, 1 なのに true?
と、かなり違和感がありますよね。
なぜこんなことが起きるのか?
この式は、もはや
「a と b が同じで、かつ c が 1 かどうか」
のような、まったく別の条件に変形されています。
(a == b)の結果がtrue- その
trueとcを==で比較 true == 1がtrueになってしまう
これが原因です。
「3つ全部同じ」を本当に判定したい場合
その場合は、2回比較する必要があります。
✅ 正しい書き方
(a == b) && (b == c)
例:
let a = 2, b = 2, c = 1;
console.log((a == b) && (b == c)); // false
これなら、
aとbが同じかbとcが同じか
をそれぞれ確認でき、本当に「3つがすべて同じかどうか」を正しく判定できます。
まとめ(ここだけ覚えればOK)
a == b == cは 3つを比較しているわけではない- 実際には
(a == b)の結果(true / false)を、cと比較している - 「3つが同じか」を判定したい場合は
✅(a === b) && (b === c)と書く
このような書き方は、省略形に慣れていると無意識に書いてしまいがちで、
気づかないうちに、想定とは違う動作を引き起こしてしまう可能性があります。
慣れてきたからこそ、「この処理順で本当に合っているかな?」と、
どこか頭の片隅で立ち止まって確認する習慣を持つことが大切かもしれません。
