JavaScript コールバック関数のサンプル

JavaScriptのコールバック関数のサンプルです。

サンプル	コールバック関数とは
	無名関数を使用する
	無名関数＋アロー関数を使用する

コールバック関数とは

コールバック関数とは、関数が他の関数に引数として渡され、渡された先の関数で実行される関数です。
関数の実行タイミングをコントロールできます。
一般的に非同期処理で使用されます。
以下は、MDNのコールバック関数のリンクです。
https://developer.mozilla.org/ja/docs/Glossary/Callback_function

コールバック関数のサンプルです。

<script>
  //コールバック関数
  function helloWorld(num1) {
    console.log("こんにちは" + num1);
  }

  function test1(callback1) {
    const number1 = 3333;
    callback1(number1);
  }

  test1(helloWorld); //こんにちは3333
</script>

3～5行目は、コールバック関数です。
12行目で、7行目の関数test1を実行します。引数として3～5行目の関数helloWorldをセットしています。
7行目で引数として受け取った関数helloWorldは、9行目で実行されます。

これは同期処理です。

非同期のコールバック関数が使用される例としては、デバイスの現在位置を取得するgetCurrentPositionメソッドがあります。
https://developer.mozilla.org/ja/docs/Web/API/Geolocation/getCurrentPosition

無名関数を使用する

上記コードを無名関数にしたサンプルです。

<script>
  //コールバック関数
  //function helloWorld(num1) {
  //  console.log("こんにちは" + num1);
  //}

  function test1(callback1) {
    const number1 = 3333;
    callback1(number1);
  }

  test1(function (num1) {
    console.log("こんにちは" + num1);
  }); //こんにちは3333
</script>

3～5行目をコメントにしています。
3行目の引数num1を12行目に持ってきて、
4行目のconsole.logを13行目に持ってきています。
実行結果は同じです。

無名関数＋アロー関数を使用する

上記コードを無名関数＋アロー関数にしたサンプルです。

<script>
  //コールバック関数
  //function helloWorld1(num1) {
  //  console.log("こんにちは" + num1);
  //}

  function test1(callback1) {
    const number1 = 3333;
    callback1(number1);
  }

  test1(num1 => console.log("こんにちは" + num1)); //こんにちは3333
</script>

12行目は、上記コードからアロー関数に変更しています。
実行結果は同じです。