クロージャー (JavaScript)

講義で学んだ記録を書きます (20220419.)

※その前にスコープについて軽く触れる

スコープには下記の４種類がある。
グローバルスコープ：１つのファイルどこからでもアクセスできる。
　　　　　　　　　　(注意：値の変更もどこでも可能になるので多用しない)
ローカスコープ：グローバル変数以外。　以下の2つに分かれる
関数スコープ：関数によって定義。関数内部からしか利用できない。
　　　　　　　※クロージャーで使用する知識
ブロックスコープ：{ブロック}で定義される。変数はブロック内で利用可能。
クロージャーではスコープの概念が大切になるので、未学習の方はぜひCheck!!!

クロージャー(closure)とは

関数の中に関数を作成し、内側の関数から外側の関数スコープへアクセスできるようにする。
これにより関数スコープ内の変数情報を記憶・コントロールできるようになる。

なぜクロージャーが使われるのか

普通の変数であると、ソースの量が多い or チームで開発する際自分のプログラムで使用する変数やオブジェクトが、意図せず更新され結果、エラーやバグが発生してしまい可用性が損なわれる可能性がある。
そこで、データを保護する役割が可能な『カプセル化』の一つとしてクロージャーが使用できる。
(関数スコープ内の値は関数内部からしか変更できないため)

実装例

script.js

const getGreetingName = (greeting) => {
    return (name) => `${greeting} ${name}`;
};
const greet = getGreetingName("Hello");  // Helloが保存される
console.log(greet("Ichiro"));  //Hello Ichiro
console.log(greet("Jiro"));  //Hello Jiro
const greet = getGreetingName("Good morning");  //Good morningが保存される
console.log(greet("Ichiro"));  //Good morning Ichiro

例のようにクロージャを使用することで、"Hello"の値が関数スコープ内に保存されるので、Helloの使い回しが可能。
変数greet として関数を保存できているので、不意の値変更も誘発せず可用性向上につながる。