コールバック関数/高階関数を利用する

JavaScript では関数もオブジェクトのひとつであり、関数を呼びだす時に引数として関数を指定したり、関数の中から戻り値として関数を返すことができます。このように関数を受け取ったり返したりする関数のことを高階関数と呼びます。また関数に引数として渡されて、関数内から呼び出される関数のことをコールバック関数と呼びます。ここでは JavaScript におけるコールバック関数および高階関数の使い方と具体的にどのようなケースで利用できるのかについて解説します。

(Last modified: )

コールバック関数/高階関数の記述方法

JavaScript では関数もオブジェクトのひとつであり、変数に格納したり関数を呼びだす時の引数として指定することができます。次の例を見てください。 

const price = function(price){
  console.log('トマトの値段は ' + price + ' 円です。');
}

price(100);
>> トマト の値段は 100 円です。

関数リテラルを使って関数を定義し、変数 price に格納しています。そのあとで変数に格納した関数を呼びだしています。このように JavaScript では関数を変数に格納することができます。

それでは次のサンプルを見て下さい。 

function tomato(price, func){
  const name = 'トマト';
  func(name, price);
}

const price = function(name, price){
  console.log(name + ' の値段は ' + price + ' 円です。');
}

tomato(100, price);
>> トマト の値段は 100 円です。

このサンプルでは tomato という関数を呼びだす時に、引数として数値のほかに別途定義した関数 price を渡しています。関数 tomato では受け取った関数をブロック内で呼び出しています。このように JavaScript では別途定義した関数を別の関数を呼びだす時に引数に指定して渡すことができます。

引数として渡される関数(今回の場合であれば price )のことをコールバック関数、別の関数を引数として受け取る関数(今回の場合であれば tomato )を高階関数と呼びます。

なおコールバック関数は、引数のところに直接記述することもできます。 

function tomato(price, func){
  const name = 'トマト';
  func(name, price);
}

tomato(100, function(name, price){
  console.log(name + ' の値段は ' + price + ' 円です。');
});

>> トマト の値段は 100 円です。

アロー関数を使った場合は次のようになります。 

function tomato(price, func){
  const name = 'トマト';
  func(name, price);
}

tomato(100, (name, price) => {
  console.log(name + ' の値段は ' + price + ' 円です。');
});

>> トマト の値段は 100 円です。

どちらの記述方法もよく使われるものなので覚えておかれてください。

コールバック関数が主に使われるケース

コールバック関数は主に非同期処理を行う時に使用されるもので、呼び出した関数の処理が終わったあとなどにコールバック関数として指定した関数を実行させたい場合に使用されます。よく例として使われるのが一定時間経過したあとに特定の処理を実行して欲しい場合やボタンがクリックされたときに実行して欲しい処理を指定するためにコールバック関数は使われます。

それでは window.setTimeout メソッドを使ったサンプルを作ってみます。 setTimeout メソッドは指定された秒数だけ待ったあと、引数に指定されたコールバック関数を実行するメソッドです。 

setTimeout(function, delay);

最初の引数にコールバック関数を指定し、二番目の引数に待機する秒数をミリ秒( 1/1000 秒)単位で指定します。次のサンプルをみてください。 

const dispBye = function(){
  console.log('Bye.');
}

console.log('Good Morning.')

setTimeout(dispBye, 3000);

console.log('How are you?');

>> Good Morning.
>> How are you?

>> Bye.

サンプルを実行すると、 'Good Morning.' と出力したあと setTimeout メソッドを呼び出しています。 3 秒経過するまで待って引数に指定されたコールバック関数が呼び出されますが、非同期のため 3 秒待っている間にも次の処理が順に実行されていきますので 'How are you?' が先に出力されます。そして setTimeout メソッドが呼ばれて 3 秒後にコールバック関数が呼ばれて 'Bye.' が実行されます。

今回は簡単なサンプルでしたが、呼び出した高階関数の処理が終わったら指定の関数を呼びだして実行させるといったことがコールバック関数の仕組みを使うことで簡単に実現することができます。

-- --

JavaScript におけるコールバック関数および高階関数の使い方と具体的にどのようなケースで利用できるのかについて解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ
検索