先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで関数を他の関数に渡すってどういう意味ですか？」

先生

「いい質問ですね。関数を引数として渡すとは、関数の中に別の関数を入れて使うことです。たとえば、レシピの中に別のレシピを渡して使うイメージです。」

生徒

「関数を渡すって、普通の値とどう違うんですか？」

先生

「普通の値は数字や文字などですが、JavaScriptでは関数も『値』として扱えます。だから、関数を変数に入れたり、他の関数に渡したりできるんです。」

生徒

「実際にどうやって使うのか、例を見てみたいです！」

先生

「では、基本的な使い方を一緒に見ていきましょう！」

1. JavaScriptの関数は「値」として扱える

JavaScriptでは、関数はただの命令の集まりではなく「値」として扱えます。つまり、変数に関数を代入したり、他の関数の引数として渡すことができます。

例えば、数字や文字を変数に入れるのと同じように、関数も変数に入れられます。


function sayHello() {
  console.log("こんにちは！");
}

const greet = sayHello; // 関数を変数に代入
greet(); // こんにちは！

このように、sayHelloという関数をgreetという変数に入れて使うことができます。

2. 関数を引数として渡すとは？

関数を引数として渡すとは、ある関数の中に別の関数を「渡して」その関数を実行したり使ったりすることです。

わかりやすく例えると、料理を作るときに「調味料をかける」関数があって、その調味料のかけ方を別の関数として渡すようなものです。


// 調味料をかける関数
function applySeasoning(dish, seasoningFunc) {
  seasoningFunc(dish);
}

// 具体的な調味料の関数
function addSalt(dish) {
  console.log(dish + "に塩をかけました。");
}

applySeasoning("野菜サラダ", addSalt);

ここで、applySeasoningは「料理」と「調味料をかける方法（関数）」を受け取り、その調味料関数を実行しています。

3. なぜ関数を引数に渡すの？メリットは？

関数を引数として渡すことで、処理を柔軟に変えられます。例えば、同じ料理でも調味料を変えるだけで味が変わるのと同じように、処理の内容を変えられます。

これにより、コードの再利用や分かりやすさがアップし、プログラムがシンプルになります。

4. 実践例：配列の要素に関数を使って操作する

JavaScriptの配列には、関数を引数に取るメソッドがたくさんあります。例えばmapは、配列の各要素に対して関数を使って新しい配列を作る方法です。


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

function double(num) {
  return num * 2;
}

const doubledNumbers = numbers.map(double);
console.log(doubledNumbers); // [2, 4, 6, 8]

ここでは、doubleという関数をmapに渡して、配列の数字を2倍にしています。

5. 無名関数（アロー関数）で書く方法

関数を引数に渡すときに、名前をつけない関数（無名関数）を書くこともよくあります。最近はアロー関数という書き方がよく使われています。


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

const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8]

このように、関数を直接引数の中に書いて渡すこともできます。

6. 関数を引数に渡す時の注意点

関数名の後ろに () を付けないこと。付けるとすぐに実行されてしまいます。
渡された関数は、渡された側の関数の中で呼び出されるまで実行されません。
わかりやすくするために、関数の役割や名前を工夫すると良いです。


// 正しい渡し方
function greet() {
  console.log("こんにちは！");
}

function runFunction(func) {
  func(); // ここで実行
}

runFunction(greet); // OK

// 間違った渡し方
runFunction(greet()); // 関数がすぐ実行されるのでNG