Javascript コールバック関数の理解に関する備忘録


Javascript コールバック関数の理解に関する備忘録

コールバック関数、意味がさっぱりわからなかった

ProgateのJavascript編を学習していて、オブジェクト、クラスあたりから理解が怪しくなりコールバック関数のところ (JavascriptⅥ,Ⅶ)でついに意味が全くわからなくなった。

いくつか解説記事を読んで、コードを眺めていたら理解できた気がしたので、備忘録をQiitaでの初投稿も兼ねて書いておく。

今後、初学者のうちから積極的にメモとしてQiitaに投稿していきたい。

▼Progate Javascript Ⅶ.1より

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

const printHitsuji = () => {
  console.log("ひつじ仙人");
};

const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();
};

// 引数をprintHitsujiに書き換えて出力を確認しましょう
call(printHitsuji);

▼出力

コールバック関数を呼び出します。
ひつじ仙人

▼この部分で、"call"という関数を定義して、他の関数が入る箱として"callback"という引数を準備する。

const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();

▼関数 "call"を"printHitsuji"を引数として実行
→("callback"の部分に"printHitsuji"が代入される)

const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();
};

// 引数をprintHitsujiに書き換えて出力を確認しましょう
call(printHitsuji);

→console.log("コールバック関数を呼び出します")が実行される
続いて"printHitsuji();"が実行される

...メモとして成立してるのか怪しくなってきた。
そもそも書いてみたらこれメモとして残すほどのものか?と思った。
でもさっきまで恥ずかしながら理屈が全くわかってなかったんだ。
多分またちょっと複雑なコードになったらわからなくなると思う。

他の未経験から学び始めた人たちのことはわからないけど、たぶん今のところ自分のプログラミングの理解スピードかなり低い方だと自覚してる。

先ほどtwitterでフォローしているエンジニアの方が、閾値を超えるとプログラミングがわかるようになってきてそこから勉強が楽しくなった。というようなことをツイートしていて勇気づけられた。

愚直に学習を継続してはやく1人前になりたい。