解説
「コールバック関数」は、関数の引数として別の関数を渡す際の「別の関数」を指します。たとえば関数Aの引数として別の関数Bを渡し、関数Aの処理の中で関数Bを実行するとします。この時の関数Bがコールバック関数です。
コールバック関数を使う状況はいくつかあります。1つ目は、時間が掛かる処理のあとに処理をおこないたい時です。たとえば通信が終わったあとに、その結果をコールバック関数に渡すような場合です。
2つ目は、関数を渡すことで処理の内容を変えたい時です。配列の並べ替えであるソートをおこな時に、どの要素を前に出すかの判定を関数で登録したりします。
3つ目は、イベントが起きた時の処理を登録する場合です。ボタンをクリックした時の処理を関数で登録するといった使い方をします。
このように、関数の引数に関数を登録することで、複雑な挙動の処理を、簡素なプログラムで書くことができます。
サンプル
「コールバック関数」のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「コールバック関数」のサンプル</title>
<style> #output { font-size: 32px; line-height: 1.5; } </style>
</head>
<body>
<pre id="output"></pre>
<script>
window.addEventListener('DOMContentLoaded', e => {
// 出力用の関数
const print = function() {
const el = document.querySelector('#output');
el.textContent += [...arguments].join(', ') + '\n';
};
// コールバック関数
setTimeout(function() {
print('1秒後に実行');
}, 1000);
// コールバック関数2
const arr = ['山椒魚', '駱駝', '猫', '襟巻蜥蜴'];
print('ソート前', arr);
arr.sort(function(a, b) {
print('ソート中', a, b);
return a.length - b.length;
});
print('ソート後', arr);
});
</script>
</body>
</html>
出力結果
ソート前, 山椒魚,駱駝,猫,襟巻蜥蜴 ソート中, 駱駝, 山椒魚 ソート中, 猫, 駱駝 ソート中, 襟巻蜥蜴, 猫 ソート中, 襟巻蜥蜴, 駱駝 ソート中, 襟巻蜥蜴, 山椒魚 ソート後, 猫,駱駝,山椒魚,襟巻蜥蜴 1秒後に実行
フィードバックお待ちしております！
ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。
