JavaScript | 基礎構文:数値・演算 – インクリメント・デクリメント

JavaScript JavaScript
スポンサーリンク

初心者向け:インクリメント・デクリメントの基本

数値を「1だけ増やす/減らす」ための専用演算子がインクリメント(++)とデクリメント(–)です。カウンタやループでよく使います。


演算子の種類と基本動作

  • インクリメント(++): 値を 1 増やす
let x = 5;
x++;      // x は 6
++x;      // x は 7
JavaScript
  • デクリメント(–): 値を 1 減らす
let y = 5;
y--;      // y は 4
--y;      // y は 3
JavaScript

ポイント: どちらも「再代入」が起きるため、定数(const)では使えません。let で宣言した変数に使います。


前置(++i / –i)と後置(i++ / i–)の違い

  • 後置: 式の評価「後」に値が変わる(元の値を返す)
let a = 10;
const r1 = a++;  // r1 = 10(返り値は増やす前の値)、a は 11
JavaScript
  • 前置: 式の評価「前」に値が変わる(更新後の値を返す)
let b = 10;
const r2 = ++b;  // r2 = 11(返り値は増やした後の値)、b は 11
JavaScript
  • 比較例(重要な違い):
let i = 0;
while (i++ < 3) {
  // ループ内での i は 1, 2, 3
}

let j = 0;
while (++j < 3) {
  // ループ内での j は 1, 2
}
JavaScript

結論: 返り値を使う複雑な式では誤解が起きやすい。読みやすさ重視なら i += 1i = i + 1 を使うと安全。


代替表現と実用パターン

  • 同じ意味の別書き
i++;     // i = i + 1 と同じ
i--;     // i = i - 1 と同じ
i += 1;  // 読みやすく安全(返り値の混乱がない)
i -= 1;
JavaScript
  • for ループの定番
for (let i = 0; i < 5; i++) {
  console.log(i); // 0,1,2,3,4
}
JavaScript
  • カウンタの更新(条件分岐と組み合わせ)
let success = 0, fail = 0;
const results = [true, false, true];
for (const ok of results) {
  ok ? success++ : fail++;
}
JavaScript

よくあるつまずきと注意点

  • 副作用のある返り値: arr[i++] など「読み取りと更新を同時に行う」書き方は誤読の原因。分けて書くと安全。
const value = arr[i];
i++;
JavaScript
  • const には使えない: 再代入が必要なため、const 変数に対して ++-- はエラー。
  • 数値以外への適用: 文字列や boolean に使うと数値へ暗黙変換されるが、意図しない結果になりがち。必ず数値だけに使う。
let s = "5";
s++;         // s は 6(文字列が数値化される)。混乱のもと
JavaScript
  • NaN のまま: 数値化できない値に使うと NaN になる。
let t = "foo";
t++;        // t は NaN
JavaScript
  • BigInt は別物: BigInt でも ++ は使えるが、Number と混在させない。
let n = 10n;
n++;        // 11n
JavaScript

使い分けの指針

  • 返り値を使わず「1増やすだけ」なら i++ で簡潔に。
  • 式の中で返り値が必要なら「前置/後置の違い」を明確に理解するか、i += 1 に切り替える。
  • チームや学習段階では「更新は別文で書く」ルールにすると読みやすさが上がる。

ミニ練習

  • 問1: 変数 i を 0 で初期化し、3回インクリメントして最終値を表示せよ。
let i = 0;
i++; i++; i++;
console.log(i); // 3
JavaScript
  • 問2: let a = 5; から、前置と後置の返り値の違いを確認せよ。
let a = 5;
const r1 = a++; // r1 = 5, a = 6
const r2 = ++a; // r2 = 7, a = 7
console.log(r1, r2, a);
JavaScript
  • 問3: 配列の全要素を順に表示するが、インデックス更新は「別文」で安全に記述せよ。
const arr = ["a", "b", "c"];
let idx = 0;
while (idx < arr.length) {
  console.log(arr[idx]);
  idx += 1; // または idx++
}
JavaScript
  • 問4: const cnt = 0; に対して cnt++ を実行すると何が起こるか考え、正しい書き方に直せ。
// cnt++ は TypeError(const は再代入不可)
let cnt = 0;
cnt++; // OK
JavaScript

まとめ

  • ++ は 1増、– は 1減。返り値のタイミングで前置/後置が異なる。
  • 読みやすさ優先なら i += 1 や更新を別文に分ける。
  • const や非数値には使わない。暗黙変換や NaN を避ける。
  • ループやカウンタで頻出。基本だが、返り値の違いを正しく理解するとバグを防げる。
タイトルとURLをコピーしました