for...inループの落とし穴

JavaScriptにおけるfor...inループの配列反復における問題点

日本語訳

JavaScriptにおいて、配列の反復処理にfor...inループを使用することは一般的に推奨されません。なぜでしょうか？

プロパティ名の反復:

• for...inループは、これらの数値インデックスだけでなく、配列に定義された他のプロパティも反復します。これは、意図しない結果を引き起こす可能性があります。
• for...inループは、オブジェクトのプロパティを反復処理するために設計されています。配列は、数値インデックスを持つ特殊なオブジェクトです。

インデックス順序の保証なし:

• for...inループは、プロパティの反復順序を保証しません。これは、配列の要素を正しい順序で処理する必要がある場合に問題となります。

非配列プロパティの処理:

• 配列に非配列プロパティ（例えば、カスタムメソッドや属性）を追加した場合、for...inループはこれらのプロパティも反復します。これは、配列要素の処理に不要なオーバーヘッドを引き起こす可能性があります。

パフォーマンスの問題:

• for...inループは、配列の要素を反復する際に、プロパティ名の検索が必要なため、forループよりもパフォーマンスが低下する可能性があります。

代替手段:

• 配列の反復処理には、forループまたはforEachメソッドを使用することを推奨します。これらの方法により、インデックス順序が保証され、非配列プロパティを処理する必要がありません。

例

// for...inループ（推奨しない）
const array = [1, 2, 3];
for (const index in array) {
  console.log(array[index]);
}

// forループ（推奨）
const array = [1, 2, 3];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// forEachメソッド（推奨）
const array = [1, 2, 3];
array.forEach(element => {
  console.log(element);
});

const array = [1, 2, 3];
array.myCustomProperty = "hello";

for (const key in array) {
  console.log(key, array[key]);
}

このコードは、次の出力を生成します。

0 1
1 2
2 3
myCustomProperty hello

ご覧のように、for...inループは、配列の要素だけでなく、カスタムプロパティであるmyCustomPropertyも反復しています。

const array = [1, 2, 3];
array[100] = 4;

for (const key in array) {
  console.log(key, array[key]);
}

このコードは、次の出力を生成する可能性があります。

0 1
100 4
1 2
2 3

const largeArray = new Array(1000000);

// for...inループ（推奨しない）
for (const key in largeArray) {
  // 処理
}

// forループ（推奨）
for (let i = 0; i < largeArray.length; i++) {
  // 処理
}

大規模な配列に対してfor...inループを使用すると、パフォーマンスが低下する可能性があります。

forループ:

• 最も基本的な方法であり、インデックスを直接操作して配列の要素にアクセスします。

const array = [1, 2, 3];

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

forEachメソッド:

• 配列の各要素に対してコールバック関数を呼び出します。

const array = [1, 2, 3];

array.forEach(element => {
  console.log(element);
});

for...ofループ:

• ES6で導入された新しい構文で、配列の要素を直接反復します。

const array = [1, 2, 3];

for (const element of array) {
  console.log(element);
}

mapメソッド:

• 配列の各要素に対してコールバック関数を呼び出し、その結果を新しい配列に格納します。

const array = [1, 2, 3];

const newArray = array.map(element => element * 2);
console.log(newArray); // [2, 4, 6]

filterメソッド:

const array = [1, 2, 3, 4, 5];

const evenNumbers = array.filter(element => element % 2 === 0);
console.log(evenNumbers); // [2, 4]

reduceメソッド:

const array = [1, 2, 3];

const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 6