関数もグローバル汚染に気を付けるべきでしょうか

Question

前提

静的なHPを作っています
swiperやcolorboxなどの複数の外部jsファイルを読み込んでいます
そしてcommon.jsというファイルの中に自作関数を作っています

###質問

common.jsの中でグローバル変数は使用しないように関数の中に入れて使っていますが、
関数自体がグローバルになってしまっていることは問題ないのでしょうか？

    
$(function () {
    hoge();//hogeという関数名がグローバルになってしまっている？
});

function hoge(){ //グローバルな関数
    var hogeLocal = 'hoge'; //ローカルな変数
    return hogeLocal;
}

例えば以下のように
accordion、spNav、deviceJudgeという関数名がグローバルになることを防ぐために、
common.js中を即時関数で囲んだほうがいいのでしょうか？

(function(){//ここで即時関数で囲う必要があるのでしょうか？

    $(function () {
        accordion();
        spNav();
        deviceJudge();
    });
    
     function accordion(){
        //アコーディオン
        var $accordion = $('.accordion');
        $accordion.on("click", function() {
                $(this).next().slideToggle();
        });
    }

    function spNav(){
        //スマホナビの開閉
        var $spNavBtn= $('.sp-nav-btn');
        $accordion.on("click", function() {
                $('body').addClass('is-open');
        });
    }

    function deviceJudge(){
        //デバイス判定
        if (navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)) {
		return 'SP';
	} else {
		return 'PC';
	}
    }

}());

Comments

[m.ts10806]

どういう風に使用されるのか具体的に例示してください。

Answer 1

関数名とグローバル変数名

関数名とグローバル変数名は別概念なので、分けて考えて下さい。

• 再利用可能にするなら、関数名を付ける
• 他所から呼び出し可能にするなら、グローバル関数名を付ける

基本的には、この2つを判断基準にすれば良いと思います。

グローバル汚染

今時の実装なら、グローバル汚染の回避手段は即時関数式以外にもあります。

• アロー関数(即時実行)
• ブロックスコープ
• <script type="module">

また、即時関数式は名前を付けてもグローバル汚染されないので、再帰処理で有効です。

Re: TAFFT さん

Comments

[TAFFT]

ありがとうございます！
アロー関数などは勉強中です。。涙
再利用可能か、他所から呼び出し可能にするかを基準にするのですね、、、
まだちゃんとは理解できていないのですが、

例えばcommon.js内の変数や関数がすべてcommon.js内で完結していて
他所で呼び出す必要がない場合は、common.js内の記述をすべて即時関数で
囲ってしまえば他のjsファイル（swiper.jsなど）に影響しない

ということで合っていますでしょうか。。？汗

[think49]

> 例えばcommon.js内の変数や関数がすべてcommon.js内で完結していて(以下略)

合っています。
補足するなら、アロー関数で括る、module化する等、無名関数式で括る以外にも方法がある事ですね。
特に、ES moduleはこの問題を解決する為にECMAScriptが出した「一つの答え」といえます。

[think49]

common.js内で関数名を付けるのは、common.js内で再利用する為ですが、グローバルに再利用するにはグローバル変数を付与する、という見方も出来ます。

[TAFFT]

ありがとうございます！
理解できました！
ES moduleについても勉強しようと思います！

Answer 2

下記のような記事が参考になるのではと。

• 中上級者になるためのJavaScript【知識編】

3. 関数#3-4. 即時関数の項に触れられてますね。

Comments

[TAFFT]

ありがとうございます！
処理ごとに関数になっていればわかりやすいかなとわざわざ関数名をつけていましたが
一回しか実行しないものは即時関数で実行してしまえばいいのですね。。

ただ上記質問の例で言うとdeviceJudge()というPCかSPを返す関数の場合は
関数名を付けざるを得ないと思うのですがこの関数がグローバルになってしまうことは
問題ないのでしょうか。。。？
それともこのdeviceJudge()という関数を使いまわすであろう範囲を無名関数で囲うべきなのでしょうか。。？

[m.ts10806]

んー、そこは要件次第ではないかなと。全体のクラス設計を考える必要がありそうです。
（どこまで厳格なつくりにするか、とかプロジェクトによっても違うと思うので）

[TAFFT]

要件次第ですか。。設計からとなると難しそうですね。。。
回答ありがとうございます！