【javascript】クロージャを使って昔担当したソースコードをきれいにした話│株式会社シーポイントラボ

今回はクロージャとグローバル変数の用途の違いについてです。

少し前に自分が担当していたプロジェクトを見返しているとグローバル変数をやたら使っていて

ものすごく見にくい・バグが起こりやすい状態だったので代替え手段としてクロージャを

使えば綺麗になるかなと思いここに至りました。

試しにメールアドレスを内包したクロージャ書いてみます。

</pre>
<div>(function($, window, document, undefined){</div>
<pre></pre>
<div>    var addressOperation = function (){</div>
<div>        var address = "";</div>
<div>        return {</div>
<div>          addAddress:function(ad){address = ad},</div>
<div>          getAddress:function(){ return address},</div>
<div>        }</div>
<div></div>
<div>      }</div>
<div>      var itou = addressOperation();</div>
<div>      itou.addAddress("itou.cooldvalues@example.com")</div>
<div>      console.log(itou.getAddress());</div>
<div></div>
<div>      var minoru = addressOperation();</div>
<div>      keisuke.addAddress("minoru.Vancouverdid@example.com")</div>
<div>      console.log(keisuke.getAddress());</div>
<div></div>
<pre></pre>
<div>    }(jQuery, window, this.document));</div>
<div>

クロージャのメリットの一つにグローバル変数を書かずにが関数を書けるという利点があります。

変数addOperationをメソッドとして人名変数に内包した場合もそれぞれが違う値を持つaddressとして

機能します。

プロフィールに例えると、nameやmailAddressなど基本情報が多い場合も同様にひとまとめにして

置くことでsatou.getAddressやsuzuki.getAddressといった名前の人物だけが持つオリジナル

変数を呼び出すこともできます。

グローバル変数ありだとこんな感じ。

小中規模のソースコードならばこれでも問題ないのですが、これがうん千行と続く巨大なソースコード

だった場合、おびただしい数のグローバル変数が生まれてしまいます。

</pre>
<pre></pre>
<div>var count = 0;</div>
<div>var second_count = 0;</div>
<pre></pre>
<div>function countPlus() {</div>
<div>    count += 1;</div>
<div>    console.log(count);</div>
<div>}</div>
<div></div>
<div>countPlus();</div>
<div></div>
<div>function second_countPlus() {</div>
<div>    second_count += 1;</div>
<div>    console.log(second_count);</div>
<div>}</div>
<div></div>
<div>second_countPlus();</div>
<div></div>
<div>

グローバル変数もクロージャも最終的に得られる結果は同じなのでコード量またはプロジェクトによって使い分ける

のが良いと思います。

【javascript】クロージャを使って昔担当したソースコードをきれいにした話

【JavaScript】throw で forEach 中でもどこでも break

【react】driver.jsのオーバーレイテキストを左詰めにした時に発生する突き出しの解消法

株式会社シーポイントラボ