【JavaScript入門】演算子の優先順位

　演算子には「どの演算子が先に計算されるか」という優先順位が存在します。優先順位が高い演算子ほど先に評価され、同じ優先順位同士の場合は（特に断りがなければ）左から右へ順に計算されます。ただし、べき乗（**）のように右結合（右から左）の演算子も存在します。ここでは、JavaScriptでよく使われる演算子の優先順位を一覧表と共に示し、理解しやすいように大まかなグループ分けも紹介します。

１．詳細な演算子の優先順位（例）

　下記の表は、最も高い番号の演算子から先に処理されます。たとえば (...)（グループ化）やオブジェクト/配列の要素アクセスは最優先（番号が大きい）で評価され、論理演算子（&&, ||）や代入演算子（= など）は後の方（番号が小さい）で評価されます。

優先順位演算子説明
21( … )グループ化
… . …オブジェクトや配列の値へのアクセス
… [ … ]
20new … ( … )引数つきでオブジェクトを生成
… ( … )関数呼び出し
19new …引数なしでオブジェクトを生成
18… ++後置インクリメント
… --後置デクリメント
17! …単項演算子（否定）
+ …単項プラス
- …単項マイナス
++ …前置インクリメント
-- …前置デクリメント
typeof …型を文字列で返す
delete …オブジェクトのプロパティを削除
await …非同期処理の待機（非同期制御で登場）
16… ** …べき乗
… * …乗算
15… / …除算
… % …剰余
14… + …加算
… - …減算
13… << …左シフト（ビット演算）
… >> …右シフト
… >>> …符号なし右シフト
12… < …比較
… <= …
… > …
… >= …
11… == …等価
… != …不等価
… === …厳密等価
… !== …厳密不等価
10… & …ビット単位 AND
9… ^ …ビット単位 XOR
8… | …ビット単位 OR
7… && …論理積 AND
6…
5… ?? …Null 合体演算子
4… ? … : …条件（三項）
3… = …代入
… += … など代入演算子
2yield …（本書では解説対象外）
1… , …カンマ演算子

２．大まかな優先順位の分類

　複雑な式を書く際には、優先順位をすべて暗記するのではなく、以下のようにグループ化しておくと役立ちます。さらに詳しい場合や曖昧なときは括弧 () を使って意図を明示すると安全です。

優先順位演算子説明
高い( ... )グループ化、先に計算
... . ... / ...[ ... ]オブジェクトや配列のアクセス
... ( ... )関数の呼び出し
... * ... / ... % ...乗除および剰余を先に計算
... + ... / ... - ...加減
低い... < ... など値の比較

３．サンプルコード

　複数の演算子を混在させたときに、どの順番で評価されるかを観察してみましょう。ファイル名は「priorityExample.html」として保存し、ブラウザで開いてコンソールをチェックします。

【priorityExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>priorityExample.html</title>
</head>
<body>
  <h1>演算子の優先順位のサンプル</h1>
  <p>開発者ツールのコンソールをチェックしてください。</p>

  <script>
    // 1. カッコと乗除加減
    console.log('例1:', 2 + 3 * 5);         // 2 + (3 * 5) => 17
    console.log('例2:', (2 + 3) * 5);       // (2 + 3) * 5 => 25

    // 2. 関数呼び出しと加算の組み合わせ
    function double(x) { return x * 2; }
    console.log('例3:', 1 + double(3) * 4); // double(3)=6 => 1 + 6 * 4 => 1 + 24 => 25

    // 3. 比較と論理演算
    console.log('例4:', 10 > 3 && 2 + 2 === 4); 
    // => (10 > 3) && (2+2===4) => true && true => true

    console.log('例5:', 2 ** 3 ** 2);
    // => 2 ** (3 ** 2) = 2 ** 9 = 512 (べき乗は右結合)

    // 4. 代入は優先順位が低い
    let x = 5;
    x += 2 * 3; // => x = x + (2*3) => x=11
    console.log('例6:', x);

    // 5. カンマ演算子(あまり使わないが例)
    let result = (x = 10, x + 20, x * 3);
    // カンマ演算子は左から順に評価しつつ、最後の式の結果が返る
    console.log('例7:', result); // (10, 30, 10*3=30) => result=30
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

例1: 17
例2: 25
例3: 25
例4: true
例5: 512
例6: 11
例7: 30

まとめ

  • 優先順位の高い演算子から順に処理され、同じ順位の場合は基本的に左結合。ただし、べき乗演算子 ** は右結合に注意。
  • スクリプトが複雑になる場合は、括弧 (...) を使用して意図的に評価順を指定すると可読性と安全性が向上する。
  • 大まかに「括弧 > オブジェクト/配列アクセス > 乗除 > 加減 > 比較 > 論理演算 > 条件演算子 > 代入 > カンマ」のような優先度がある。

　このように優先順位を理解しておくことで、思わぬバグを防げるだけでなく、コードの挙動を正確に把握できるようになります。複雑な式では括弧による明示的な順序指定を積極的に行うのがおすすめです。