浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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>

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

のが良いと思います。
  • この記事いいね! (0)