Youtubeチャンネル Techsithの45万回以上再生されているクロージャー(Closure)に関する動画を日本語でまとめてみました。
#クロージャー(Closure)とは
以下のコードでは、仮引数(parameter)passedが設定してあり、functionの中には定数inner=2があります。
とてもシンプルです。実引数(arguments)に3を入れることで5が出てきますね。
const addTo = function(passed) {
const inner = 2;
return passed + inner;
};
console.log(addTo(3));
しかしJavascriptでは、この仮引数passedを設定しなくても5をconsole.logで出すことが可能なんです。
functionの上にconst passed = 3を置いてみましょう・・・ 5が出てきます
const passed = 3
const addTo = function() {
const inner = 2;
return passed + inner;
};
console.log(addTo()); //結果 5
これをクロージャーといいます。
JavaScriptではfunctionの外側に設定されている変数(定数)をfunctionの内側からアクセスすることが可能です。それはJavaScriptには「レキシカルスコープ」という機能が採用されているからなんです。
#functionもオブジェクトというところに注目！
ちょっと上記コードのaddToをconsoleでみてみましょう・・・
【ここはよく、じっくり読んでください】
このようにみてみると・・・functionオブジェクトに、外側で定義したconst passedがプロパティとして入っていて、それの値(value)が3となっています！
つまり、クロージャーはマジックでも適当な機能でもなんでもなくて、JavaScriptの機能として、「functionオブジェクトのプロパティに、外側で定義された変数(定数)がPRESERVED(保存)されるから」function内で使用することが出来る。。ということなんです！！ （これは衝撃）
＊オブジェクトやプロパティがまだわからない人は、「しまぶー」さんのYoutube動画でとてもわかりやすく、詳しく説明してくれています。
#他の例もみてみましょう!!
const addTo = function(passed) {
const add = function(inner) {
return passed + inner
};
const addThree = new addTo(3);
const addFour = new addTo(4);
console.log(addThree(1)); // 結果 4
console.log(addFour(1)); // 結果 5
}
-
まず、addThreeをみてみると addToの仮引数passed に3が入力されていますね！
「外側で設定された変数は内側functionオブジェクトのプロパティとして保存される」クロージャーのルールにより、function add(functionオブジェクト)ではもうすでに passed = 3 が入ってます！！！ （ヤバすぎる！！！） -
つまり、addThreeには、初期設定としてもうすでにpassedが入っている。
console.log(addThree(1))としてあげると、4が結果として出てくるということになります。
この動画では繰り返し、クロージャーは機能とかではなくて、ただ単に「外側で定義された変数はfunctionオブジェクトにプロパティとして"保存"される」ということを強調していました。そう考えると、確かにfunction内で当たり前のように使用できることも納得ですね！
参考動画: https://www.youtube.com/watch?v=71AtaJpJHw0&list=PLhiwWzNTSiJnjMWJ2Xn1fYiWewl0qnRIH&index=21&t=6s