見出し画像

JS学習記録第8回 callbackについて

こんにちは!
JSの学習記録も8回目になりました。
最低でも10回は続けたいです。
本当はこれから先も続けていきますが、、、

さて、今回はcallback関数についてまとめようと思います。
callback関数自分では少し理解するのに時間がかかりました。
(今でも完全に理解しているのか不安ですが)
自分なりの解釈でまとめます。


callback関数とは

ではcallback関数とはなんなのか?
簡単にいうと関数を引数で持ってくることです!
ソースを書いてみます。

function hello(name){
   console.log('hello' + name);
}

hello('yuta');

今までの復習で以上のソースを見てみると、
関数helloに引数nameを記述して、
hello関数を実行する際にnameの値をyutaとすることで、
helloyutaという値を出力する形になっています。


callback関数は文字通り、
その引数(name)に関数を入れることを指します。

function hello(name){
   console.log('hello' + name());
}

function getname(){
   return 'yuta';
}

hello(getname);

スクリーンショット 2022-01-04 2.24.43

上記の記述を細かく説明します。

・まず、新しくgetnameという新しい関数を作成します。
・getnameという関数にはyutaという戻り値(yutaという情報)が格納されています。
・そのgetnameという関数を、hello()の第一引数にhello(getname)という形で実行させます。

function hello(name){  ←nameにgetnameの情報が入ってくる
console.log('hello' + name()); ←nameに()をつけて実行させる
}

function getname(){
return 'yuta';
}

hello(getname);

色々試してみると分かりますが、
hello(getname());
としてみるとうまく出ません。


もう一つ例を作成して見ました!
callback関数で計算式を試行錯誤しながら作成してみようと思います!

function a(result){
   console.log('計算結果は' + result + 'です');
}
a(9);

スクリーンショット 2022-01-04 2.45.32

aという関数にresult(結果)という引数を設定し、その引数で計算式を作成します。
仮に引数に9と入れると計算結果は9ですと出力されました!


そこで複数の数字を入れるとその足し算の合計を計算するプログラムを作りたいと思います。

function a(b,c, result){
   console.log('計算結果は' + result + 'です');
}
function plus(b,c){
   return b+c;
}
a(2,3,plus);

まずこういうふうに書いて見ました。
関数aに3つの引数、b,c,resultを作り、
plusという関数を新たに作成します。
a(2,3,plus);を実行したら2+3の合計5が出るかなと思ったのですが、

スクリーンショット 2022-01-04 2.56.17

んんん、出ない。。。
resultの値がそのまま出力されてしまいました。

どうしようか。
そこで、

function a(b,c, result){
   console.log('計算結果は' + result() + 'です');
}
function plus(b,c){
   return b+c;
}
a(2,3,plus);

result→resulu()としてカッコをつけて見ました。

すると、

スクリーンショット 2022-01-04 3.03.01

NaNと出て来ました。
なんだこれ_:(´ཀ`」 ∠):
調べてみるとNot-a-Numberの略でした。
まぁ要するに書き方が間違っているということですね。。。

色々調べて見ますと、引数であるbとcの値がうまく取れていないことが分かりました。
そこで新たに変数dを作成し、そこでbとcを定義します。

function a(b,c, result){
   const d = result(b,c);
   console.log('計算結果は' + d + 'です');
}
function plus(b,c){
   return b+c;
}
a(2,3,plus);

スクリーンショット 2022-01-04 3.09.08

これでいけました!!
色々試してみてやっといけました。
因みに新しく関数を作成することで、掛け算なども可能です。

function a(b,c, result){
   const d = result(b,c);
   console.log('計算結果は' + d + 'です');
}
function plus(b,c){
   return b+c;
}
function multiply(b,c){
   return b*c;
}
function minus(b,c){
   return b-c;
}
a(2,3,plus);
a(2,3,multiply);
a(2,3,minus);

スクリーンショット 2022-01-04 3.12.49

callback関数を理解するのに少し苦労しました。
自分で色々触ってみることが理解するいっぽですね!


大阪在住の29歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。