iOSで変数未定義がundefinedでないことがある

JavaScriptで変数に値が入っているかどうかを調べたときに、iOSでだけundefinedでないことがあったので調べたことをメモ。

サンプルコード

変数を未定義の状態で設定して、if文で 変数名 === undefined のようにして値が入っているかどうかを調べる処理を行っていました。

HTML

<div id="hoge">id="hoge"の要素</div>
<div>
変数hoge: <span id="result"></span>
</div>

JavaScript

var hoge;
document.getElementById('result').innerText = hoge;
if(hoge === undefined) {
	alert('hogeは未定義です。');
}

iOS以外では#resultにundefinedと表示されalertも出ましたが、iOSだと[object HTMLDivElement]と表示されalertは出ませんでした。
デモページ

原因を色々と調べてみた結果、先ほどのデモにも入れていますが、変数名と同じid名がHTML上にあるとこのような状態になるようでした。
#resultに表示する内容をhoge.innerTextとしてみます。

JavaScript

var hoge;
document.getElementById('result').innerText = hoge.innerText;
if(hoge === undefined) {
	alert('hogeは未定義です。');
}

iOS以外だと何も表示されません(consoleにエラー表示)が、iOSだとid=”hoge”の要素が表示されました。
デモページ2

if文の判定内容を変更して、typeof()を使ってみます。

HTML

<div id="hoge">id="hoge"の要素</div>
<div>
変数hoge: <span id="result"></span>
</div>
<div>
typeof(hoge): <span id="result2"></span>
</div>

JavaScript

var hoge;
document.getElementById('result').innerText = hoge;
document.getElementById('result2').innerText = typeof(hoge);
if(typeof(hoge) == 'undefined') {
	alert('hogeは未定義です。');
}

iOS以外はundefinedが表示されますが、iOSではobjectと表示されました。
デモページ3
　

対応方法

HTML上のid名または変数名をかぶらないように変更すると、とりあえずは対応できそうでした。

HTML

<div id="fuga">id="fuga"の要素</div>
<div>
変数hoge: <span id="result"></span>
</div>

JavaScript

var hoge;
document.getElementById('result').innerText = hoge;
if(hoge === undefined) {
	alert('hogeは未定義です。');
}

デモページ4

もしくは、最初にundefinedなどで初期化することでも対応できました。

JavaScript

var hoge = undefined;
document.getElementById('result').innerText = hoge;
if(hoge === undefined) {
	alert('hogeは未定義です。');
}

デモページ5