【JavaScript】コールバック関数とは。実例で使い方を解説(forEach, find, mapメソッド)

js-prograshi(プロぐらし)-kvJavaScript

コールバック関数とは

引数のカッコ内に入った関数の呼び名。



▼よく見るコールバック関数の使い方

①関数を別々に定義する方法
関数名1(関数名2);
 └ 関数名1: 関数を引数として受け取れる関数
 └ 関数名2:別で定義した関数。(コールバック関数になる)
 └ 関数は変数で定義。(変数に関数自身を格納)

②引数の中に直接関数を書く方法
関数名(関数)
 └ 関数名: 関数を引数として受け取れる関数
 └ 関数:引数の中で直接定義(コールバック関数になる)

③メソッドの引数として呼び出す
オブジェクト.メソッド(()=>{});
 └ メソッド:forEachやfindなど
 └ アロー関数がコールバック関数になる

②の応用。デフォルトで定義されている関数を使う。

コールバック関数の実例

①関数を別々に定義する方法

関数名1(関数名2);

<手順>
1. 引数で関数を呼び出せる関数を定義。(引数の値は任意)
2. 後ほどコールバック関数になる関数を定義。(1,2は逆でもOK)
3. 2の関数名の引数に1を入れて実行。

//関数1(引数に関数を受け取れる)
const birthday = (aaa)=>{
    aaa();
    console.log('happy birthday');
}


//関数2(後ほどコールバック関数になる)
const hello = ()=>{
    console.log('hello');
}

//関数呼び出し(関数helloがコールバック関数になる)
birthday(hello);


//▼出力
//hello
//happy birthday

コールバック関数を使うメリットは、別で定義した処理を足し合わせて使えること。(1行の処理だとありがたみが感じられないが、、)

▼メリットを感じてみる

//関数2(後ほどコールバック関数になる)
const hello = ()=>{
    console.log('hello');
    console.log('こんにちは');
    console.log('アニョハセヨ');
    console.log('ナマステ');
    console.log('ボンジョルノ');
    console.log('ニーハオ');
    console.log('ボンジュール');
    console.log('スラマシアン');
}


//関数1(引数に関数を受け取れる)
const birthday = (aaa)=>{
    aaa();
    console.log('★happy birthday');
}

//関数1(引数に関数を受け取れる)
const seeYou = (bbb)=>{
    bbb();
    console.log('★See You!')
}


//関数呼び出し(関数helloがコールバック関数になる)
birthday(hello);
seeYou(hello);

処理結果(長いので) hello こんにちは アニョハセヨ ナマステ ボンジョルノ ニーハオ ボンジュール スラマシアン ★happy birthday hello こんにちは アニョハセヨ ナマステ ボンジョルノ ニーハオ ボンジュール スラマシアン ★See You!

<メリット>
・長い処理が書かれた関数を1行で呼び出せる。
・別の関数でも呼び出せる。

アロー関数を使わない場合(function)

アロー関数をfunctionを使った書き方に変更。やってることは同じ。

関数名、変数名、引数名は同じでも違ってもOK。
どれがどの処理化わかりやすくするために固有してます。

//関数1(引数に関数を受け取れる)
const birthday = function omedeto(aaa){
    aaa();
    console.log('happy birthday');
}

//関数2(後ほどコールバック関数になる)
const hello = function konchiwa(){
    console.log('hello');
}

//関数呼び出し(関数helloがコールバック関数になる)
birthday(hello);


//▼出力
//hello
//happy birthday

変数に代入しない場合

関数名でも実行できる。

//関数1(引数に関数を受け取れる)
function omedeto(aaa){
    aaa();
    console.log('happy birthday');
}

//関数2(後ほどコールバック関数になる)
function konchiwa(){
    console.log('hello');
}

//関数呼び出し(関数helloがコールバック関数になる)
omedeto(konchiwa);


//▼出力
//hello
//happy birthday

②引数の中に直接関数を書く方法

関数名(関数)

<手順>
1. 引数に関数をとれる関数を定義
2. 1の関数名の引数に関数を記述

//関数(引数に関数を受け取れる)
const birthday = (aaa)=>{
    aaa();
    console.log('happy birthday');
}

//birthday()の引数内に関数を直接記述
birthday(()=>{
    console.log('hello');
});

①よりも記述が少なくなる。

③メソッドの引数に関数を使う

オブジェクト.メソッド(()=>{});

メソッド(関数)の引数として(アロー)関数を呼び出す。
アロー関数=コールバック関数。

1.forEachメソッド

オブジェクト.forEach((変数名)=>{処理;});
 └ オブジェクト:配列
 └ 変数名:配列から一つづつ取り出した要素の変数名

配列の要素を一つづつ取り出す。

const letters=['a','b','c','d'];

letters.forEach((letter)=>{
    console.log(letter);
});

//出力
a
b
c
d

2.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

3.mapメソッド

オブジェクト.map((変数名)=>{return 処理;});
 └ オブジェクト:配列
 └ 変数名:配列から一つづつ取り出した要素の変数名

・要素一つづつに指定した処理を行う。
・処理の例:数値を2倍するなど。
・console.logなどで処理自体を呼び出す
 └ 関数はreturnで数値に置き換わる。

const numbers=[1,10,100,1000];

const triple = numbers.map((number)=>{
    return number*3;
});

console.log(triple);


//出力
[ 3, 30, 300, 3000 ]
タイトルとURLをコピーしました