コールバック関数とは何か？
引数のカッコ内に入った関数の呼び名。
▼よく見るコールバック関数の使い方
①関数を別々に定義する方法関数名１(関数名２);
└ 関数名１： 関数を引数として受け取れる関数
└ 関数名２：別で定義した関数。（コールバック関数になる）
└ 関数は変数で定義。（変数に関数自身を格納）
②引数の中に直接関数を書く方法関数名(関数)
└ 関数名： 関数を引数として受け取れる関数
└ 関数：引数の中で直接定義（コールバック関数になる）
③メソッドの引数として呼び出すオブジェクト.メソッド(()=>{});
└ メソッド：forEachやfindなど
└ アロー関数がコールバック関数になる
②の応用。デフォルトで定義されている関数を使う。
コールバック関数の実例
①関数を別々に定義する方法
・関数名１(関数名２);
＜手順＞
1. 引数で関数を呼び出せる関数を定義。（引数の値は任意）
2. 後ほどコールバック関数になる関数を定義。（1,2は逆でもOK）
3. 2の関数名の引数に1を入れて実行。
//関数１（引数に関数を受け取れる）
const birthday = (aaa)=>{
aaa();
console.log('happy birthday');
}
//関数２（後ほどコールバック関数になる）
const hello = ()=>{
console.log('hello');
}
//関数呼び出し（関数helloがコールバック関数になる）
birthday(hello);
//▼出力
//hello
//happy birthdayコールバック関数を使うメリットは、別で定義した処理を足し合わせて使えること。（１行の処理だとありがたみが感じられないが、、）
▼メリットを感じてみる
//関数２（後ほどコールバック関数になる）
const hello = ()=>{
console.log('hello');
console.log('こんにちは');
console.log('アニョハセヨ');
console.log('ナマステ');
console.log('ボンジョルノ');
console.log('ニーハオ');
console.log('ボンジュール');
console.log('スラマシアン');
}
//関数１（引数に関数を受け取れる）
const birthday = (aaa)=>{
aaa();
console.log('★happy birthday');
}
//関数１（引数に関数を受け取れる）
const seeYou = (bbb)=>{
bbb();
console.log('★See You!')
}
//関数呼び出し（関数helloがコールバック関数になる）
birthday(hello);
seeYou(hello);処理結果（長いので） hello こんにちは アニョハセヨ ナマステ ボンジョルノ ニーハオ ボンジュール スラマシアン ★happy birthday hello こんにちは アニョハセヨ ナマステ ボンジョルノ ニーハオ ボンジュール スラマシアン ★See You!
＜メリット＞
・長い処理が書かれた関数を１行で呼び出せる。
・別の関数でも呼び出せる。
アロー関数を使わない場合（function）
アロー関数をfunctionを使った書き方に変更。やってることは同じ。
関数名、変数名、引数名は同じでも違ってもOK。
どれがどの処理化わかりやすくするために固有してます。
//関数１（引数に関数を受け取れる）
const birthday = function omedeto(aaa){
aaa();
console.log('happy birthday');
}
//関数２（後ほどコールバック関数になる）
const hello = function konchiwa(){
console.log('hello');
}
//関数呼び出し（関数helloがコールバック関数になる）
birthday(hello);
//▼出力
//hello
//happy birthday変数に代入しない場合
関数名でも実行できる。
//関数１（引数に関数を受け取れる）
function omedeto(aaa){
aaa();
console.log('happy birthday');
}
//関数２（後ほどコールバック関数になる）
function konchiwa(){
console.log('hello');
}
//関数呼び出し（関数helloがコールバック関数になる）
omedeto(konchiwa);
//▼出力
//hello
//happy birthday②引数の中に直接関数を書く方法
関数名(関数)
＜手順＞
1. 引数に関数をとれる関数を定義
2. １の関数名の引数に関数を記述
//関数（引数に関数を受け取れる）
const birthday = (aaa)=>{
aaa();
console.log('happy birthday');
}
//birthday()の引数内に関数を直接記述
birthday(()=>{
console.log('hello');
});①よりも記述が少なくなる。
③メソッドの引数に関数を使う
オブジェクト.メソッド(()=>{});
メソッド（関数）の引数として（アロー）関数を呼び出す。
アロー関数＝コールバック関数。
１．forEachメソッド
オブジェクト.forEach((変数名)=>{処理;});
└ オブジェクト：配列
└ 変数名：配列から一つづつ取り出した要素の変数名
配列の要素を一つづつ取り出す。
const letters=['a','b','c','d'];
letters.forEach((letter)=>{
console.log(letter);
});
//出力
a
b
c
d２．findメソッド
オブジェクト.find((変数名)=>{return 条件式;});
└ オブジェクト：配列
└ 変数名：配列から一つづつ取り出した要素の変数名
・条件に一致する最初の要素を取り出す。
・console.logでfindメソッド自体を出力する。
└ findメソッドがreturnで数値と置き換わるため。
const numbers=[1,10,100,1000];
finder = numbers.find((number)=>{
return number > 99;
});
console.log(finder);
//出力
//100３．mapメソッド
オブジェクト.map((変数名)=>{return 処理;});
└ オブジェクト：配列
└ 変数名：配列から一つづつ取り出した要素の変数名
・要素一つづつに指定した処理を行う。
・処理の例：数値を２倍するなど。
・console.logなどで処理自体を呼び出す
└ 関数はreturnで数値に置き換わる。
const numbers=[1,10,100,1000];
const triple = numbers.map((number)=>{
return number*3;
});
console.log(triple);
//出力
[ 3, 30, 300, 3000 ]
