JavaScriptで関数の中に関数を定義する方法10選

●JavaScriptで関数内関数とは？
- ○関数内関数のメリット
- ○関数内関数のデメリット
●関数内関数の基本的な書き方
●スコープと関数内関数
- ○サンプルコード4：関数内関数とスコープ
- ○サンプルコード5：クロージャと関数内関数
●関数内関数の応用例
●関数内関数を使う際の注意点
- ○サンプルコード9：this参照に気をつける
- ○サンプルコード10：メモリリークに注意
まとめ

●JavaScriptで関数内関数とは？

JavaScriptの関数について学んでいる皆さん、関数の中に関数を定義するという言葉を聞いたことはありますか？

ちょっとややこしいですが、実はこの関数内関数という技術は、JavaScriptプログラミングにおいてとても重要な概念なんです。

関数内関数とは、文字通り関数の中に関数を定義することを指します。

外側の関数のスコープ内で内側の関数を定義するため、プライベート関数とも呼ばれています。

この内側の関数は、外側の関数の中でのみアクセスできるため、グローバルスコープを汚染せずに済むというメリットがあります。

では、なぜ関数内関数を使うのでしょうか？

それは、関数内関数を使うことで、コードの可読性や保守性を高められるからです。

関数内関数を使えば、関連する処理をグループ化し、外部からのアクセスを制限できます。

これにより、コードがスッキリとし、バグの発生を防ぐことができるのです。

○関数内関数のメリット

関数内関数には、いくつかのメリットがあります。

1つ目は、コードの可読性が向上することです。関数内関数を使うことで、関連する処理をグループ化できます。

これにより、コードがスッキリとし、理解しやすくなります。

2つ目は、変数のスコープを制限できることです。関数内関数で定義した変数は、その関数の中でのみアクセスできます。

これにより、グローバルスコープを汚染せずに済み、予期しないバグを防ぐことができます。

3つ目は、プライバシーを保護できることです。

関数内関数は、外部からアクセスできないため、プライベートメソッドやプロパティを実現できます。

これにより、外部からの不正なアクセスを防ぐことができます。

○関数内関数のデメリット

一方で、関数内関数にはデメリットもあります。

1つ目は、メモリ効率が悪くなることです。

関数内関数を定義すると、その関数が呼び出されるたびに新しい関数オブジェクトが作成されます。

これにより、メモリ使用量が増大する可能性があります。

2つ目は、デバッグが難しくなることです。

関数内関数は、外部からアクセスできないため、デバッグの際に関数の中身を確認しにくくなります。

これにより、バグの発見や修正が難しくなる可能性があります。

ただ、これらのデメリットは、関数内関数の適切な使い方を心がければ、問題になることは少ないでしょう。

メモリ効率については、不要になった関数オブジェクトをガベージコレクションで適切に解放することで対処できます。

デバッグについては、関数内関数の処理を細かく分割し、適切にコメントを残すことで、可読性を高められます。

●関数内関数の基本的な書き方

さて、関数内関数のメリットとデメリットがわかったところで、実際にどのように関数内関数を定義するのか見ていきましょう。

基本的な書き方は、外側の関数の中で内側の関数を定義するだけです。ただ、最初は少しわかりにくいかもしれませんね。

それでは、シンプルな関数内関数の例から始めましょう。

○サンプルコード1：シンプルな関数内関数

function outer() {
  function inner() {
    console.log("これは関数内関数です");
  }
  inner();
}

outer();

実行結果

これは関数内関数です

このコードでは、outer関数の中にinner関数を定義しています。inner関数は、outer関数の中でのみ呼び出されています。

outer関数を呼び出すと、inner関数が実行され、”これは関数内関数です”というメッセージがコンソールに出力されます。

ポイントは、inner関数がouter関数の中でのみ定義され、外部からはアクセスできないことです。

これにより、inner関数はouter関数の中でのみ使用され、外部との干渉を防ぐことができます。

○サンプルコード2：引数を取る関数内関数

では、もう少し実用的な例を見てみましょう。

関数内関数でも、引数を取ることができます。

