コールバック関数とは

引数に関数をとる場合の呼ばれる関数のことをコールバック関数という。

この定義のことは知ってたけど、それがどういう意味なのか、なんで名前がついているのか理解していなかった。

この記事を書いた経緯

アロー関数についてブチ切れながら理解を深めようとしていたら、コールバック関数を用いることで書き方が違うことに気づいた。
この記事では、コールバック関数を第一引数にとるmapメソッドとsetInterval関数について説明していくよ。

その前に結局アロー関数ってどんな形？

これを

function 関数名(){〇〇};

こう

const 変数名 = ()=>{処理};  //変数名は関数名のことだよ

()=>〇〇これが一つの塊。
いくら()がたくさんあっても、惑わされないように。
=>の右と左の関係は、(必要時右側で使う引数)=>処理

アロー関数ではreturnが省略できる話

アロー関数では=>の直後の処理が{return 〇〇}の場合、
{}とreturnを省略できるので、
=>〇〇とか、=>(〇〇)という書き方ができる。
とっても惑わされてしまう。。。
あれこれどういう関数だろうと思ったら、returnが隠れているのではと思い出せるように

mapメソッドって何？

配列オブジェクトに用意されているメソッドの一つ。（配列.mapで呼び出せる）

mapメソッドは何ができるの？

配列の中身を一つ一つ取り出して、何らかの処理を加え、新しい配列を作り出すことができる。
正確には、mapメソッドで新しい配列を作り出すというより、新しい配列をreturnできる。
もともとの配列は変更されない。

配列.map(
    function(value){
        return 処理;    //←新しい項目
    }
)

これをアロー関数で書くと

配列.map((value)=>新しい項目)  //配列.map(引数)=>戻り値

このvalueの中身は配列の中身が一つずつ入る。

setInterval関数って何？

組み込み関数（なにも定義しなくてもいきなり使える関数のこと）の一つ。

setInterval関数って何ができるの？

一定の間隔で特定の処理を繰り返し行う。
処理される間隔はミリ秒（1秒=1000ミリ秒）で表されるので、注意。
例：1秒ごとに処理されるなら、第二引数は1000と記載する。

  setInterval(処理内容,処理される間隔);  //抽象的に
  setInterval(function(){処理内容},時間)  //もうちょっと具体的に

アロー関数で書くと、

setInterval(()=>{処理内容},処理間隔)

setIntervalは第一引数に処理内容が入るけど、処理内容にsetIntervalから値は渡さないよ。

コールバック関数をとるアロー関数の書き方

mapもsetIntervalもコールバック関数を第一引数にとる。
mapはコールバック関数を呼ぶときに引数が必要だけど、
setIntervalはコールバック関数に値を渡さなくても良いので書き方が違うよ。

配列.map((value)=>新しい項目) //渡す値は=>の前の（ここ）=>に入るよ
setInterval(()=>{処理内容},処理間隔)//  (()=>第一引数,第二引数)