ループ処理

同じ処理を繰り返し実行するための構文です。

for ループ

// 基本的な for ループ
for (let i = 0; i < 5; i++) {
  console.log(`カウント: ${i}`);
}

for ループは「初期化式・条件式・更新式」の 3 つで構成されます。

for (初期化式; 条件式; 更新式) {
  // 繰り返し実行する処理
}

break と continue

ループの途中で抜けたり、特定の回をスキップしたりできます。

for (let i = 0; i < 10; i++) {
  if (i === 5) break;        // i が 5 になったらループを抜ける
  if (i % 2 === 0) continue; // 偶数のときは以降をスキップ
  console.log(i); // 1, 3 (5 で停止)
}

while ループ

let count = 0;
while (count < 5) {
  console.log(`while ループ: ${count}`);
  count++;
}

do-while ループ

条件を後で評価するため、最低 1 回は実行されます。

let num = 0;
do {
  console.log(`do-while ループ: ${num}`);
  num++;
} while (num < 5);

for...of ループ（イテラブルオブジェクト用）

配列や文字列などの反復可能なオブジェクトに対して使用します。

const colors = ["赤", "緑", "青"];

for (const color of colors) {
  console.log(color); // 赤, 緑, 青
}

インデックスも欲しいとき

entries() を使うと [インデックス, 値] のペアを取り出せます。[index, color] は配列を分解して受け取る書き方で、詳しくは 配列 で扱います。

const colors = ["赤", "緑", "青"];

for (const [index, color] of colors.entries()) {
  console.log(`${index}: ${color}`); // 0: 赤, 1: 緑, 2: 青
}

for...in ループ（オブジェクト用）

オブジェクトのプロパティ（キー）を反復処理します。

const person = {
  name: "佐藤",
  age: 25,
  job: "エンジニア"
};

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

for...in は配列に使わない

for...in はオブジェクトのキーを列挙しますが、プロトタイプから継承したプロパティも拾ってしまう うえ、インデックスが数値ではなく文字列になるという特性があります。配列の反復には for...of、または forEach などの高階関数を使いましょう。

使い分けの目安

構文	向いている用途
for	回数が決まっている、インデックスを細かく制御したい
while	終了条件が回数で決まらない
for...of	配列・文字列など値を 1 つずつ取り出す
for...in	オブジェクトのキーを列挙する

次に読む

• 関数 — 繰り返し使う処理を「関数」としてまとめる