[JavaScript] window.を省略してはいけない場面に注意しよう

windowオブジェクト

ブラウザでJavaScriptを実行する場合、windowがグローバルオブジェクトとして存在します。

みなさんご存知のとおり、windowオブジェクトのプロパティにアクセスする際の window. は省略できます。

// OK
window.alert('Hello world')
// 省略してもOK
alert('Hello world')

しかし、省略してはいけない場面があります。

省略してはいけない場面

省略してはいけない場面、それはプロパティの存在チェック時です。

一部ブラウザにしか実装されていない実験的な機能を使う場面や、古いブラウザに対応させるために、windowオブジェクトにその実装が存在するかチェックするコードを書くことがあると思います。

このとき、window.を省略してしまうと思わぬエラーに遭遇します。

省略時に発生するエラー

windowオブジェクトにチェック対象のプロパティが存在しない場合、ReferenceErrorとなってしまいます。

これは、宣言していない変数への参照とみなされてしまうためです。

// ====== NG! ======
// window.xxxxが存在するかチェックする意図だけど…
// 宣言していない変数を参照してしまい、ReferenceErrorとなる
if (xxxx) {
   xxxx()
}

// ====== OK! ======
// windowオブジェクトのプロパティの存在チェック時には明示的にwindow.を付与する必要がある
// windowオブジェクトにxxxxプロパティが存在しなくてもundefinedが返り、エラーにはならない
if (window.xxxx) {
   xxxx()
}

これの厄介なところは、対象の機能の実装がないブラウザで確認しないと、この問題に気づけない点です。

やはり、クロスブラウザのテストが大事ですね…