JavaScript 超初心者向け -- 配列における forEach 最初の最初 --

何度でも書きますが、これは超絶初心者向けのブログ記事です。JavaScript を勉強しはじめ、躓いてしまいそうになった点を書いてみたいと思います。

配列 (array) を勉強していると配列内の繰り返し処理を学びます。単純な for 文、for ... of、そして必須メソッド forEach。そして、お決まりの MDN を調べても最初さっぱりわかりませんでした。

f:id:yasuhikotoku:20190915144341p:plain

この構文を見て、ぱっと理解できるようになったとき、おそらくレベルが上がっているんだなと思います。これは自分で書いてみて理解が進んできたので、ここに書いて見たいと思います。

何がわからないかというと、何を書いていいかが最初わかりませんでした。そして、それぞれの引数が何をしているのがよくわかりませんでした。

で、ググりまくりいくつか特徴をつかめました。

forEach の引数内に関数が書けること
関数の引数が、(value, index, array 全部 ) ということ
関数を外出しできること

なので、いろいろ何が起こるか自分でやってみてテストをしてみます。

サンプルの配列とメソッドを使ってみる

var numbers = [1,2,3,4,5,6,7,8,9,10];

numbers.forEach(function(val ,id, arr){
    console.log("Array of " + arr + " Index= " + id + ", the value is " + val)
})

/* 
各要素で繰り返し処理をするので、numbers 配列の何を取ってるのか理解してみました。
- val が 値
- id が Index
- arr が配列全部
*/

これを実行すると期待どおり、それぞれ入ってきていました。

f:id:yasuhikotoku:20190915150240p:plain

無名関数 (anonymous function) をそのまま書いて実行することができました。

次に、関数を外だししたいと思います 。

関数を外に出して呼んでみる

//forEachで呼ばれることを前提に書いているので、2つ引数を書いてみました。

function findEven(val, id){
    if(val % 2 === 0) {
        console.log("Index= " + id + ", 値は " + val + "、偶数です。" );
    }
}

// numbers 配列に対して、forEach から呼んでみます。

numbers.forEach(findEven);

f:id:yasuhikotoku:20190915151255p:plain