JavaScriptのforループ徹底解説！基本構文からfor...inループまで

forループとは

まずは最も基本的な繰り返し処理であるforループから見ていきましょう。JavaScriptには主に2種類のforループが用意されています。1つ目は「初期化式・条件式・更新式」で構成される標準的なforループです。この形式では、最初に初期化ステートメントが一度だけ実行され、その後は各反復処理のたびに更新式が実行され、条件式が評価されます。

forループの基本構文

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

• 初期化式： ループ開始前に一度だけ実行されます（カウンタ変数の宣言など）。
• 条件式： 各反復の前に評価され、trueの場合のみループ内の処理が実行されます。
• 更新式： 各反復の後に実行されます（カウンタ変数の増減など）。

基本的なforループの例

実際のコード例を見てみましょう。

var step;
for (step = 0; step < 5; step++) {
    console.log('Taking step ' + step);
}

出力結果

このコードを実行すると、以下のような出力が得られます。

Taking step 0
Taking step 1
Taking step 2
Taking step 3
Taking step 4

この例では、変数stepが0から始まり、5未満である間だけループが続きます。各反復の終了時にstep++によって値が1ずつ増加し、条件を満たさなくなった時点でループが終了します。

for...inループとは

もう1つの形式がfor...inループです。for...in文は、指定した変数を使ってオブジェクトが持つすべての列挙可能なプロパティを順番に取り出します。プロパティごとに、指定されたステートメントが実行されます。オブジェクトの中身をまとめて処理したい場合に便利です。

for...inループの例

let person = {
    name: "John",
    age: 35
};
for (let prop in person) {
    console.log(prop, person[prop]);
}

出力結果

このコードを実行すると、以下のような出力が得られます。

name John
age 35

この例では、変数propにオブジェクトpersonの各プロパティ名（キー）が順番に代入され、person[prop]によって対応する値を取得しています。

まとめ

回数が決まっている繰り返し処理には標準的なforループを、オブジェクトのプロパティを順に処理したい場合にはfor...inループを使うのが基本です。それぞれの特徴を理解して、目的に応じて使い分けましょう。