基本的なクロージャの実践例の「モジュールパターン」は何が起きているの？

なんとなくクロージャーは分かったけど…

「JavaScriptのスコープの概念」や「クロージャーのメリット」は理解したけど、いまいち典型的なクロージャーのコードで何が起きているか分からなかったので調べてみました。

典型的なクロージャーのコードと分からんポイント

var module = (function() {//分からないポイント①： functionの前に"("がついて、function全体が()で囲われている
    var count = 0;

    return {
        increment: function() {//分からないポイント②：セミコロンの隣のfunctionという見慣れない記述
            count++;
        },
        show: function() {
            console.log(count);
        }
    };

})();//分からないポイント③：最後の謎の何も入っていない()

//分からないポイント④：〇〇.関数名();でよく分からんけど関数を呼べる？
module.show(); // 0

module.increment();
module.show(); // 1

console.log(count); // undefined

だいたいこのあたりがよく分からないポイントだと思います。

要点１：クロージャーは即時関数を使って記載されている

典型的なクロージャーのコードは即時関数というものを使って記載されています。
即時関数は、関数を定義すると同時に実行するための構文。

基本的な書き方

(function () {
    //処理
}());

引数と返り値

var result = (function (param1, param2) {
    return param1 + param2;
}(1, 2));

console.log(result); //3

つまり「変数module」に、関数を定義したと同時にその「関数を実行した結果」が入っていることが分かります。ここでいう「関数を実行した結果」とは「returnの中身」ですね。
「console.log(module);」を実施すると「increment」と「show」という関数が入っているのが分かると思います。

var module = (function() {//分からないポイント①： functionの前に"("がついて、function全体が()で囲われている
    var count = 0;

    return {//分からんポイント②：returnに関数が入ってる
        increment: function() {//分からないポイント②：セミコロンの隣のfunctionという見慣れない記述
            count++;
        },
        show: function() {
            console.log(count);
        }
    };

})();//分からないポイント③：最後の謎の何も入っていない()

//分からないポイント④：〇〇.関数名();でよく分からんけど関数を呼べる？
module.show(); // 0

module.increment();
module.show(); // 1

console.log(module);//incrementとshowという関数が入っているのが分かる

console.log(count); // undefined

開発ツールで見てみるとincrementとshowという関数が確かに入っていますね。

これで「分からないポイント①」と「分からないポイント③」は理解できたと思います。

要点２：JavaScriptで扱うものはすべてオブジェクトかオブジェクトのように使える

JavaScriptで扱うものはすべてオブジェクトかオブジェクトのように使えます。
オブジェクトにはプロパティとメソッドがあります。

オブジェクトの作り方と利用例

//testHumanというオブジェクトを作成
var testHuman = {
    firstName: "Hoge",
    lastName: "Fuga",
    sayHello: function(){ console.log("Hello") }// メソッドを作成
};

console.log(testHuman["firstName"]);  // Hoge
console.log(testHuman["lastName"]);  // Fuga
testHuman.sayHello();// Hello　メソッドを実施

上記のtestHumanオブジェクトのsayHelloメソッド作成と同様の方法で、moduleオブジェクトのincrementメソッドとshowメソッドを作成していることが分かります。testHuman.sayHello();と同様の方法で、「module.increment();」「module.show(); 」を実施していることが分かります。
これで「分からないポイント②」と「分からないポイント④」は理解できたと思います。

参考記事

qiita.com
qiita.com
qiita.com