JavaScript | カンマ演算子

1. カンマ演算子とは？

JavaScriptのカンマ演算子 , は、1つの式の中で複数の処理を順番に実行できる演算子です。

ポイントは：

1. 左から順番に式を評価する
2. 最後の式の結果が返される

基本の書き方

式1, 式2, 式3

式1, 式2, 式3

• 式1 → 式2 → 式3 の順に処理される
• 全体の結果は 式3の値 になる

2.2️⃣ 例題1：簡単な計算

let a, b, c;

c = (a = 2, b = 3, a + b);

console.log(c); // 5

let a, b, c;

c = (a = 2, b = 3, a + b);

console.log(c); // 5

解説

1. a = 2 → aに2を代入
2. b = 3 → bに3を代入
3. a + b → 2 + 3 = 5
4. 式全体の結果 = 5 → cに代入

💡 ポイント：最後の式 a + b の値が全体の結果になります

3. 例題2：for文での活用

for (let i = 1, j = 5; i <= 3; i++, j--) {
  console.log("i = " + i + ", j = " + j);
}

for (let i = 1, j = 5; i <= 3; i++, j--) {
  console.log("i = " + i + ", j = " + j);
}

解説

• let i = 1, j = 5
  → iとjを同時に初期化
• i++, j--
  → iは1ずつ増加、jは1ずつ減少
• 実行結果：

i = 1, j = 5
i = 2, j = 4
i = 3, j = 3

💡 ポイント：カンマ演算子を使うと、複数の変数を同時に更新できます

4. 例題3：変数に複数処理をまとめる

let result;
result = (console.log("Step 1"), console.log("Step 2"), 10 * 2);
console.log("Result = " + result);

let result;
result = (console.log("Step 1"), console.log("Step 2"), 10 * 2);
console.log("Result = " + result);

解説

1. "Step 1" が表示される
2. "Step 2" が表示される
3. 10 * 2 = 20 が result に代入

• 出力：

Step 1
Step 2
Result = 20

💡 ポイント：処理の順番をまとめつつ、最後の値だけ変数に代入できます

5. 注意点

• カンマ演算子は処理をまとめる便利な道具ですが、
  無理に使いすぎるとコードが読みにくくなるので注意
• 「最後の式の結果だけが重要」という場面で使うとわかりやすいです

まとめ

• カンマ演算子 , は 複数式を順番に評価
• 最後の式の値が返る
• for 文や変数への代入で役立つ

練習問題

1. 次のコードの出力は？

let x;
x = (1 + 2, 3 + 4, 5 + 6);
console.log(x);

let x;
x = (1 + 2, 3 + 4, 5 + 6);
console.log(x);

2. for 文で i を 0→2、j を 10→8 に更新して表示するコードを書いてみよう