なんと、このコードもクロージャーなんです。
const myName = 'rika'
function printName(){
console.log(myName)
}
PrintName() // rika
他の言語では、functionの内側の変数から外側の変数にアクセスすることは出来ないのですが、JavaScriptだとそれが可能になります。それを「クロージャー」と呼びます。
上の例でも、グローバル変数myNameをfunctionの中での使用することが出来るんです。
一番使われるクロージャーの形はfunction内のfunction!
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log(`Outer Variable: ${outerVariable}`) //結果 outside
console.log(`Inner Variable: ${innerVariable}`) //結果 inside
}
}
const newFunction = outerFunction('outside')
newFunction('inside')
ここでもouterVariableが、innerFunction内でもアクセス出来ちゃってます。つまり「クロージャー」が使われているということですね。
たとえば、functionの外側に新しく変数を置いてみましょう。
function outerFunction(outerVariable) {
const name = 'rika' 定数nameを追加してみました。↓
return function innerFunction(innerVariable) {
console.log(`Outer Variable: ${outerVariable}`) //結果 outside
console.log(`Inner Variable: ${innerVariable}`) //結果 inside
console.log(name) //結果 rika と出力されます
}
}
const newFunction = outerFunction('outside')
newFunction('inside')
つまり、functionの内側から、外側の変数・定数にアクセス出来ますよー！というのがクロージャーの特徴になりますね！
なぜクロージャーを使うのか？
たとえばグローバル変数を使えば、どこからでもアクセスが出来ます。
ですが、あえてクロージャーを使う利点をあげるとすれば、その名の通り外部から変数にアクセスできない仕組みになっているからです！（カプセル化と呼びます）これはコードの安全性を高める上で重要なテクニックです。クロージャーのテクニックを利用することでより安全で保守性の高いプログラムにすることが可能です。