Javascript:変数スコープ

Javascriptのグローバル変数とローカル変数のまとめメモ。

• グローバル変数

            data = 'global';

            function scope(){
                data = 'local';
                return data;
            }
            document.writeln(scope());
            document.writeln(data);

実行結果

local local 

関数の外にある変数が関数内の処理で上書かれている。

• グローバル変数とローカル変数

            var data = 'global';

            function scope(){
                var data = 'local';
                return data;
            }
            document.writeln(scope());
            document.writeln(data);

実行結果

local global

変数宣言の前に"var"をつけることで、関数内のローカル変数とグローバル変数を区別できる。変数宣言はすべて"var"付きにすることが重要。

• 関数の仮引数

            value = 'global';
            function scope(value){
                value = 'local';
                return value;
            }
            document.writeln(scope('test'));
            document.writeln(value);

実行結果

local global

関数の仮引数は、暗黙的に"var"が宣言されている。その為、ローカル変数として扱われる。

• スコープチェーン

            var scopeData = 'global';
            function scope(){
                var scopeData = 'local';
                subScope();
                function subScope(){
                    var subData = 'subLocal';
                    document.writeln(scopeData);
                    document.writeln(subData);
                    document.writeln(data); // 未定義エラー
                }
            }
            scope();

実行結果

local subLocal 

"data"はどこにも定義されていないので、未定義エラー。"subData"と"scopeData"は定義されているので、表示できる。

• 即時関数パターン

            (function(){
                var data = 'sample';
                document.writeln(data);
            })(this);
            
            document.writeln(data); // エラーとなる

実行結果

sample 

jQuery等のライブラリでグローバルオブジェクトを汚染しないように使用しているパターン。jQueryではこのような使われ方をしている。

(function( window, undefined ) {
     // 処理
})( window );

これだとjQuery内の処理はグローバルオブジェクトを汚さずにすべてローカルオブジェクトとして扱う。Javascriptのよくないグローバル変数を隠蔽できる。まとまった処理でグローバルオブジェクトを汚したくない場合に使うといい。