【JavaScript】for文(ループ処理)の種類と使い方for…of/for…in

プログラミングにおいて、同じ処理を繰り返し実行することが非常に多くあります。

JavaScriptでは、複数のループ処理が行える構文が存在しますが、本記事ではその中でも利用頻度の高い「for文」について詳しく解説していきます。

for文の種類と違い

for文には最も多く利用される通常の型と拡張for文と呼ばれるものが存在します。

• for （通常の型）
• for…of （拡張for文）
• for…in （拡張for文）

通常の型では指定した回数や条件に応じて繰り返し処理を実行することに対して

拡張for文は配列やコレクションの全要素に対して順番に処理を行うことができます。

利用頻度が多く冗長になりがちなfor文をコンパクトに記述することができる便利な機能です。

ただし、先頭の要素から1つずつ値を取り出す処理しかできないため、汎用性が低いという欠点もあります

通常のfor文と拡張for文の違いを理解して用途に応じて使い分けるようにしましょう

拡張for文のメリットデメリットは以下の通りです。

基本的なfor文の使い方

それでは実際に各種for文の使い方を紹介していきます。

for文 （通常の型）

もっとも一般的なfor文を紹介します。基本的な構文は以下の通りです。

構文

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

解説

初期化式とは、ループの最初に1度だけ実行される式で、ループ回数をカウントする際に利用する変数を定義することが一般的です。

条件式とは、ループを継続させるかどうかを評価するための式です。条件式が真(true)であればループを継続して、偽(false)であればループを停止します。

更新式とは、各ループが終了する際に実行される式です。初期化式で定義したループをカウントする変数の値を更新します。

例文

以下の処理は0~4までの値をコンソールに出力してiが5になった場合、条件式の結果がfalseとなるため処理を停止します。

for (let i = 0; i < 5; i++) {
    console.log(i);
}

配列を処理するには以下のように記述することもできます。

const pets = ["dog","cat","rabbit"];
for (let i = 0; i < pets.length; i++) {
    console.log(pets[i]);
}

条件式で配列名の後に記述したlengthは指定した値の長さを返してくれるメソッドです。

今回の場合は定義した配列の要素の数を返すため、petsの要素数である3を返します。

初期化式で定義した変数iが3になるまで処理を継続します。

コンソールには、dog,、cat、rabbitを表示します。

for…of文

for…of文は、オブジェクト（配列や文字列）などに対して繰り返し処理を行うための構文です。指定したオブジェクトの要素の数に応じて処理を行います。

変数に格納されるのはオブジェクトに指定した要素の値です。

構文

for (要素変数 of オブジェクト) {
    // 繰り返し実行する処理（要素変数を使用）
}

解説

オブジェクトとは、配列や文字列を指定します。一般的には処理を行いたい配列を指定することが多いです。

要素変数とは、オブジェクト(例として配列と仮定)に指定した、要素の値(value)を一つずつ格納します。

例文

fruitsという配列を定義して、要素変数にはfruitという定数(変数)を定義しておきます。

fruitには配列fruitsの要素が1つずつ格納され、要素の数だけループを実行します。

今回の例ではコンソールにapple、banana、orangeと順番に値が出力されます。

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

for…in文

for…in文は、for…of文同様にオブジェクト（配列やプロパティ）などに対して繰り返し処理を行うための構文です。指定したオブジェクトの要素の数に応じて処理を行います。

変数に格納されるのはオブジェクトに指定した要素の添え字です。

構文

for (添え字 of オブジェクト) {
    // 繰り返し実行する処理（添え字を使用）
}

解説

オブジェクトとは、配列やプロパティを指定します。一般的には処理を行いたい配列やプロパティを指定することが多いです。

添え字とは、オブジェクト(例として配列と仮定)に指定した、要素の添え字を一つずつ格納します。

例文

for…ofで使用したものと同じ配列を使用して解説します。for…ofと異なるのは使用する変数がfruitではなくfruitNumberという点です。

以下のコンソールでの出力は配列の要素の値であるapple、banana、orangeが出力されずに、その添え字となる0~2が出力されます。

const fruits = ['apple', 'banana', 'orange'];
for (const fruitNumber of fruits) {
    console.log(fruitNumber);
}

上記は以下のように書き換えることで要素の値を出力することもできます。

const fruits = ['apple', 'banana', 'orange'];
for (const fruitNumber of fruits) {
    console.log(fruits[fruitNumber]);
}

出力結果はapple、banana、orangeとなります。

まとめ

JavaScriptでは、繰り返し処理を行うために複数のループ処理がありますが、今回はその中でもfor文にフォーカスを当てて解説させていただきました。

for文にはfor、for…of、for…inの3種類のループ文が利用できます。それぞれの文法や使い方を理解することで、効率的なプログラムの作成が可能となります。

適切な状況に応じて選択し、柔軟に利用していきましょう。