JavaScriptのコールバック関数の引数と関数としての動作

Question

JavaScript初学者です。現在ProgateにてJavaScript(ES6)を勉強しています。
その中で、「コールバック関数」について少々詰まったところがありましたので、皆様のお力添えいただきたく質問させていただきます。

質問内容としてふさわしくないというご指摘を頂いたら削除するつもりです

以下が実際のProgateのスライドのスクリーンショットです

以下の中で特に「callback」の動き、働きがうまくつかめないので教えていただきたいです。

以上のようあるのですが、この関数callの引数のcallbackというのが、関数callの中でメソッドとして呼び出されています。
つまり、

const callback = () => {
};

の形での関数の定義を行わずとも、callの中でcallbackという新しい関数が作られたということなのでしょうか？
また、call(printWanko);で引数にprintWankoを渡し、関数callを呼び出すとあるのですが、整理すると

関数callの引数callbackは、関数callの中で新しく関数となり
関数callの引数に関数printWankoを指定すると
先程の引数callback(関数callの中で関数となった)の中身が関数printWankoとなるということでしょうか？

関数の中で別の関数を使えるようにするというだけなのでしょうか？

至極わかりにくい文章となってしまいもうしわけありません。

Comments

[hoshi-takanori]

const callback = () => { /* 処理 */ };
という構文をまとめて「関数の定義」だと思ってらっしゃるようですが、これは
const callback = 値;
という変数の宣言・代入（初期化）と、
() => { /* 処理 */ }
という関数そのものとに分かれていることをまず理解しましょう。

Answer 1

まず、

const callback = () => {
    /* 処理 */
};

という構文をまとめて「関数の定義」だと思ってらっしゃるようですが、これは

const callback = 値;

という変数の宣言・代入（初期化）と、

() => { /* 処理 */ }

という関数そのものとに分かれていることをまず理解しましょう。でもって、

const printWanko = () => {
    console.log('にんじゃわんこ');
};

は、printWanko という変数を宣言して、以下の名前のない関数をその初期値として代入しています。

() => {
    console.log('にんじゃわんこ');
}

で、printWanko は単なる変数（たまたま関数が代入されているだけ）なので、その値を他の変数に入れることもできますし、

const callback = printWanko;

別の関数の引数にすることもできます。

call(printWanko);

関数（が入った変数）の後ろに括弧をつければ、その関数が呼び出されます。

printWanko();

callback();

(() => {
    console.log('にんじゃわんこ');
})();

Answer 2

まず、「関数オブジェクトと関数実行の構文との違いを見極めること」がコールバック理解のポイントです。

// 関数宣言は、後から実行できるように定義された「関数オブジェクト」
var fnObj = function(){
  return "hoge";
};
var rslt = fncOj(); // カッコが付いて引数を受ける形は「関数実行の構文」
console.log( rslt ); // "hoge"

---

ご質問の図中で矢印に示される各番号を以下のように考えてみてください

1. 関数宣言された状態の 関数オブジェクト (printWanko)を引数に渡す。
2. call の引数 callback は、渡された 関数オブジェクト(printWanko) を参照する
   （printWanko を callbackという別名で実行できるイメージです）。
3. カッコをつけて引数を受け付ける構文 callback() となってprintWankoが実行される。

追記）

関数の中で別の関数を使えるようにするというだけなのでしょうか？

端的に言えばそうです。

複雑な処理の例として、XMLHttpRequest しか実装されていなかった頃のAjaxがあります。
この頃は、Promise なども外部ライブラリが必須となるなど非標準でしたので、
「読み込み後の処理だけを変えたい」ような時にコールバックがよく使われていました。

var doRequest = function(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback( xhr.responseText );
    }
  }
  xhr.send();
}
// アロー関数を記述していたので、古典的な記述に訂正

この例ですと、（Base64でエンコードされた文字列、JSONなど）テキストベースのデータを読むことができ、callback に渡す関数で解析できるようになります。

※かつては、非同期処理を扱う際、コールバックの知識が必須でした。

Answer 3

関数callの引数callbackは、関数callの中で新しく関数となり

「新しく関数となる」という言葉の意図がよくわかりませんが、callbackは単なる引数です。function double(x) { return x * 2 }の引数xと何ら変わりありません。実際にcallbackという引数に渡される値は数値かもしれないし、文字列かもしれないし、それ以外かもしれません。関数も数値や文字列と同じように単なる値です。関数callは引数callbackを関数として呼び出していますが、もしcallbackに渡された値が関数でなければ例外(エラー)が発生します。別に「callback()と呼び出すことによって初めてcallbackが関数に変化する」というわけではありません。

関数callの引数に関数printWankoを指定すると
先程の引数callback(関数callの中で関数となった)の中身が関数printWankoとなるということでしょうか？

「(関数callの中で関数となった)」という部分以外はそのとおりです。別に↑の文章は引数が関数であるかどうかに関わらず成り立ちます。例えば
「関数double (=x => x * 2)の引数に値10を指定すると引数xの中身が値10となる」
は自明に成り立ちますよね。つまり、引数の受け渡しについて関数を特別視する必要はありません。