javascriptのクロージャ（Closures）とは

クロージャ（Closures）とは

スコープを利用して外部からのアクセスを制限すること。

まずは、次の例文を見て説明します。

javascript

class AnnualSalary {
   salary: number
   private bonus: number = 1000000
   constructor(salary: number) {
       this.salary = salary
   }

   public get annualSalary() {
       return this.salary + this.bonus
   }
}

このコードは関連する役割をするメソッドや変数を一つのクラスにまとめてカプセル化したクラスです。このコードを見ると、privateで設定されたbonusは外部からはアクセスすることができない状態で、getメソッドのannualSalaryのみが参照しています。
では、いつこのようなクロージャを使うでしょうか。

クロージャの利用場面

カプセル化した時

上記のコードでも紹介しました通り、同類の性質を持つ変数や関数などをまとめてカプセル化し、一部のメソッドのみがアクセスできるようにする際によく使われます。

グローバル変数を減らしてバグを防ぐ時

javascript

let count = 0
function handleCilck(){
  count++
  return count
}

↓

javascript

function handleCilck(){
  let count = 0
  return function (){
    count++
    return count
  }
}

count変数を関数内に移動して、他のコードが参照できないようにするとバグを防ぐことができます。

コードを再利用する時

javascript

const newTag = function(open, close) {
    return function(content) {
        return open + content + close
    }
}

const bold = newTag('<b>', '</b>')
const italic = newTag('<i>', '</i>')

console.log(bold(italic("This is my content!")))
//<b><i>This is my content!</i></b>

注意点

varでの宣言は避ける

varで宣言した変数はブロックスコープ外になるため、外部からのアクセスが可能になってしまいます。