【JavaScript】スコープの学習の振り返り③ クロージャー

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• スコープについての理解を深める

#本題
###1.クロージャー

クロージャーとはレキシカルスコープの変数を関数が使用している状態のこと

####クロージャーを使った実装
#####A.プライベート変数

ここではincrementを使って数字が１つずつカウントアップされていく仕組みを作ります。

// 数字を1,2,3と増やしていきたい
increment();
increment();
increment();

// 関数でincrementを定義
function increment(){
  let num = 0;
  // 変数numが１ずつ増えていく
  num = num + 1;
  console.log(num);
}
// この場合１が３回呼ばれる

関数が呼ばれるたびにnum = 0で初期化するのではなく、
グローバルコンテキストが呼ばれる前に初期化すれば、
カウントアップの仕組みが作れる

// グローバルコンテキストが呼ばれる前に初期化
// １度だけ呼ばれる
let num = 0;

// 数字を1,2,3と増やしていきたい
increment();
increment();
increment();

// 関数でincrementを定義
function increment(){
  // 変数numが１ずつ増えていく（省略形）
  // num変数に１ずつ代入されていく
  num += 1;
  console.log(num);
}

しかし、このままだと
incrementという関数を通さずにnumの値を変更できてしまうという問題が発生します。

let num = 0;

increment();
increment();
increment();

function increment(){
  num += 1;
  console.log(num);
}
// 例えば関数を呼び出した後に再度同じ値で関数を再定義すると初期化されて、また1から呼び出されていく
num = 0
increment();

ここで使用するのがプライベート関数

// 関数名をincrementFactoryに変更
// Factoryというのは何かを生成する場合につける変数名
// ここではincrementという値を作成するFactoryとして命名
function incrementFactory(){
  // グローバルコンテキスト前で宣言していた変数numをincrementFactory内に格納
  // このようにすることでincrementの外部に変数を探しに行く仕組みができました（これがクロージャー？）
  let num = 0;
  // 更にその中にincrementを定義
  function increment(){
    //  変数宣言と値も移動
    num += 1;
    console.log(num);
  }
  // returnを設定することで呼び出しもとをincrementFactoryに返却します
  // JSでは関数自体も返却可能
  return increment;
}

// 変数incrementはincrementFactoryを実行する
// かっこ（）が実行を意味する
// numの初期化はincrementFactoryを実行したときのみ初期化される
const increment = incrementFactory();
// ここで関数を実行するとカウントアップしていく
increment();
increment();
increment();
increment();
increment();

// 上記のように定義することでnumという宣言はincrementFactoryの中でしか呼び出せない
// console.log(num)とここで呼び出してもエラーになる

#####B.動的な関数の生成

// 関数addNumberFactory内に更に関数addNumberを定義
// 更にそれぞれに引数num,valをもたせる
function addNumberFactory(num){
  function addNumber(value){
    // 戻り値の作成
    return num + value;
  }
  // addNumberFactoyにaddNumberを返す
  return addNumber;
}

// add5変数にnumに５を代入した関数addNumberFactoryを定義
const add5 = addNumberFactory(5);
// 更にその値を変数resultに引数valを10にして代入
// 変数numに5が設定されている + value10を渡すので15と出力される
const result = add5(10);
// このようにすると15と出力される
console.log(result);

// このように渡す値によって生成される関数が変わってくる

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム