【JS】様々なループ。forEach, for, for of, map, reduce, filterの違いと使いどころ #JavaScript

配列から要素を一つづつ取り出す処理をmapで記述していたが、forEachで簡単に記述できることが判明。

ついでに、主なループ処理の使い所もまとめた個人用メモです。

項目	メソッド/文	使い所
for	文	回数を指定したい場合
for of	文	要素を一つ一つ抜き出したい場合。クロージャ（closure）でないので、定義した変数がグローバル（処理の外でも有効）になる。
forEach	メソッド	要素を一つ一つ抜き出したい場合。クロージャ（closure）なので、定義した変数はローカル。余計な変数が増えない。
map	メソッド	要素を一つ一つ抜き出し処理を加え、結果を配列で返す。非破壊。
reduce	メソッド	要素を一つ一つ抜き出し処理し、一意の値を返す。非破壊。一つの値が欲しい場合に使う。
filter	メソッド	要素を一つ一つ抜き出し、条件がtrueとなった要素のみ残す。非破壊
for in	文	対象がオブジェクト。配列ではない。

いずれもループで回すので、使い方によっては同じ処理ができるが、目的とする用途が異なる。

どれを使うかの基準

大きなポイントは以下２点。

(1) メソッドか文か？
余計な変数を増やしたくない場合や、処理内でのみ変数を定義したい場合はメソッドを使う。

メソッドは変数を一旦クリアする文処理量は増えるが、閉じた空間で変数を使うので処理がわかりやすくなる。

(2) 出力は何か？
要素を一つづつ取り出し、元の配列に依存しない処理結果を返したい場合はforやforEachを使う。

元の要素を一つ一つ変換したい場合はmap。

各要素を使った処理結果から一つの値をえたい場合はreduce。

特定の要素のみ残したい場合はfilterを使う。

要素を一つづつ取り出しconsole.logで出力するプログラムはいずれのメソッド・文でもできる。

forEach

arr = [1,2,3,4]

arr.forEach( (elem, index) => {
    console.log(elem)
})

//出力
1
2
3
4

処理がクローズドの環境なのでわかりやすい。

map

arr = [1,2,3,4]

_arr = arr.map( (elem, index) => {
    console.log(elem)
})

//出力
1
2
3
4

不要な変数_arrができてしまうため、新たな配列を作る必要がない場合は不向き。

for-of

arr = [1,2,3,4]

for( elem of arr ){
    console.log(elem)
}

//出力
1
2
3
4

forEachとほぼ同じ。メソッドか文かの違い。
処理の中でグローバルな（処理の外でも使える）変数を宣言したい場合に有効。

for

arr = [1,2,3,4]

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

//出力
1
2
3
4

繰り返す回数に特化した処理。「n回繰り返したい」という場合に有効。

reduce

arr = [1,2,3,4]

_arr = arr.reduce( (res, elem, index) => {
    console.log(elem)
}, arr[0])

//出力
1
2
3
4

一つの結果を得る場合に使うのがreduce。今回の用途では余計な変数_arrが増えるので不向き。

filter

arr = [1,2,3,4]

_arr = arr.filter( (elem, index) => {
    console.log(elem)
})
//出力
1
2
3
4

trueになった要素のみ抜き出すfilter。今回の用途では余計な変数_arrが増えるので不向き。

単に要素を一つづつ抜き出すという目的であれば、forEachかfor-ofに絞られる。

クロージャで処理を完結に書きたければforEachを使うのがベスト。