function multiplyBy(factor) {
  function multiply(number) {
    return number * factor;
  }
  return multiply;
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

実行結果

10
15

このコードでは、multiplyBy関数の中でmultiply関数を定義しています。

multiply関数は、numberという引数を取り、それにfactorを掛けた値を返します。

multiplyBy関数は、factorという引数を取り、multiply関数を返します。

multiplyBy関数を呼び出すときに、factorに2を渡すとdouble関数が、3を渡すとtriple関数が返されます。

double関数とtriple関数は、それぞれ渡された数値を2倍、3倍にして返します。

このように、関数内関数を使うことで、似たような処理をする関数をシンプルに定義できます。

また、外側の関数の引数を内側の関数で利用できるため、柔軟性も高くなります。

○サンプルコード3：戻り値のある関数内関数

最後に、関数内関数から値を返す例を見てみましょう。

function calculateTax(tax) {
  function addTax(price) {
    return price + (price * tax);
  }
  return addTax;
}

const japanTax = calculateTax(0.1);
const usTax = calculateTax(0.08);

console.log(japanTax(100)); // 110
console.log(usTax(100)); // 108

実行結果

110
108

このコードでは、calculateTax関数の中でaddTax関数を定義しています。

addTax関数は、priceという引数を取り、それにtaxを掛けた値を足して返します。

calculateTax関数は、taxという引数を取り、addTax関数を返します。

calculateTax関数を呼び出すときに、taxに0.1を渡すとjapanTax関数が、0.08を渡すとusTax関数が返されます。

japanTax関数とusTax関数は、それぞれ渡された金額に対して、日本の消費税10%、アメリカの売上税8%を加算して返します。

●スコープと関数内関数

さて、関数内関数の基本的な書き方がわかったところで、もう少し踏み込んだ話をしましょう。

JavaScriptを学ぶ上で避けて通れないのが、スコープとクロージャの概念です。

実は、関数内関数は、このスコープとクロージャを理解する上で、とても重要な役割を果たしているんです。

まずは、スコープから見ていきましょう。スコープとは、変数やパラメータの有効範囲のことを指します。

JavaScriptには、グローバルスコープとローカルスコープがあります。関数内関数を使うと、このスコープの概念がよくわかります。

○サンプルコード4：関数内関数とスコープ

let globalVariable = "グローバル";

function outerFunction() {
  let outerVariable = "アウター";

  function innerFunction() {
    let innerVariable = "インナー";
    console.log(globalVariable);
    console.log(outerVariable);
    console.log(innerVariable);
  }

  innerFunction();
  console.log(globalVariable);
  console.log(outerVariable);
  // console.log(innerVariable); // エラー：innerVariableは未定義
}

outerFunction();
console.log(globalVariable);
// console.log(outerVariable); // エラー：outerVariableは未定義
// console.log(innerVariable); // エラー：innerVariableは未定義

実行結果

グローバル
アウター
インナー
グローバル
アウター
グローバル

このコードでは、グローバルスコープ、outerFunction内のスコープ、innerFunction内のスコープ、それぞれで変数を定義しています。

innerFunction内では、globalVariable、outerVariable、innerVariableのすべてにアクセスできます。

これは、innerFunctionがグローバルスコープとouterFunctionのスコープを継承しているためです。

outerFunction内では、globalVariableとouterVariableにアクセスできますが、innerVariableにはアクセスできません。

これは、innerVariableがinnerFunctionのスコープ内でのみ有効だからです。

グローバルスコープでは、globalVariableのみアクセスできます。

outerVariableとinnerVariableは、それぞれouterFunctionとinnerFunctionのスコープ内でのみ有効なので、グローバルスコープからはアクセスできません。

○サンプルコード5：クロージャと関数内関数

次に、クロージャについて見ていきましょう。

クロージャとは、関数とその関数が定義された環境の組み合わせのことを指します。

言い換えると、ある関数から、その外側の関数の変数にアクセスできる仕組みのことです。

function outerFunction() {
  let outerVariable = 0;

  function innerFunction() {
    console.log(outerVariable);
    outerVariable++;
  }

  return innerFunction;
}

const closure1 = outerFunction();
const closure2 = outerFunction();

closure1(); // 0
closure1(); // 1
closure1(); // 2

closure2(); // 0
closure2(); // 1

実行結果：

このコードでは、outerFunction内でouterVariableを定義し、innerFunctionを返しています。

innerFunctionは、outerVariableにアクセスし、その値を1ずつ増やしています。

outerFunctionを呼び出すたびに、新しいouterVariableとinnerFunctionのセットが作成されます。

このセットがクロージャです。closure1とclosure2は、それぞれ独立したouterVariableを持っています。

closure1を呼び出すたびに、closure1のouterVariableが1ずつ増えていきます。

一方、closure2を呼び出しても、closure1のouterVariableには影響しません。

これは、それぞれのクロージャが独立した環境を持っているためです。

●関数内関数の応用例

さて、スコープとクロージャについて理解が深まったところで、実際に関数内関数をどのように活用できるのか、具体的な例を見ていきましょう。

ここからは、少し高度な内容になりますが、ゆっくり丁寧に説明していくので、一緒に頑張って理解していきましょう。

○サンプルコード6：カウンター

まずは、カウンターの例から見ていきましょう。

カウンターは、ある値を1ずつ増やしていく処理のことです。

これを関数内関数で実現してみます。

function counterGenerator() {
  let count = 0;

  function counter() {
    count++;
    console.log(count);
  }

  return counter;
}

const counter1 = counterGenerator();
const counter2 = counterGenerator();

counter1(); // 1
counter1(); // 2
counter1(); // 3

counter2(); // 1
counter2(); // 2

実行結果

このコードでは、counterGenerator関数の中でcount変数とcounter関数を定義し、counter関数を返しています。

counter関数は、count変数の値を1増やして、その値をコンソールに出力します。

counterGenerator関数を呼び出すたびに、新しいcountとcounterのセットが作成されます。

counter1とcounter2は、それぞれ独立したcountを持っています。

counter1を呼び出すたびに、counter1のcountが1ずつ増えていきます。

一方、counter2を呼び出しても、counter1のcountには影響しません。

これは、それぞれのカウンターが独立した環境を持っているためです。

このように、関数内関数とクロージャを使うことで、状態を持つカウンターを簡単に作ることができます。

○サンプルコード7：メモ化

次に、メモ化の例を見ていきましょう。

メモ化とは、関数の計算結果をキャッシュしておき、同じ引数で呼び出されたときにはキャッシュを返すことで、処理を高速化するテクニックです。

function memoize(fn) {
  const cache = new Map();

  function memoized(arg) {
    if (cache.has(arg)) {
      return cache.get(arg);
    }

    const result = fn(arg);
    cache.set(arg, result);
    return result;
  }

  return memoized;
}

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

const memoizedFactorial = memoize(factorial);

console.log(memoizedFactorial(5)); // 120
console.log(memoizedFactorial(5)); // 120 (キャッシュから返される)

実行結果：

120
120

このコードでは、memoize関数の中でcacheというMapとmemoized関数を定義し、memoized関数を返しています。

memoized関数は、引数argをキーとしてcacheを検索し、キャッシュがあればそれを返します。

キャッシュがない場合は、元の関数fnを呼び出し、その結果をcacheに保存してから返します。

factorial関数は、与えられた数の階乗を計算する再帰関数です。

これをmemoize関数に渡すことで、メモ化された関数memoizedFactorialを作ります。

memoizedFactorialを同じ引数で呼び出すと、2回目以降はキャッシュから結果が返されるため、計算が省略されます。

これにより、処理が高速化されるのです。

このように、関数内関数とクロージャを使うことで、メモ化という高度な技術を簡単に実装できます。

○サンプルコード8：デコレーター

最後に、デコレーターの例を見ていきましょう。

デコレーターとは、関数の機能を拡張するための関数のことです。

これを関数内関数で実現してみます。

function logging(fn) {
  function logged(...args) {
    console.log(`Calling ${fn.name} with arguments: ${args}`);
    const result = fn(...args);
    console.log(`${fn.name} returned: ${result}`);
    return result;
  }

  return logged;
}

function add(a, b) {
  return a + b;
}

const loggedAdd = logging(add);

console.log(loggedAdd(2, 3)); // 5
console.log(loggedAdd(4, 5)); // 9

実行結果：

Calling add with arguments: 2,3
add returned: 5
5
Calling add with arguments: 4,5
add returned: 9
9

このコードでは、logging関数の中でlogged関数を定義し、logged関数を返しています。

logged関数は、元の関数fnを呼び出す前後でログを出力します。

add関数は、2つの数を受け取って、その和を返す単純な関数です。

これをlogging関数に渡すことで、ログ出力機能が追加されたloggedAdd関数を作ります。

loggedAddを呼び出すと、呼び出し前に引数のログが、呼び出し後に戻り値のログが出力されます。

元のadd関数の機能はそのまま維持されています。

このように、関数内関数を使うことで、既存の関数の機能を変更することなく、新しい機能を追加できます。

●関数内関数を使う際の注意点

さて、関数内関数の応用例を見てきましたが、実際に使う際には注意すべき点もあります。

ここでは、そんな注意点を2つ取り上げたいと思います。

○サンプルコード9：this参照に気をつける

まずは、this参照に関する注意点です。

JavaScriptの関数内で使われるthisは、その関数の呼び出し方によって参照先が変わります。

これは、関数内関数を使う際に特に注意が必要です。

const obj = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, ${this.name}!`);

    function inner() {
      console.log(`Goodbye, ${this.name}!`);
    }

    inner();
  }
};

obj.greet();

実行結果

Hello, Alice!
Goodbye, undefined!

このコードでは、objオブジェクトのgreet関数の中で、inner関数を定義しています。

greet関数の中ではthisはobjを参照するので、Hello, Alice!と出力されます。

しかし、inner関数の中ではthisはグローバルオブジェクト（ブラウザではwindow）を参照するので、Goodbye, undefined!と出力されてしまいます。

この問題を解決するには、greet関数の中でthisを別の変数に代入し、それをinner関数の中で使うようにします。

const obj = {
  name: "Alice",
  greet: function() {
    const self = this;
    console.log(`Hello, ${self.name}!`);

    function inner() {
      console.log(`Goodbye, ${self.name}!`);
    }

    inner();
  }
};

obj.greet();

実行結果

Hello, Alice!
Goodbye, Alice!

このように、関数内関数を使う際は、thisの参照先に十分注意する必要があります。

○サンプルコード10：メモリリークに注意

もう1つの注意点は、メモリリークです。

関数内関数とクロージャを使うと、意図せずメモリリークを引き起こすことがあります。

function createLargeClosure() {
  const largeData = new Array(1000000).fill('large');

  function unnecessaryClosure() {
    console.log('I am unnecessary!');
  }

  return unnecessaryClosure;
}

const closure = createLargeClosure();

このコードでは、createLargeClosure関数の中で大きな配列largeDataを作成し、unnecessaryClosure関数を返しています。

unnecessaryClosure関数はlargeDataを使っていませんが、クロージャによってlargeDataへの参照を保持し続けます。

その結果、createLargeClosure関数を呼び出すたびに、大量のメモリが消費されたままになります。これがメモリリークです。

メモリリークを避けるには、不要になった変数への参照を切るようにします。

具体的には、unnecessaryClosure関数の中でlargeDataを使わないようにするか、createLargeClosure関数の中でlargeDataをnullにするなどの対処が必要です。

function createLargeClosure() {
  let largeData = new Array(1000000).fill('large');

  function unnecessaryClosure() {
    console.log('I am unnecessary!');
  }

  largeData = null;  // 参照を切る

  return unnecessaryClosure;
}

const closure = createLargeClosure();

このように、関数内関数とクロージャは強力な機能ですが、使い方を誤るとバグやパフォーマンス問題の原因になります。

十分に注意して使いましょう。