JavaScript グローバル変数 解説
JavaScriptにおけるグローバル変数の定義と関数
JavaScriptでは、変数を関数内に定義すると、その変数は関数スコープを持ちます。つまり、その変数は関数内でのみアクセス可能となります。しかし、グローバルスコープを持つ変数を定義することもできます。
グローバル変数の定義方法
関数外での宣言
var globalVariable = "This is a global variable";
この方法で宣言された変数は、スクリプトのどこからでもアクセスできます。
関数内でwindowオブジェクトを使用
function myFunction() { window.globalVariable = "This is also a global variable"; }
window
オブジェクトはブラウザのグローバルオブジェクトであり、それにプロパティとして変数を追加することで、グローバル変数を定義することができます。
グローバル変数の注意点
- 名前の衝突
グローバル変数と他の変数との名前が衝突する可能性があります。衝突を避けるために、わかりやすい名前を使用しましょう。 - グローバル変数の過剰使用
グローバル変数を過度に使用すると、コードの可読性や保守性が低下する可能性があります。変数のスコープを適切に管理し、必要に応じて関数スコープを使用しましょう。
例
var globalName = "John";
function greet() {
var localName = "Doe";
console.log("Hello, " + globalName + " " + localName);
}
greet(); // Output: Hello, John Doe
console.log(globalName); // Output: John
var globalName = "John";
function greet() {
var localName = "Doe";
console.log("Hello, " + globalName + " " + localName);
}
greet(); // Output: Hello, John Doe
console.log(globalName); // Output: John
var globalName = "John";
function greet() {
var localName = "Doe";
console.log("Hello, " + globalName + " " + localName);
}
greet(); // Output: Hello, John Doe
console.log(globalName); // Output: John
グローバル変数の過剰使用を避けるために、以下のような代替方法が考えられます。
クラス
class MyClass { static globalVariable = "This is a global variable"; } console.log(MyClass.globalVariable);
クラスの静的プロパティを使用することで、グローバル変数のような役割を果たすことができます。
モジュールシステム
- ES6モジュール
// module.js export const globalVariable = "This is a global variable"; // main.js import { globalVariable } from './module.js'; console.log(globalVariable);
モジュールシステムを使用することで、コードを複数のファイルに分割し、グローバル変数のスコープを制限することができます。
- ES6モジュール
javascript function variables