JavaScriptで配列をループする方法は多数ありますが、どれがどういうメリットがあるのかよくわからなかったので、調査してみました。
一般的に以下の3つがよく使われ、それぞれにメリットがあります。
用途やシチュエーションによって使い分けるのがおすすめです。
1. forEach
配列の要素を一つ一つ処理するのに最も一般的です。
const array = [1, 2, 3, 4];
array.forEach((element, i) => {
console.log(element, i);
});
メリット:
- シンプルで直感的。
- コールバック内で要素に対して処理を簡単に書ける。
- インデックスが使える。
デメリット:
-
returnで処理を途中で止められない（途中でループを抜けたい場合は他の方法が必要）。
2. for...of
モダンで直感的な配列のループ方法。forEachと異なり、breakやcontinueでループを制御できます。
const array = [1, 2, 3, 4];
for (const element of array) {
console.log(element);
}
メリット:
- 直感的で、途中でループを中断できる (
break,continueが使用可能)。 - 他の反復可能オブジェクト（
Set,Mapなど）にも使用できる。
デメリット:
- インデックスが必要な場合には使いにくい（ただし、カウンターを別途用意すれば解決可能）。
3. for ループ
もっとも古典的な for ループもあります。カウンターベースでのループやインデックス操作が必要なときに使います。
const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
メリット:
- インデックスが必要な場合や特定の要素だけを処理したい場合に便利。
- ループの範囲や進行を細かく制御可能。
デメリット:
- コードが長くなり、他のループ方法と比べて少し冗長。
4. map
配列をループして、新しい配列を生成する場合に最適。配列の要素を変換して別の配列を作りたいときに使います。
const array = [1, 2, 3, 4];
const doubled = array.map(element => element * 2);
console.log(doubled); // [2, 4, 6, 8]
メリット:
- 新しい配列を返すので、元の配列を変えずに変換処理ができる。
デメリット:
- 単にループするだけでなく、配列の各要素に変換が必要な時に使うべき。
5. reduce
配列の要素を一つ一つ累積的に処理し、最終的に単一の値を生成する場合に使用します。
const array = [1, 2, 3, 4];
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10
メリット:
- 累積的な処理や、配列の要素から単一の値を作り出すのに最適（合計、平均、オブジェクト生成など）。
デメリット:
- 初心者には少し難しく感じるかもしれない。
- 単純に配列を走査する目的には不向き。
まとめ
-
単純なループ:
forEachやfor...ofが使いやすく、一般的にはこれで十分です。 -
途中でループを制御したい:
for...ofが最も適しており、シンプルで直感的です。 -
新しい配列を生成したい場合:
mapやfilterなどの高階関数を使うことで、効率よく操作ができます。 -
配列の要素を一つ一つ累積的に処理し、最終的に単一の値を生成する場合:
reduceやsome、every、find、findIndex、includesなどの高階関数を使う。 -
インデックスが必要な場合: 古典的な
forや、forEachのコールバックにインデックス引数を利用する方法もあります。
場面に応じて最適な方法を選ぶと、コードが読みやすく効率的になります。