forEachについて完全に理解した()

javascriptを触ってはや１年ほど経つが、先日callback関数について見直した後に、forEachを見直したら世界が変わった
というか、今までなんとなくのイメージで書いていたことがようやく完全に理解できた()。

従来のイメージ

今までforEachってなんとなく、配列の要素を１つずつ取り出して、要素を使って処理をするものってイメージだった。
例えば、配列の中身をすべて２倍にするみたい感じ↓

sample.js

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

arry.forEach((ary) => {
  console.log(ary * 2);
});

実行結果

2
4
6
8
10

ここでいうaryの中にarryの要素が順番に入ってくるから、その処理を以降で書いてる。なんでarryの要素が入ってくるのかは魔法。そんなイメージだった。

現在のイメージ

forEachは引数として、callback関数を取る。
callback関数については先日の記事に書いているが、簡単に言うと、関数に渡す関数で、渡すcallback関数によってその関数の処理を変更するというもの。
forEachもcallback関数を引数に取るので、渡すcallback関数で処理を決定している。
となると、今まで魔法だと思っていたaryの中にarryの要素が順番に入ってくるということにも納得が言った。詳しい中身まではわからないが、forEachでは恐らく配列の要素１つ１つを取り出して、渡ってきたcallback関数に渡すという処理をしているのだろう。コードにすると以下みたいな感じ(本来はArrayクラスのメソッドだと思う)

forEach.js

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

const forEach = (ary, callbackFn) => {
  for (const v of ary) {
    callbackFn(v);
  }
};

const callbackFn = (v) => {
  console.log(v * 2);
};

forEach(arry, callbackFn);

実行結果

2
4
6
8
10

なんで違ったイメージをしていたか

完全に個人的な意見だが、アロー関数で書いていたからだと思う。。。
たとえば、forEachをアロー関数と無名関数で書いてみる

compareForEach.js

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

arry.forEach((ary) => {
  console.log(ary * 2);
});

arry.forEach(function (ary) {
  console.log(ary * 2);
});

どちらのforEachも同じ処理を書いているのだが、アロー関数で書いている方が簡単な分、forEachさんがaryに１つずつ値を渡しますよ感が強い気がする。
逆に無名関数だと、しっかりと引数を取る関数を渡していることが理解でき、引数はforEachメソッドの中で渡すんだなということが理解できる気がする。
あえて簡略化しすぎずに書いたほうが理解が深まるなと感じたし、魔法じゃなくて内部でどんな処理がされているかまで想像できると楽しいなと思えた。