【JavaScript】クロージャとは？特徴や用途を解説！

この記事では『クロージャ』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

• クロージャとは
• クロージャの用途
• クロージャの特徴

クロージャとは

クロージャとは、関数とその関数が定義されたスコープを保持し続ける関数です。

具体的には、関数の中に内部関数を定義し、内部関数で外部関数の変数や関数にアクセスします。すると、外部関数が終了した後でも、内部関数が外部関数の変数や関数にアクセスし続けることが可能になります。この性質を用いると、特定の状態を保持し続けたり、動的に関数を生成することができます。

クロージャのサンプルコードを以下に示します。

function outerFunction() {
  let outerVariable = 'I am from outer';

  // outerFunction関数の内部でinnerFunction関数を定義している
  function innerFunction() {
    // innerFunction関数はouterFunction関数のスコープに定義された変数outerVariableにアクセスする
    console.log(outerVariable);
  }

  return innerFunction; // outerFunctionの返り値はinnerFunction関数
}

// outerFunction()の返り値はinnerFunction関数なので、closure変数はinnerFunction関数を指している
const closure = outerFunction();

// innerFunction関数が実行される
closure(); // I am from outer と出力

上記のサンプルコードでは、outerFunctionという外部関数の中に、innerFunctionという内部関数が定義されています。また、outerFunctionのスコープ内で定義されたouterVariableに、innerFunctionはアクセスしています。すると、outerFunctionが終了しても、innerFunctionはそのスコープ（outerVariable）を保持し続けます。

このように、外部関数の変数にアクセスし続ける関数がクロージャです（上記のサンプルコードでは、innerFunctionがクロージャとなります）。

クロージャの用途

クロージャは以下のような場面でよく使われます。

• データをカプセル化する
• 動的な関数を作成する

各用途について順番に説明します。

データをカプセル化する

クロージャを使うことで、外部から直接アクセスできない変数を定義し、その変数にアクセスするためのインターフェースを提供できます。これにより、重要なデータや情報を外部から隠蔽することができます（データの隠蔽）。

サンプルコードを以下に示します。

function counter() {
  //count変数は関数の外部からアクセスすることができない
  let count = 0;

  // これがクロージャ（無名関数）
  return function () {
    // count変数をインクリメントした値はクロージャによって保持される
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

上記のサンプルコードでは、counter関数の中で宣言されているcount変数は外部から直接変更できませんが、クロージャを通じてcounter関数内のcount変数にアクセスして、インクリメントすることができます。通常の関数であれば、関数の実行が完了すると宣言されている変数の値は解放されて、次回の実行時に初期化されてしまいますが、クロージャの中で外部関数の変数へアクセスしている場合には、クロージャによって変数の値を保持し続けることができます。

クロージャを使用しない場合、count変数が外部から直接アクセスされるため、保護されません。サンプルコードを以下に示します。

let count = 0;

function increment() {
  count++;
  return count;
}

console.log(increment()); // 1
console.log(increment()); // 2
count = 100; // 外部から直接アクセス可能
console.log(increment()); // 101

上記のサンプルコードでは、count変数はグローバルスコープに存在するため、外部から簡単にアクセスして変更することができます。クロージャを使用すれば、こうした直接アクセスを防ぐことができます。

動的な関数を作成する

クロージャを利用すると、特定の引数や状況に基づいて動的に異なる関数を生成することが可能です。

サンプルコードを以下に示します。

function createMultiplier(num) {
  function multiplier(value) {
    // createMultiplier関数の引数numはクロージャによって値が保持される
    return value * num;
  }
  return multiplier;
}

const double = createMultiplier(2);
console.log(double(5)); // 10

const triple = createMultiplier(3);
console.log(triple(10)); // 30

上記のサンプルコードでは、createMultiplierは動的に異なる関数（doubleやtriple）を生成し、クロージャによって生成された関数（doubleやtriple）内でnumの値が保持されています。

クロージャを使用せずに同様の処理を行うと、動的に異なる関数を生成することができません。

function multiplier(value, num) {
  return value * num;
}

console.log(multiplier(5, 2)); // 10
console.log(multiplier(10, 3)); // 30

上記のサンプルコードでは、関数は毎回引数としてnumを受け取る必要があり、動的に異なる関数を生成することができません。

クロージャの特徴

クロージャには、以下のような特徴があります。

function counter() {
  let count = 0;
  function increment() {
    // count変数をインクリメントした値はクロージャによって保持される
    count = count + 1;
    return count;
  }
  return increment;
}
// countUpとnewCountUpは異なるincrement関数を保持している
const countUp = counter();
const newCountUp = counter();

// countUpとnewCountUpは異なるincrement関数を指しているため、===演算子で比較するとfalseになる
console.log(countUp === newCountUp); // false

// それぞれのカウンタは独立しており、状態も別々に保持されているため、
// 1つのカウンタの影響が他方に及ぶことはない
console.log(countUp()); // => 1
console.log(newCountUp()); // => 1

本記事のまとめ

この記事では『クロージャ』について、以下の内容を説明しました。

• クロージャとは
• クロージャの用途
• クロージャの特徴

お読み頂きありがとうございました。