【JavaScript】for-of文 - 反復処理 / 配列から値を１つずつ取り出す繰り返し処理

JavaScriptのfor-of文について解説します。

for-of文

for-of文は“配列から値を１つずつ取り出す反復処理”です。

for文で同様の処理を実現できますが、配列のサイズだけ繰り返す場合はfor-of文が適しています。

基本構文

for( const 変数 of 配列 ) {
    // 処理...
}

変数、配列の部分は処理に応じて記述します。

処理の流れ

for-of文の処理の流れをサンプルコードと合わせて以下に示します。

1.継続・終了の判定

配列から取得可能な値が存在するか判定します。

『取得可能な値』は前回の繰り返しで取得した値の次の値で、初回は先頭の値です。

値が存在する場合は継続し、存在しない場合は終了します。

2.値の取り出し

配列から前回の繰り返しで取得した値の次の値（初回は先頭の値）を１つ取り出し、変数に記憶します。

let fruits = [ "Apple", "Orange", "Melon" ];

for( const value of fruits ) {
    // 処理...
}

サンプルコードでは配列fruitsから値を取り出し、変数valueに値を記憶します。

3.処理

処理（ブロック{}内）を実行します。

let fruits = [ "Apple", "Orange", "Melon" ];

for( const value of fruits ) {
    console.log(value);
}

サンプルコードではconsole.log(value)の部分です。

4.繰り返し

『1.継続・終了の判定』に戻ります。

以上がfor-of文の処理の流れです。

ここまでのサンプルコードを実行すると次の結果になります。

Apple
Orange
Melon

処理の流れ（具体例）

上記サンプルコードの具体的な処理の流れを以下に示します。

サンプル

let animals = [ "Dog", "Cat", "Fish" ];

___ih_hl_start
for( const animal of animals ) {
    console.log(animal);
}
___ih_hl_end

Dog
Cat
Fish

for文とfor-of文の違い

for-of文で実現可能な処理はfor文でも実現できます。

ただし、配列から値を１つずつ取り出して繰り返す処理はfor-of文の方が適しています。

例えば上記サンプルコードをfor文で書き換えると次のようになります。

let animals = [ "Dog", "Cat", "Fish" ];

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

Dog
Cat
Fish

コード量が増え、for-of文より複雑になりました。

for文では反復回数を条件式（i < animals.length）で制御し、配列から値を取り出す際はインデックスを指定する必要があります。

このように制御箇所やコード量が増えることは不具合が発生してしまう要因になります。

for文、for-of文の動作を理解し、適切に使い分けましょう。