JavaScriptで配列をループ処理する方法まとめ｜for文・while文・do…while文の使い方

JavaScriptには、配列をループ処理するためのさまざまな方法が用意されています。それぞれの特徴を理解して使い分けることで、より効率的で読みやすいコードを書くことができます。本記事では、代表的なループ構文の基本と実行例をわかりやすく解説します。

JavaScriptのforループ

まずは基本となるforループから見ていきましょう。JavaScriptのforループには主に2つの形式があります。1つ目は「初期化式・条件式・更新式」を指定する形式です。最初に初期化ステートメントを実行し、各イテレーションのたびに更新式を実行してから条件式を評価します。条件がtrueである限り、ループは繰り返されます。

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

for...inループ

もう1つの形式がfor...inループです。for...in文は、オブジェクトが持つすべての列挙可能なプロパティに対して、指定した変数を順番に割り当てながら繰り返し処理を行います。プロパティごとに、指定されたステートメントが実行されます。

let person = {
    name: "John",
    age: 35
};

for (let prop in person) {
    console.log(prop, person[prop]);
}

実行結果：

name John
age 35

なお、for...inは配列にも使用できますが、処理順序が保証されない場合があるため、配列の反復処理には後述のfor...ofやforEach()を使うことが推奨されています。

JavaScriptのwhileループ

whileループは、条件式がtrueである限り、ステートメントやコードブロックを繰り返し実行します。条件式がfalseになった時点で、ループは終了します。

let i = 0;
while (i < 5) {
    console.log("Hello");
    i = i + 1;
}

実行結果：

Hello
Hello
Hello
Hello
Hello

do…whileループ

do...whileループはwhileループとよく似ていますが、条件判定がループの最後に行われる点が異なります。そのため、条件がfalseであっても、ループ内の処理は必ず最低1回は実行されるという特徴があります。

let i = 0;
do {
    console.log("Hello");
    i = i + 1;
} while (i < 5);

実行結果：

Hello
Hello
Hello
Hello
Hello

補足：配列ならfor...ofやforEach()も便利

配列を扱う場合は、ES6で導入されたfor...of構文やforEach()メソッドがよく使われます。インデックス管理が不要で簡潔に書けるのが魅力です。

// for...of の例
const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
    console.log(fruit);
}

// forEach() の例
fruits.forEach(function(fruit, index) {
    console.log(index + ": " + fruit);
});

用途に応じて適切なループ構文を選択することで、可読性と保守性の高いコードを実現できます。まずは基本のfor文とwhile文をしっかり押さえ、必要に応じてfor...ofやforEach()も活用していきましょう。