JavaScriptの変数宣言

昔、はじめてExcelのVBAを書いたときに変数宣言をしないで数値計算がおかしくなって以来、変数の宣言と型には結構神経を使うようになったのですが、JavaScriptでも同様に気をつけた方が良さそうです。

JavaScriptのお勉強を例のサイ本で進めているのですが、変数のスコープを読んでいてさらっと説明されているけど結構重要なことがあったのでメモしておきます。

JavaScriptでは変数を使用するとき、宣言をしなくても代入して変数を参照することは可能です。(いきなりエディタに変数名を書き出してもOK!)もちろん、変数を宣言して代入したうえで参照することも可能です。ただ、いずれの変数も宣言して代入しないと値は不定となり変数を参照することはできません。ここまでは、直感的な話なのです。

変数の宣言については、宣言するかしないかで変数のスコープにも影響してきます。つまり、変数を宣言しないで代入した場合、この変数はグローバル変数になります。もちろん、変数を宣言した場合は宣言した変数の場所に応じてローカル変数(※)になります。

さらっと書かれているのですが、考えようによってはグローバル変数の嵐になり得る可能性をはらんでいますね。

[sourcecode language="Javascript"] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> </head> <body> <script type="text/javascript">

    test_func();

    function test_func(){
        // これは表示される
        var declarerd_variable = '宣言した変数';
        document.write(declarerd_variable + &quot;&lt;/br&gt;&quot;);

        // これも表示される
        not_declared_variable = '宣言なしに値を代入';
        document.write(not_declared_variable + &quot;&lt;/br&gt;&quot;);

        // これは初期化されていないので表示されない
        document.write(not_declared_not_inited_variable + &quot;&lt;/br&gt;&quot;)
    }

&lt;/script&gt;
&lt;button onclick=&quot;alert('not_declared_variable:' + not_declared_variable);&quot;&gt;宣言なしの変数はGlobal変数&lt;/button&gt;
&lt;button onclick=&quot;alert('declared_variable:' + declared_variable);&quot;&gt;宣言した変数はLocal変数&lt;/button&gt;

</body> </html> [/sourcecode]

WordPressではJavaScriptを実行させることができないのでソースコードをブラウザかなんかで確認するとわかるのですが、26行目で変数宣言なしの変数をalertから参照することができます。一方、27行目は関数内で宣言した変数なので参照することはできません。

この辺の話は、結構重要ですがグローバルオブジェクトとCallオブジェクト、スコープチェーンを考えると結構当たり前の話ですね。

まだ第4章…23章まであるのですが、先は長いです。気長に進めようと思います。

※JavaScriptにはブロックレベルのスコープが存在しません。なので、関数内で宣言した場合は関数内のローカル変数となります。