JavaScriptの勉強10【コールバック関数】
JavaScriptでforEach
を使用した際、コールバック関数についてよくわからず相当悩みググりました。
いろんなサイトを巡って最終的になんとな〜〜くわかったので、まとめます。
参考サイト様
いろいろ巡りましたが分かりやすかったサイト様一覧。
JavaScriptの「コールバック関数」とは一体なんなのか | Subterranean Flower
コールバック関数/高階関数を利用する | Let'sプログラミング
【JavaScript】コールバック関数とは。実例で使い方を解説(forEach, find, mapメソッド)| Qiita @shizen-shin
こちらのQiitaの投稿が一番わかりやすかったです。この投稿のほぼ引用元です。
コールバック関数とは
MDNによると…
コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。
Callback function (コールバック関数) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
ということらしいが具体例を見ないとなんのこっちゃさっぱり。
具体例
おおきく3種類に分けてみる。
- 関数を別々に定義する
- 引数の中に直接関数を記入する
- メソッドの引数に関数を使用 ←私が求めてた情報はコレ!
基礎の基礎からわかっとかないと、余計に理解しづらくなると思ったので、3種とも勉強しつつまとめてみました。
関数を別々に定義する
利用例。
関数1(a) => { (a); // aに関数2が入る 処理; } 関数2() => { 処理; } 関数1(関数2); // 関数2、関数1の順で処理(表示)
関数1(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✨」
書き方その2
//functionで書き換えたら function msg(callback){ callback(); //コールバック関数を実行 } function callbackText(){ console.log('コールバックされました。'); //コールバック関数 } msg(callbackText);
結果
"コールバックされました。"
このように、定数にいれなくても、関数に名前をつけるやり方でも可能。
参考:MDN developer.mozilla.org
引数の中に直接関数を記入する
利用例。
関数1(a) => { (a); // 処理1が入る(予定) 処理2; } 関数1( () => { 処理1; //コールバック部分 }); // 処理1、処理2の順で処理(表示)
さきほどの別々に定義したものと違い、関数2を定義せず、直接定義している。
具体例
<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にあげてみたのでいろいろいじってみてください。