javascript var と const

はじめに

去年、会社の若い人と、javascript のvar と const の違いについて話していた時に気が付いたことです。

ボタンをクリックすると、テキストボックスに数字が出るだけの簡単なjavascriptですが、下記のソースは動きません。

<script>
document.addEventListener("DOMContentLoaded", function(event) {

    for(var idx=1;;idx++) {
        var textId = "text" + idx ;
        var text = document.getElementById(textId) ;
        if(text==null)
            break ;
        var buttonId = "button" + idx ;
        var button = document.getElementById(buttonId) ;
        if(button==null)
            break ;
        button.onclick = function() {
            text.value = idx ;
        } 
    }
  });
</script>

ボタンが押された時には、

button.onclick = function() { text.value=idx; }

の text が nullになるためです。

var を constに変更する

以下は、正しく動作するソースです。

<script>
document.addEventListener("DOMContentLoaded", function(event) {

    for(var idx=1;;idx++) {
        var textId = "text" + idx ;
        const text = document.getElementById(textId) ;
        if(text==null)
            break ;
        var buttonId = "button" + idx ;
        const button = document.getElementById(buttonId) ;
        if(button==null)
            break ;
        const idx2 = idx ;
        button.onclick = function() {
            text.value = idx2 ;
        }
    }
  });
</script>

varをconstに変更することにより、クロージャ内の text と idx2 が意図したスコープ内の変数を参照するようになったためだと思います。

google closure compiler

varを使ったまま正しく動作する方法を調べるため、google closure compiler で変換してみました。

変換すると、以下のようになりました。

<script>

document.addEventListener("DOMContentLoaded",function(event) {
    var $jscomp$loop$0={} ;
    var idx=1;
    for(;;$jscomp$loop$0=
        {
         $jscomp$loop$prop$text$1 : $jscomp$loop$0.$jscomp$loop$prop$text$1 ,
         $jscomp$loop$prop$idx2$2 : $jscomp$loop$0.$jscomp$loop$prop$idx2$2
        } ,idx++) {
        var textId="text"+idx;
        $jscomp$loop$0.$jscomp$loop$prop$text$1=document.getElementById(textId);
        if($jscomp$loop$0.$jscomp$loop$prop$text$1==null)
            break;
        var buttonId="button"+idx;
        var button=document.getElementById(buttonId);
        if(button==null)
            break;
        $jscomp$loop$0.$jscomp$loop$prop$idx2$2=idx;
        button.onclick=function($jscomp$loop$0) {
            return function(){
                $jscomp$loop$0.$jscomp$loop$prop$text$1.value=$jscomp$loop$0.$jscomp$loop$prop$idx2$2
            }}($jscomp$loop$0)
        }
    }
);

</script>

ちょっと、読み取るのが難しいのですが、どうやら

button.onclick = function() {
    text.value = idx ;
}

を

button.onclick = function(text,idx) {

    return function() {
         text.value = idx ;
    }
}(text,idx) ;

と変更すると良いようです。

つまり、関数を呼び出すことで、呼び出された関数側でも独自のスコープを持つため、元の text,idxとは別のスコープの変数として認識されるようです。

結論

javascriptのクロージャーのスコープは難しいと思いました。
javaはもう少し簡単ではないでしょうか？