各演算子を体感できる「練習問題＋解説」
「演算子の理解」は、実際に手を動かして“体感”することが一番早いです。
以下では、初心者向けにレベル別で 練習問題＋解説 を用意しました。
そのままブラウザの開発者ツール（F12 → コンソール）で試せます。
JavaScript 演算子トレーニング（初級〜上級）
初級：基本演算と代入
問題①：数値の計算
次の式を評価したらどうなるでしょう？
let result = 2 + 3 * 4;
console.log(result);
👉 考えてみよう！* と + のどちらが先？
結果：
14
理由：
演算子の優先順位で * が先に計算されるため、3 * 4 = 12 → 2 + 12 = 14。
問題②：複合代入
let x = 5;
x += 3;
x *= 2;
console.log(x);
結果：
16
理由：x += 3 → 8x *= 2 → 16
複合代入は「計算＋代入」を同時に行う！
問題③：型変換を含む比較
console.log(3 == "3");
console.log(3 === "3");
結果：
true
false
理由：
==は暗黙の型変換（文字列"3"を数値3にして比較）===は型まで厳密に比較するため、異なる型はfalse
ポイント：常に === / !== を使うのが安全！
中級：論理演算と条件演算
問題④：短絡評価（ショートサーキット）
console.log(0 || "default");
console.log("hello" && 123);
console.log(null ?? "fallback");
結果：
"default"
123
"fallback"
理由：
||：左が falsy（0 は偽）なら右を返す&&：左が truthy（”hello” は真）なら右を返す??：左がnullorundefinedのときだけ右を返す（0や空文字は対象外！）
問題⑤：条件（三項）演算子
let age = 20;
let result = (age >= 18) ? "大人" : "未成年";
console.log(result);
結果：
"大人"
理由：(条件) ? (true のとき) : (false のとき)
→ if文を1行で書ける便利構文！
問題⑥：論理代入（モダン構文）
let a = null;
let b = 0;
a ??= "default";
b ||= 10;
console.log(a, b);
結果：
"default" 10
理由：
??=は「左が null/undefined なら代入」||=は「左が falsy（0, “”, falseなど）なら代入」
ES2021以降で導入された新しい便利演算子！
上級：優先順位と右結合
問題⑦：右結合を理解する
let a = 2 ** 3 ** 2;
console.log(a);
結果：
512
理由：** は右結合なので、2 ** (3 ** 2) → 2 ** 9 → 512
問題⑧：代入も右結合！
let x, y, z;
x = y = z = 5;
console.log(x, y, z);
結果：
5 5 5
理由：
右から順に評価 → z = 5 → y = 5 → x = 5
すべてに同じ値が入る。
問題⑨：カンマ演算子のトリック
let value = (console.log("A"), console.log("B"), 42);
console.log(value);
結果：
A
B
42
理由：
カンマ演算子は「全ての式を左から順に評価し、最後の値を返す」。
チャレンジ（まとめ問題）
let x = 3;
let y = 4;
let result = x++ * 2 + --y ** 2;
console.log(result);
考えてみてください。順番がポイント！
結果：
13
解説：
x++→ 使ったあとに 1 増える（計算時は3、後で4になる）--y→ 先に1減る → 3--y ** 2→3 ** 2 = 93 * 2 + 9 = 6 + 9 = 15…と思うけど？
実際は優先順位で--y ** 2が--(y ** 2)ではなく( --y ) ** 2と解釈される！
実行結果は 15（すみません修正）
→ x++ * 2 + (--y) ** 2 = 3 * 2 + 9 = 15
総まとめ
| 覚えること | ポイント |
|---|---|
| 算術・比較・論理・代入の順に優先度を意識 | 括弧で明示が安全 |
=== と !== を基本にする | 型変換バグ防止 |
?? と ` | |
| 演算子も「式」である | 代入や論理演算も値を返す |