外部ファイルの関数を実行する:グローバル変数、関数と即時関数[JavaScript]

0

別ファイルに定義した関数を呼び出すのはJavaScriptなら簡単です。
基本的に、関数外に書かれた、関数や変数の定義のスコープがグローバルになっているからです。
逆に、グローバルな変数をコントロールするために、即時関数を使用したりします。

グローバルな変数・関数を定義する

こちらは、まずは何も考えずに、関数の外にある変数や関数は、グローバルなものとして、どこからでもアクセス可能です。

<script type="text/javascript">

var testMessage = 'test message';   // global
function testFunction() {           // global
    console.log('test function message');
    var localMessage = 'local message';    // local
}

console.log(localMessage);    // localMessage is not defined
</script>

上記の変数localMessageは関数の内側で定義されているため、関数の中でしか使用できません。
そのほかは、グローバルに定義されるので、同時に読み込まれているほかのJavaScriptファイルなどでも、使用可能です。
プログラムに慣れている方なら問題ありませんが、注意点としては、変数や関数を使用する、前に定義してあることです。
読み込まれた順に解決されていくので、ファイル内等で使用する前に定義されている必要があります。

グローバルな変数・関数を定義したくない場合

複数人で作業している場合や、外部ライブラリ等を多用している場合など、重複を避けるためにグローバルに定義を残したくない場合があります。
その場合は、即時関数などを使用して疑似的にローカルに定義して対応したりします。

グローバルにしたくない場合

(function(){
    var testMessage = 'test message';    // local
    function testFunction() {
        console.log('test function message');    // local
        var localMessage = 'local message';      // local
    }
})();

console.log(testMessage);    // not defined
testFunction();    // not defined

 

即時関数内からグローバルに定義したい場合

(function(){
    testMessage = 'test message';    // global
    testFunction = function() {
        console.log('test function message');    // global
        var localMessage = 'local message';      // local
    }
})();

console.log(testMessage);    // test message
testFunction();    // test function message

上記を解説すると、変数の定義であるvarを省いて記載しています。
varを省くことで、windowオブジェクトのプロパティとして定義されるからです。
明示的に下記のように記述することもできます。

(function(){
    window.testMessage = 'test message';    // global
    window.testFunction = function() {
        console.log('test function message');    // global
        var localMessage = 'local message';      // local
    }
})();

console.log(testMessage);    // test message
testFunction();    // test function message

windowはブラウザの各画面ごと(タブごと)に設定されている、グローバル変数になります。
詳細はこちら
開発者向けのウェブ技術 Web API Window

まとめ

変数のスコープに関する話題になります。スコープを理解して、グローバル汚染の少ないコードを心がけると「理解しているな」と思ってもらえます。
ここからさらに、コンストラクタやプロトタイプなど理解していくと、変数や関数の扱いに長けたエンジニアといえると思います。
そのあたりも今後紹介できたらと思います。
関連記事で、下記ぜひもご覧ください。
jQuery.fn のfnってどういう意味? $.fnの使い方[jQuery]

jQueryおすすめの書籍

jQueryの書籍は、古いものが多いです。ただ、jQuery自体は今も進化しています。
公式を見るのが一番良いかもしれません。
jQuery公式

jQuery最高の教科書
基本から応用まで。

LINEで送る