クロージャ

クロージャ

クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです。言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。JavaScript では、関数が作成されるたびにクロージャが作成されます。

むずかしい…。内側の関数から、外側にアクセスできまっせ。ってことのよう…。

書いてみる

const printMessage= () =>{
    const message = "hello";
    const print = () => {
        console.log(message);//ここがポイント
    }
    return print; //ここもポイント
}
const pr = printMessage();
pr();

print関数の中でmessageを使っています。 returnでprint関数を返しているのもポイント。ここで()をつけちゃうと処理結果を返しますが、つけなければ関数を返すことができます。
なので、pr()で関数を実行することができます。
この性質を利用することで、こんなこともできます。

const counter = (start) =>{
    let count = start;
    const increment = (num) => {
        count += num;
        return count;
    }
    return increment;
}
const cnt = counter(1);
cnt(2)
3
cnt(2)
5
cnt(3)
8

counter関数内で初期値を設定し、後は外側からincrement関数を実行しているので、countの値は保持されて加算されていきます。
countをグローバルで持たずに、プライベートな空間で保持することができました。
もうちょいギュッと書くとこう。

const counter = (count) =>{
    const increment = (num) => count+=num;
    return increment;
}

更に縮めるとこう。ワンライナー！

const counter = (count) => (num) => count+=num;

ちなみに、countは宣言に設定されるので、違った初期値で何個も宣言することができます。

const counter = (count) => (num) => count+=num;
const start5 = counter(5);
const start10 = counter(10);
start5(1);
6
start10(1);
11
start5(2);
8

おわり。