本記事ついて
本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。
クロージャー
クロージャーとは
レキシカルスコープの変数を関数が使用している状態
function fn1() {
let b = 1;
function fn2() {
console.log(b);
}
fn2();
}
fn1();
このようにfn2から外側のfn1のlet bを呼び出している状態
これを使って以下の関数を作ることができる
プライベート変数の定義
例えば
let num = 0;
increment();
increment();
increment();
function increment() {
num = num + 1;
console.log(num);
}
これのログを見ると1,2,3となっていると思いますが
let num = 0;
increment();
increment();
increment();
function increment() {
num = num + 1;
console.log(num);
}
num = 0;
increment();
としてしまうとnumが初期化しまいます
このようにならないように、内部で変数を持って外部からアクセスできないようにする方法をクロージャーを用いてやってみます。
function incrementFactory() {
let num = 0;
function increment() {
num = num + 1;
console.log(num);
}
return increment;
}
const increment = incrementFactory();
increment();
increment();
increment();
このようなコードにすることによりnumは外部から操作できないことになります
const increment = incrementFactory();
が実行されたときのみにnumが初期化されます。
その後は
increment();
が呼び出されたも
return increment;
の戻り値が呼び出される仕組み
動的な関数の生成
例えばこのようなコードがあります
function addNumberFactory(num) {
function addNumber(value) {
return num + value;
}
return addNumber;
}
const add5 = addNumberFactory(5);
const result = add5(10);
console.log(result);
これはaddNumberFactory(5);
numには5の値が渡っています
その後戻り値でaddNumberに戻るため
add5はnumに5が設定されている関数になる
add5(10)でvalueに10が渡されるため合わせてログに15が出てくることになる
このように渡される値によって生成される関数が変わってくるので動的は関数の生成と呼ぶことができる