javascript クロージャの簡単な使い方

javascript クロージャの簡単な使い方

javascriptで、クロージャの簡単な使い方を記述してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.134

クロージャ使用

javascriptでは以下のように、関数の戻り値をローカル変数にすると、その値を変数に保持することができます。

'use strict';

function add() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  }
}

const obj1 = add();
const obj2 = add();

obj1(); // 1
obj1(); // 2
obj1(); // 3

obj2(); // 1
obj2(); // 2

上記のコードの結果を確認すると、add関数内にある変数「count」を、それぞれの変数に保持した関数から変更された結果が参照できていることがわかります。

モジュールパターン

また、以下のようなデータを安全に保つ、モジュールパターンとして、クロージャは利用されます。

'use strict';

const hoge = (function () {

  let count = 0;

  const add = function () {
    count++;
  };

  const disp = function () {
    console.log(count);
  };

  return {
    add: add,
    disp: disp
  };

})();

hoge.add();
hoge.disp(); // 0

hoge.add();
hoge.disp(); // 1

以下のように、countには「hoge.count」でアクセスすることはできません。

console.log(hoge.count);
// undefined