はじめてのJavaScript:初心者の学び場（高階関数）

今回は高階関数を学び　まとめとして残します。

高階関数

他の関数を引数として受け取るか、あるいは関数を戻り値として返す関数のことです。JavaScriptにおいて、高階関数は非常に重要であり、コードの再利用性や柔軟性を高めるのに役立つ

高階関数の特徴

1.関数を引数として受け取ることができる
他の関数を引数として受け取ることができます。これにより、同じ処理を複数の関数で共有することが可能になる

function doSomething(func) {
  console.log("Doing something...");
  func(); // 他の関数を呼び出す
}

function sayHello() {
  console.log("Hello!");
}

doSomething(sayHello); // sayHello関数を引数として渡す

doSomethingという高階関数があり、sayHelloという関数を引数として受け取り、実行します。

2.関数を戻り値として返すことができる
関数を戻り値として返すこともできます。これにより、動的な関数生成やカリー化 (Currying) などの機能を実装することができる

function greet(language) {
  if (language === "en") {
    return function() {
      console.log("Hello!");
    };
  } else if (language === "es") {
    return function() {
      console.log("¡Hola!");
    };
  } else {
    return function() {
      console.log("Language not supported");
    };
  }
}

const greetEnglish = greet("en");
greetEnglish(); // "Hello!"

const greetSpanish = greet("es");
greetSpanish(); // "¡Hola!"

const greetUnknown = greet("jp");
greetUnknown(); // "Language not supported"

greetという高階関数があり、言語を受け取り、適切な挨拶を返す関数を戻り値として返します。

理解をもう少し深めるために実用的な高階関数の例

配列の操作における高階関数

高階関数は、配列の操作に非常に便利で、配列内の要素を加工したり、フィルタリングしたり、合計したりすることができる。

const numbers = [1, 2, 3, 4, 5];

// マップ関数: 配列の各要素に対して操作を行い、新しい配列を生成する
const squaredNumbers = numbers.map(function(num) {
  return num * num;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

// フィルタ関数: 条件に合致する要素のみを抽出する
const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

// リデュース関数: 配列内の要素を合計する
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15

イベントハンドリングにおける高階関数

イベントハンドリングにおける高階関数という用語は一般的に使われていません

Reactでのイベントハンドリングでは、イベントがトリガーされたときに実行される関数を定義します。これは通常、高階関数ではなく、通常の関数ですが、JavaScriptにおいては、イベントハンドラ自体が高階関数の概念に関連するもの

import React from 'react';

function MyComponent() {
  function handleClick() {
    console.log('Button clicked');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

export default MyComponent;

handleClickはイベントが発生したときに呼び出される関数です。Reactでは、この関数は「イベントハンドラ」と呼ばれます。handleClickは通常の関数であり、高階関数ではありませんが、イベントハンドラ自体がイベントを受け取り、それに応じて関数を実行する機能を持っています

非同期処理における高階関数

非同期処理を行う際に、高階関数はコールバックやPromiseと組み合わせて利用されることがあります。

function fetchData(callback) {
  setTimeout(function() {
    const data = { name: 'John', age: 30 };
    callback(data);
  }, 1000);
}

function processData(data) {
  console.log('Data received:', data);
}

fetchData(processData);

fetchData関数が非同期でデータを取得し、取得したデータをコールバック関数に渡しています。processData関数が高階関数としてfetchDataに渡され、データが取得された後に実行されます。