概要

ループは、プログラミングにおける最も基本的な制御構文だ。
しかしJavaScriptでは、ループの手段が多すぎる。

「なんとなく使ってる」では、バグ・非効率・可読性の劣化を招く。
この記事では、それぞれのループ構文の構文的な違いと使い分けの判断軸を、設計目線で整理していく。

対象環境

ES6以降のJavaScript（Node.js / ブラウザ）

構文	主な用途	副作用あり	return値	中断可	イテラブル対応	適しているケース
`for`	汎用	✅	❌ undefined	✅ `break`可	✅	制御フローが複雑 / 索引アクセスが必要
`forEach`	配列の処理	✅	❌ undefined	❌不可	✅	単純な副作用処理
`map`	配列を変換して返す	❌推奨外	✅ 配列	❌不可	✅	配列変換ロジック
`reduce`	配列を単一値に畳み込む	❌推奨外	✅ 任意値	❌不可	✅	集計・合計・構造変換
`for...of`	任意のイテラブル処理	✅	❌ undefined	✅ `break`可	✅	配列 / Set / Map の繰り返し処理
`for...in`	オブジェクト列挙	✅	❌ undefined	✅ `break`可	❌	キー列挙のみ。配列には不向き

for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

items.forEach(item => {
  console.log(item);
});

const doubled = items.map(x => x * 2);

const total = items.reduce((acc, cur) => acc + cur, 0);

for (const item of items) {
  console.log(item);
}

for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

→ ✅ Object.hasOwn() との併用が安全：

for (const key in obj) {
  if (Object.hasOwn(obj, key)) {
    // ...
  }
}

items.map(item => console.log(item)); // ❌ 非推奨

→ ✅ forEach もしくは for...of を使うべき

for (const i in arr) {
  console.log(arr[i]); // ❌ インデックス順を保証しない
}

→ ✅ for, for...of が適切

items.forEach(item => {
  if (item > 10) return; // ❌ これは次のループをスキップしない
});

→ ✅ for / for...of に置き換える

ループ処理とは、単なる反復ではない。
意図を明示するための制御構造であり、責任の分岐点でもある。

すべてのループ構文には、それが設計された理由がある。
その意図を汲み取り、機能だけでなく意味を持った選定を行うこと。

コードの動作を決めるのは構文だが、
コードの価値を決めるのは設計である。