最近知った豆知識。
JavaScriptでは以下の３つは変数名に使えません。
- top
- history
- document
これらは 予約語 という訳でもないです。
でも使うと予期しない動作・出力になります。
使えないことにビックリしたので、
ここでは使えない理由とかコード例とかまとめました。
１．"top" は変数名として使えない
変数名に top という名前は使用不可
これは以外すぎてびっくりしました。
こんな一般的な名前が使えないと思わなかったので。
▼ 実際に遭遇したコード例
|
1 2 3 4 5 6 |
var img = $('.example img'); var offset = img.offset(); var left = img.offset.left; var top = img.offset.top; console.log('left : ', left); console.log('top : ' + top); |
▼ こんなコンソール出力に・・・
|
1 2 |
left : 79.078125 top : Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} |
適当な要素があって、その左座標と上座標を取得してるコード。
なぜか top だけ異質な内容になってますね。
その理由ですが、実は top って定義済みだからです。
▼ MDNではこう説明されていた
ウィンドウ階層における最上位のウィンドウへの参照を返します。
window.parent プロパティは、現在のウィンドウの直近の親を返しますが、window.top は、ウィンドウオブジェクトの階層における最上位のウィンドウを返します。
引用元 ： https://developer.mozilla.org/ja/docs/Web/API/Window/top
※ この説明の parent は変数名として使用可能
厄介なのは、値代入自体は問題ありません。
コンソールにも謎の値が表示されるだけで 気づきにくいです。
その上 top とか短い名前で変数につけやすいのも厄介なとこです。
２．"history" も変数名として使えない
これも使えそうで使えない変数名
実は history も変数名につけるのはNGです。
先ほどの top と同じく、何回かハマったことがあります。
▼ 実際に遭遇したコード例
|
1 2 |
var history = 'hoge'; console.log('hisotry', history); |
▼ コンソール出力結果
|
1 |
History {length: 5, scrollRestoration: "auto", state: null} |
まあ history という名前から分かるように・・・
これはブラウザ履歴を記録する予約済みオブジェです。
▼ MDNでの window.history の説明
読み取り専用プロパティWindow.historyは、Historyオブジェクトへの参照を返します。Historyはブラウザのセッション(今開いているタブやそのページが読み込まれているウィンドウで過去に訪れたページの履歴)を操作するインターフェースを提供します。
引用元 ： https://developer.mozilla.org/en-US/docs/Web/API/Window/history
読込専用なので変数名には使えません。
変数名に使わないように気を付けたいですね。
３．"document" も変数名としては使えない
それから最後に。
実は document も変数名に使えない名前
場合によっては変数名にしたいこともあるかも
でも当然ながら使えません。
▼ ダメなコード例
|
1 2 3 4 5 |
var document = ` 吾輩は猫である。 名前はまだない `; console.log(document); |
▼ コンソール出力結果
|
1 2 3 4 5 6 |
#document <!doctype html> <html lang="ja"> <head>...</head> <body>...</body> </html> |
なんかHTMLがずらりと表示されます、、、
実はこれも読み込み専用のプロパティなんですよね。
▼ MDNでの window.document の解説
window に含まれる document への参照を返します。
引用元 ： https://developer.mozilla.org/ja/docs/Web/API/Window/document
平ったく言えば、DOMツリーの開始地点になるオブジェクトです。
この変数名も使わないように注意しましょう。
JavaScriptで使えない変数名のまとめ
JavaScriptで使えない変数名はこの３つ！
もし「これも使えないよ」という変数名があれば コメント欄 で教えてください。
以上、JSで使えない変数名でした。ではまた。
