#javascriptのforEachについて
色々な言語には、for、foreachが用意されています。
javascriptで言うと、foreachはforEach()に当たるっぽいですね。
最近までちょっと勘違いしていたことがあります。
その気付きを共有したいと思います。
#他言語とjavascriptのforEachはそもそも考え方が違う。
例えばPHPで言うと、foreachは、配列、オブジェクトで利用できるfor文ですね。
利用できる型が決められていますが、動作は大体forと一緒です。
javascriptの.forEach()も同じだと思ってました。
ですが、そもそもforEach()は根本的な考え方が違うことに気がつきました。
#javascriptのforEach()は「繰り返し」の命令ではない！
使い方自体は、他言語と似ていますよね。
const array = ['a','b','c'];
array.forEach(element => console.log(element));
じゃあこれって何が違うの？
もう少し分かり易く書いてみましょう。
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の言語特性と、即時関数である。と言うことに気がつけばすぐたどり着ける内容ではありますが、以前かなりはまった部分なので、私と同じ悩みを抱えている方がいれば、参考にしていただけたらと思います。