JavaScriptのグローバル変数未定義エラーの回避方法
はじめに
JavaScriptでは、未定義のグローバル変数へのアクセスでエラーを出力します。ここでは、エラーを回避して、未定義を判定する方法を考えます。
失敗例
下記のコード例では、グローバル変数の未定義エラーで失敗します。
if (a) {
console.log('OK');
} else {
console.log('NG');
}
// Uncaught ReferenceError: a is not defined
undefinedと比較if (a !== undefined) {
console.log('OK');
} else {
console.log('NG');
}
// Uncaught ReferenceError: a is not defined
※a = undefined;
を事前に設定した場合、意図した動作となる。
その場合、根本的に未定義ではなくなる。
回避策
window.property
if (window.a) {
console.log('OK');
} else {
console.log('NG');
}
※変数が「undefined
」「null
」「false
」「0
」「""
」の場合、誤判定する。
完全ではないがほとんどの場合、「window.a
」「!window.a
」でこと足りる。
※window
が存在しない環境の場合は、「window以外のグローバル変数」を参照
in window
if ('a' in window) {
console.log('OK');
} else {
console.log('NG');
}
※window
が存在しない環境の場合は、「window以外のグローバル変数」を参照
typeof
if (typeof(a) !== 'undefined') {
console.log('OK');
} else {
console.log('NG');
}
※typeof(a) === void 0
では動作しない。
typeof(a)
は、undefined
のプリミティブ値ではなく、文字列を出力する。
try/catch
try {
a;
console.log('OK');
} catch (e) {
console.log('NG');
}
備考
window以外のグローバル変数
上記の例でグローバル変数にwindow
を使用しています。ですが、グローバル変数がwindow
でないことがあります。window
を使用せずにグローバル変数を取得する方法は、次の通りです。
var global = Function('return this')();
window自身の有無を判定する
var global = Function('return this')();
if ('window' in global) {
console.log('OK');
} else {
console.log('NG');
}
※スコープ内に意図しないwindow
変数がある場合、in global
が一番安全に判定できる。