クロージャについての理解 | Closures

もし「クロージャって？」と聞かれた時に、「あ、こう答えたら良いかもしれない」という言い方を思いついたので、メモしておきたいと思います。

（言い方って・・） 

その言い方とは、

関数とその関数が参照できるスコープのセットです。

( ・∇・)

関数だけともちがうしスコープだけともちがう、というところがポイントかなと思っています。

MDNやブログ、クロージャの説明をしている記事など読みまくり、いまのところ（・・・・・）一番自分がしっくりきている、という考え方になります。

さっそくですが例にうつっていきたいと思います。

例1

 クロージャはつかっていない例です。

function foo(number){
    let local = 1;
    return local+number;
}

console.log(foo(100));  //101

関数fooは実行されると、引数として数字をひとつ受け取ます。

そして関数内にローカルでセットされている変数localに対しその数字を足し、
その計算結果を戻り値として返してきます。

今回はローカル変数をあらかじめ1とセットしました。
そして関数foo実行時に引数として100を渡しました。

コンソールに計算結果を表示すると101となります。

このコードでみていただきたいポイントとしては、

変数 local自体を変えることはできないという点です。

( ・∇・)

例2 

次はクロージャをつかった例です。

function bar(){
    let local = 1 ;    
    return function(number){
        while(local < number){
            ++local;
        }
        return local;
    }
} 

let localToNumber= bar();

console.log(localToNumber(100)); //100

関数barを実行しますと関数がかえってきます。

その戻り値である関数を実行したいので、変数localToNumberに代入しました。

変数localToNumberに代入された関数は、
実行されると、引数として数字をひとつ受け取ります。

そして変数localが受け取った引数よりも小さい間はずっとlocalに1を足しつづけます。

変数localが引数より小さいという条件がfalseになった瞬間、whileループ終了。
その時点の変数localが戻り値として返されます。

今回はローカル変数として例1と同じく1をセットしました。
今回の戻り値である変数localは、関数barのローカル変数であるにもかかわらず、
初期値の1から、戻り値である100まで増加しています。

( ・∇・) 

例1では変数localを変更できませんでした。

ここでやっと冒頭で申し上げた、関数とその関数が参照できるスコープのセット のお話がでてきます。

（やっと・・！）

関数barの戻り値である関数は、関数barのスコープにあるローカル変数を参照できます。

( ・∇・) ？

内側にある関数はその外側スコープに存在している変数をみにいくことができる、と言い換えた方がわかりやすいかもしれません。

( ・∇・) ！

変数localToNumberには、関数だけでなく参照できるスコープも一緒に代入された、と考えるとわかりやすくないでしょうか。

このセットがクロージャだと。

汚くてすみません・・

冒頭で申し上げた、関数とその関数が参照できるスコープのセット は、このことです。
 

暫定的に、「クロージャとは？」と言われた時にイメージするものとしたいと思います。

( ・∇・)!!

実際エンジニアとして活躍されている方々は、もっとわかりやすい例や、クロージャをつかうメリットなど有益な情報を共有されている方もたくさんいらっしゃいます。

自分の場合はまだまだそこまでは到達しておらず、あくまでも「お勉強」という域を出ない中ではあります。

( ・∇・;)

はやく現場でコードに触れてみたいと思う日々ですが、下積みと思って淡々とやっていきたいとおもいます。冗長になりましたがここまで読んでいただきありがとうございます。