ES6{}でブロックスコープを作ったら中身が グローバル変数になった話

はじめに

弊社はES６で記載したコードをbabelでES５にトランスパイルしてます。
いつか問題が起きそうだなって思ってたら本当に起きたので備忘録として残しておきます。

前提

今回問題が起きたページでは複数のjsファイルが読み込まれていて、トータルするとかなりのjsコードが書かれています。

やりたかったこと

モーダルを表示後、「ばつボタン」もしくは「モーダル外」をクリックするとモーダルが閉じる。

問題が起きたコード

common.js

{
    const
         target = document.getElementById('commonPopup')
        ,targetCloseTrigger = document.getElementsByClassName('_close')[0]
    ;   

    const popupAni = {
        popupDisplay : ()=> {
            target.classList.remove('_no_show');
            target.classList.add('_is_show');
        },

        popupClose : ()=> {
            target.style.transition = ".7s";
            target.classList.remove('_is_show');
            target.classList.add('_no_show');
        }
    }

    window.addEventListener('load', ()=> {
        setTimeout(popupAni.popupDisplay(),5000);
    });
    targetCloseTrigger.addEventListener('click',()=> {
        popupAni.popupClose();
    });
}

上記はモーダルの表示と閉じる時に使われる関数です。
エラー内容をコピるの忘れてました。すみません。
ざっくりとtargetの中のtransitionはundefinedだよって感じです。

起きた問題

結論、モーダルのtarget変数が、後読みされる別のtarget変数に上書きされていました。

ES６をトランスパイルした際、{}はグローバルスコープとして認識されない

ES5にはconstやletという概念は存在せず、トランスパイルでvarに変換され、
{}で括られた変数たちはグローバル変数になりました。

解決策

{}ではなく即時関数で括る

common.js

(function(){
    const
         target = document.getElementById('commonPopup')
        ,targetCloseTrigger = document.getElementsByClassName('_close')[0]
    ;   

    const popupAni = {
        popupDisplay : ()=> {
            target.classList.remove('_no_show');
            target.classList.add('_is_show');
        },

        popupClose : ()=> {
            target.style.transition = ".7s";
            target.classList.remove('_is_show');
            target.classList.add('_no_show');
        }
    }

    window.addEventListener('load', ()=> {
        setTimeout(popupAni.popupDisplay(),5000);
    });
    targetCloseTrigger.addEventListener('click',()=> {
        popupAni.popupClose();
    });
})();

いったんはこれで解決しました。
そもそも変数名が単調すぎるって問題もありますが。。。

参考サイト