JavaScriptのif文内でor条件を使用するときの括弧の扱いについて

Question

if文の条件内でor条件を使用するとき
下記のようなコードでは、常に条件式がtrueになってしまうため
求めている挙動にならないということは理解しました。
参考サイト

if (x === 5 || 7 || 10 || 20) {
  // コードを実行する
}

↓
複数のor条件の場合はこのような書き方でないといけない
ことはわかりました。

if (x === 5 || x === 7 || x === 10 ||x === 20) {
  // コードを実行する
}

では、xは同じなので下記の書き方ならどうだろうと思い
コードを作成してみました。
※実行環境はTypeScript playgroundです。

let x = 7

const y = (x: number) => {
    if (x === (5 || 7 || 10 || 20)) {
        console.log('number match!')
        return
    }
    console.log('not match!')
}
y(x)

出力結果は"not match"でした。
or条件の時に中括弧では、条件とマッチせずに
出力結果が"not match"となってしまうのは
なぜでしょうか。
どなたか詳しい方ご教示いただけますと幸いです。

Comments

[int32_t]

「中括弧」とはふつう {} のこと指すと思います。

[takochan1192]

おっしゃる通りです。失礼致しました。
修正致します。

Answer 1

if (x === 5 || x === 7 || x === 10 ||x === 20) {

これでいいので、このように書いてください。どうしても x を繰り返すのが納得できないなら、

if ([5, 7, 10, 20].includes(x)) {

です。

---

    if (x === (5 || 7 || 10 || 20)) {

a || b というのは 「a がtrueに評価されるときは a、そうでなければ b」という意味です。よって、(5 || 7 || 10 || 20) というのは(数値は0以外がtrueなので) 5 と同じ意味です。

Comments

[takochan1192]

なるほど、という事はif文内はx===5となるので、not matchが出力されていたのですね。
ありがとうございました。

Answer 2

下記の書き方ならどうだろうと思い

x === (5 || 7 || 10 || 20)は、カッコ内の5 || 7 || 10 || 20が先に処理されて5となり、x === 5 と同じ意味になります。

Comments

[takochan1192]

なるほど優先順で左から順に判定されていたのですね。
ありがとうございます。

Answer 3

演算子の優先順位 - JavaScript | MDN

• 厳密等価 (===)は優先度9
• 論理 OR (||)は優先度4

つまり
x === 5 || 7 || 10 || 20
は
((((x === 5) || 7) || 10) || 20)
ということですね
条件式||は前の式がtrueになった時点で評価をやめる（前のtrue値を優先する）ので
仮に、xが5ではないときは7、xが5のときはtrue
を返すためxがどんな値であってもつねにtrueと判断されます

Comments

[takochan1192]

非常に分かりやすく、ご回答いただきありがとうございます。
なるほど、括弧などを付けて追ってみると
私でも分かりやすく理解できました。
参考サイトもありがとうございます。
勉強させていただきます。