JavaScriptの関数内でグローバル変数を定義する方法を解説

JavaScriptでは、関数の外側（グローバルスコープ）で宣言された変数は、プログラム全体からアクセスできる「グローバル変数」となります。本記事では、グローバル変数を定義する主な2つの方法をわかりやすく解説します。

方法1：グローバルスコープでvarを使って宣言する

最も基本的な方法は、関数の外側、つまりグローバルスコープでvarキーワードを使用して変数を宣言することです。こうして宣言された変数は、どの関数からでも参照・更新が可能になります。

<script>
    var myGlobalVariable; // グローバル変数として宣言

    function display() {
        // この関数内でも myGlobalVariable を使用できる
    }
</script>

この例では、myGlobalVariableはスクリプト全体で共有されるため、display()関数の中でも自由に値を読み書きできます。

方法2：windowオブジェクトにプロパティとして代入する

もう1つの方法は、関数内でwindowオブジェクトにプロパティとして代入するやり方です。ブラウザ環境において、windowオブジェクトはグローバルオブジェクトそのものであるため、ここに代入した値は自動的にグローバル変数として扱われます。

<script>
    function display() {
        window.myGlobalVariable = "Hello"; // グローバル変数として定義
    }

    display();
    console.log(myGlobalVariable); // "Hello" と表示される
</script>

この方法なら、関数の実行時に初めてグローバル変数が作成されます。関数が呼び出される前には変数が存在しない点に注意してください。

注意点：letやconstとの違い

letやconstをグローバルスコープで宣言した場合、それらはグローバル変数として機能しますが、windowオブジェクトのプロパティにはなりません。一方、varで宣言した変数やwindowへの直接代入は、windowオブジェクトのプロパティとして登録されます。

また、グローバル変数はどこからでも変更できてしまうため、意図しないバグの原因になることがあります。実際の開発では、必要最小限にとどめ、可能であればローカル変数やモジュールスコープの活用を検討しましょう。