0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[JavaScript] クロージャー(closure) をわかりやすくまとめてみた No.1

Last updated at Posted at 2020-08-29

#なんと、このコードもクロージャーなんです。

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の内側から、外側の変数・定数にアクセス出来ますよー!というのがクロージャーの特徴になりますね! 

#なぜクロージャーを使うのか?
たとえばグローバル変数を使えば、どこからでもアクセスが出来ます。
ですが、あえてクロージャーを使う利点をあげるとすれば、その名の通り外部から変数にアクセスできない仕組みになっているからです!(カプセル化と呼びます)これはコードの安全性を高める上で重要なテクニックです。クロージャーのテクニックを利用することでより安全で保守性の高いプログラムにすることが可能です。

参考動画: https://www.youtube.com/watch?v=3a0I8ICR1Vg

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?