W3CにDOMエレメントのidがグローバル変数になる仕様があるそうです。
つまり、
<div id="hoge"></div>
とした場合に
window.hoge === document.getElementById("hoge")
がtrueとなります。
そこまではいいとして、そのあとの挙動が他のブラウザとSafariで異なりました。
もう一度
<div id="hoge"></div>
のとき、
const hoge = "yeah!";
console.log(hoge);
Chrome, FireFox等は "yeah!" と表示できますが、
Safariではconstで二重宣言した場合と同じエラーが出ます。
仕様にないからなのか、Safariのバグなのか…?
これを知って迂闊にidを命名できなくなりました…
追記 (2019/06/21)
Safari が修正してくれました
仕様にないからなのか、Safariのバグなのか…?
どうやらバグだったようです
idと同名の変数を宣言してもエラーは出なくなりました
例えば、
const hoge = 1
console.log(hoge)
としてもエラーは出ず、
1
ちゃんと返ってきます
余談
ではこうしてみましょう
console.log(hoge)
const hoge = 1
console.log(hoge)
Uncaught ReferenceError: Cannot access 'hoge' before initialization
不思議なことに、ちゃんとエラーが出ます ( Safari, Chrome, Firefox ともに同じ挙動です )
同名の変数が宣言されているプログラム内では明示的に window.hoge
としないと呼び出せなくなるようです
( 苦し紛れの対応に見えます……? )
さらに余談
windowオブジェクトのプロパティ群を探していたのですが、hogeは見当たりません
直下にないなら __proto__? prototype? document下? などと探してみても見当たりません
一体どこに格納されているのでしょう…?