JavaScriptの勉強10【コールバック関数】

前回のJavaScript勉強記事 micche-labo.hatenablog.com 他の記事

その他javascriptに関わる記事はこちら

JavaScriptでforEachを使用した際、コールバック関数についてよくわからず相当悩みググりました。 いろんなサイトを巡って最終的になんとな〜〜くわかったので、まとめます。

参考サイト様

いろいろ巡りましたが分かりやすかったサイト様一覧。

参考サイト様一覧

JavaScriptの「コールバック関数」とは一体なんなのか | Subterranean Flower

コールバック関数/高階関数を利用する | Let'sプログラミング

【JavaScript】コールバック関数とは。実例で使い方を解説（forEach, find, mapメソッド）| Qiita @shizen-shin

---

こちらのQiitaの投稿が一番わかりやすかったです。この投稿のほぼ引用元です。

コールバック関数とは

MDNによると…

コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。
Callback function (コールバック関数) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

ということらしいが具体例を見ないとなんのこっちゃさっぱり。

具体例

おおきく3種類に分けてみる。

• 関数を別々に定義する
• 引数の中に直接関数を記入する
• メソッドの引数に関数を使用　←私が求めてた情報はコレ！

基礎の基礎からわかっとかないと、余計に理解しづらくなると思ったので、３種とも勉強しつつまとめてみました。

関数を別々に定義する

利用例。

関数１(a) => {
  (a); // aに関数２が入る
  処理;
}
関数２() => {
  処理;
}
関数１(関数2）;  // 関数２、関数１の順で処理（表示）

補足 上記コードの関数１(a)の{から}の中身にある(a);の位置をずらせば、最後の結果の順番も変わる。

具体例

<div><div>

//divの中にテキスト表示するための準備
const div = document.querySelector('div');

//引き入れ元関数
const text = (callback) => {
   callback(); //ここにコールバック関数が入る。
   div.textContent += 'I\'m Micche✨」';
}
//コールバック関数
const callbackText = () =>{
   div.textContent = 'msg:「Hello😊';
}
//呼び出し
text(callbackText);

結果 msg:「Hello😊I'm Micche✨」

書き方その２

//functionで書き換えたら
function msg(callback){
  callback(); //コールバック関数を実行
} 
function callbackText(){
  console.log('コールバックされました。'); //コールバック関数
}

msg(callbackText);

結果 "コールバックされました。"

このように、定数にいれなくても、関数に名前をつけるやり方でも可能。

参考:MDN developer.mozilla.org

引数の中に直接関数を記入する

利用例。

関数１(a) => {
  (a); // 処理１が入る（予定）
  処理２;
}
関数１( () => {
  処理１; //コールバック部分
}); // 処理１、処理２の順で処理（表示）

補足

さきほどの別々に定義したものと違い、関数２を定義せず、直接定義している。

具体例

<div><div>

const msg2 = (callback) => {
  callback(); //ここに関数が入る
  div.textContent += 'Programing💻!!」';
}

msg2(()=>{ /*コールバック関数*/
  div.textContent += 'msg2:「Let\'s enjoy😁 ';
});

結果 msg2:「Let's enjoy😁 Programing💻!!」

メソッドの引数に関数を使用

私が求めていた情報…！！！

よくやるのはリストとかで一括で情報を書き換えたり…？

利用例

配列.forEach((現在処理中の配列の要素,index,array)=>{
処理;
});

()=>がコールバック関数となる。 indexは0からはじまる配列分の数。省略可能。 arrayはforEachが呼び出されている配列。省略可能。

参考:MDN developer.mozilla.org

具体例

ちょっとややこしく見えますが、ulとliをJavaScriptで作り、html上に反映させてから、forEachでリストの中に文字を入れています。

あとは、同じ容量で、idやclassを付与することもよくします。

<div></div>
<!--この下にulを配置-->

/*ulつくってdivの下に配置*/
const ul = document.createElement('ul');
div.insertAdjacentElement('afterend',ul)

/*10個空っぽのli作ってulの中に入れる*/
for(let i = 0;i < 10;i ++){
  const li = document.createElement('li');
  ul.insertAdjacentElement('afterbegin',li)
}

/*できあがったliを全て取得*/
const li = document.querySelectorAll('li');
/*forEachで各liに対して文字とインデックスを付与*/
li.forEach((list,index)=>{
  list.textContent = 'list' + index;
});

結果

結果

コールバック関数のコードと結果

CodePenにあげてみたのでいろいろいじってみてください。

See the Pen Untitled by Micche (@micche) on CodePen.