[JavaScript] 英語動画「クロージャー(closure) 」で一番再生されている動画の和訳 No.2

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

}

1. まず、addThreeをみてみると　addToの仮引数passed に3が入力されていますね！
   「外側で設定された変数は内側functionオブジェクトのプロパティとして保存される」クロージャーのルールにより、function add(functionオブジェクト)ではもうすでに passed = 3 が入ってます！！！ （ヤバすぎる！！！）

2. つまり、addThreeには、初期設定としてもうすでにpassedが入っている。
   console.log(addThree(1))としてあげると、4が結果として出てくるということになります。

この動画では繰り返し、クロージャーは機能とかではなくて、ただ単に「外側で定義された変数はfunctionオブジェクトにプロパティとして"保存"される」ということを強調していました。そう考えると、確かにfunction内で当たり前のように使用できることも納得ですね！

参考動画: https://www.youtube.com/watch?v=71AtaJpJHw0&list=PLhiwWzNTSiJnjMWJ2Xn1fYiWewl0qnRIH&index=21&t=6s