Javascript

【JavaScript】高階関数とコールバック関数について理解をまとめる

 

こんにちは、ともです。

最近、JavaScriptを勉強していまして高階関数やコールバック関数というものに出会いました。

JavaScriptって『マスタッシュ』が多くて難しいイメージだったんですが、この高階関数や関数の定義方法の豊富さ、関数がデータ型として存在している事などを考えると難しいという意識が無くなってきました。

そこでJavaScriptの高階関数とコールバック関数について理解をまとめて置こうと思います。

高階関数とは

高階関数とは、関数の引数や戻り値に関数を利用した関数のことです。

JavaScriptを勉強し始めた僕の驚いた事の一つに、関数がデータ型として存在しているという事です。

つまり、

let myFunc = function (val) {
  console.log('引数は' + val + 'です。');
}

このように関数を変数に格納することができるのです。

関数の引数にこの『myFunc』を与えてみます。

let myFunc = function (val) {
  console.log('引数は' + val + 'です。');
}

function koukaiFunc(val, myFunc) {// 引数に関数
  myFunc(val)
}

関数の引数にデータ型がFunctionであるものを与えました。

データ型がFunctionである変数を引数としてもつ関数を高階関数と呼びます。

JavaScriptの変数は型にFunctionが存在することを理解していれば、関数の引数に関数を与えることができるというのは楽に理解できました。

コールバック関数とは

高階関数と呼ばれる関数が存在することを理解すればコールバック関数は理解し易いです。

高階関数で引数として渡すような、後で呼び出される関数をコールバック関数と呼びます。

コールバックとは『後で呼出す』という意味であることからも理解し易いです。

メリット

高階関数を定義するメリットは与える関数を自由に定義できる点です。

ベースとなる機能を定義しておいて、詳細の実装内容を開発者に委ねることができます。

let myFunc = function (val) {
  console.log('データは' + val + 'です。');
}

function koukaiFunc(array, myFunc) {
  // 配列からデータを一件ずつ取り出す（ベース）
  for (let val of array) {
    // 詳細
    myFunc(val);
  }
}

koukaiFunc([1, 2, 3], myFunc)

ベースとなる配列から一件ずつデータを取り出す機能を持っています。

そこにmyFuncというコールバック関数を開発者が与え、データを一件ずつ表示させる機能を実装しました。

このように詳細を開発者がカスタマイズすることが可能となります。

匿名関数を利用する

コールバック関数(myFunc)を定義しましたが、コールバック関数は使い捨てとなる場合があります。

その場限りの関数に関しては関数リテラルとして記述するとシンプルになる場合があります。

function koukaiFunc(array, myFunc) {
  // 配列からデータを一件ずつ取り出す（ベース）
  for (let val of array) {
    // 詳細
    myFunc(val);
  }
}

koukaiFunc([1, 2, 3], function (val) {
  console.log('データは' + val + 'です。');
})

このように関数リテラルとして与えることも可能です。

もっとシンプルにアロー関数で記述してみます。

koukaiFunc([1, 2, 3], val => console.log('データは' + val + 'です。'))
あわせて読みたい

まとめ

高階関数についてまとめました。

引数や返り値に関数を利用したものを高階関数と呼ぶということが分かりました。

JavaScriptは関数がデータ型として存在しているので、関数に関数を与えるということができるのですね。

関連記事はこちら