#javascriptのforEachについて

色々な言語には、for、foreachが用意されています。
javascriptで言うと、foreachはforEach()に当たるっぽいですね。

最近までちょっと勘違いしていたことがあります。
その気付きを共有したいと思います。

#他言語とjavascriptのforEachはそもそも考え方が違う。

例えばPHPで言うと、foreachは、配列、オブジェクトで利用できるfor文ですね。
利用できる型が決められていますが、動作は大体forと一緒です。

javascriptの.forEach()も同じだと思ってました。
ですが、そもそもforEach()は根本的な考え方が違うことに気がつきました。

#javascriptのforEach()は「繰り返し」の命令ではない！

使い方自体は、他言語と似ていますよね。

forEach.js

const array = ['a','b','c'];

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

じゃあこれって何が違うの？
もう少し分かり易く書いてみましょう。

forEach2.js

const array = ['a','b','c'];

array.forEach(function(element){
  console.log(element);
});

上記は書き方を変えただけです。
1番重要な点は、これがfunction（即時関数）であると言う点です。
javascriptのforEach()は、配列の順番通り即時関数を叩くと言う命令である。と言うことです。

#ふーん。だからどうなの？

ここで重要になってくるのは、即時関数は、javascriptの言語特性上、平行で実行されると言う点です。
for命令は、配列のインデックスの0番目から順番に実行されます。
0番目の処理が完了した後に、1番目の処理を始めます。

一方、forEachで叩かれた即時関数は、即時関数が叩かれるタイミングこそ0番目からですが、0番目が終わった後に1番目を実行。と言う動作にはなりません。

平行処理が行われますので、1番目に叩かれた配列index0が一番最初に終わるとは限らないのです。
ここが最も重要な点です。

forと動作は同じだと思って、forEachを使うと、想定していた結果にならないと言うのは、大体この特性のせいであると、最近気づきました。

javascriptの言語特性と、即時関数である。と言うことに気がつけばすぐたどり着ける内容ではありますが、以前かなりはまった部分なので、私と同じ悩みを抱えている方がいれば、参考にしていただけたらと思います。