JavaScriptのfor… in と for…of

for 文とは

for 文は、繰り返し処理の制御構造の一つです。一般的には、変数を変化させながら処理を行うために使用します。その構文の別パターンとして、in、of を使って列挙可能な配列やオブジェクトなどの反復処理を行うことができます。

for…in 記述を配列を例に見てみましょう。

const ar=[10,2,30,24,5];
let sum=0;
for (let index in ar) {
   sum = sum + ar[index];
} 
// sum には、ar の中身の加算値 10+2+30+24+5 が入る

index には、0から4までの配列arのインデックス番号が入ります。この例では、0から順番に4までの数値が入りますが、仕様ではその順番は保証されていないため、順序が影響を受ける処理を行う場合には、通常のfor文で次のように書きます。

const ar=[10,2,30,24,5];
let str=""; 
for (let index=0 ; index<ar.length ; index++) { 
    str = str + ar[index].toString(); 
}

2つの書き方は、index の順序が保証されるかどうかだけの違いです。for…in の利点は、for 文が何をしようとしているか（この例では配列からインデックスを取り出す）を明確に示しやすいという点でしょう。しかし、どちらの方法で書いても問題ありません。

for…in　とよく似た構文に for…of があります。for…in は配列などからインデックスを取り出しますが、for…of は中身を取り出すことができます。

const ar=[10,2,30,24,5]; 
let sum=0;
for (let item of ar) {
    sum = sum + item;
}

of を使うと、配列などの中身を変数に取り出せますので、for文自体がコンパクトになり、何をやっているかがみやすくなりました。

順序関係なく、列挙可能な配列などから順次値を取り出して処理する場合、for…in、for…of を使うとコードが読みやすくなります。インデックスを用いるか、中身だけでよいのかで in を使うか、ofを使うか選びましょう。なお、for…inもfor…ofもオブジェクトや連想配列でも利用できます。

この記事は、ECMAScript 2015(ES6) を前提に書いています。古い実装では、異なる場合があります。