JavaScriptで変数名に使えない意外な3つの名前【要注意】

最近知った豆知識。

JavaScriptでは以下の3つは変数名に使えません。

  • top
  • history
  • document

これらは 予約語 という訳でもないです。

でも使うと予期しない動作・出力になります。

使えないことにビックリしたので、
ここでは使えない理由とかコード例とかまとめました。

1."top" は変数名として使えない

変数名に top という名前は使用不可

これは以外すぎてびっくりしました。

こんな一般的な名前が使えないと思わなかったので。

▼ 実際に遭遇したコード例

▼ こんなコンソール出力に・・・

適当な要素があって、その左座標と上座標を取得してるコード。

なぜか top  だけ異質な内容になってますね。

 

その理由ですが、実は top  って定義済みだからです。

▼ MDNではこう説明されていた

ウィンドウ階層における最上位のウィンドウへの参照を返します。

window.parent プロパティは、現在のウィンドウの直近の親を返しますが、window.top は、ウィンドウオブジェクトの階層における最上位のウィンドウを返します。

引用元 : https://developer.mozilla.org/ja/docs/Web/API/Window/top

※ この説明の parent  は変数名として使用可能

厄介なのは、値代入自体は問題ありません。

コンソールにも謎の値が表示されるだけで 気づきにくいです。

その上 top  とか短い名前で変数につけやすいのも厄介なとこです。

2."history" も変数名として使えない

これも使えそうで使えない変数名

実は history も変数名につけるのはNGです。

先ほどの top と同じく、何回かハマったことがあります。

▼ 実際に遭遇したコード例

▼ コンソール出力結果

 

まあ history  という名前から分かるように・・・

これはブラウザ履歴を記録する予約済みオブジェです。

▼ MDNでの window.history の説明

読み取り専用プロパティWindow.historyは、Historyオブジェクトへの参照を返します。Historyはブラウザのセッション(今開いているタブやそのページが読み込まれているウィンドウで過去に訪れたページの履歴)を操作するインターフェースを提供します。

引用元 : https://developer.mozilla.org/en-US/docs/Web/API/Window/history

読込専用なので変数名には使えません。

変数名に使わないように気を付けたいですね。

3."document" も変数名としては使えない

それから最後に。

実は document も変数名に使えない名前

場合によっては変数名にしたいこともあるかも

でも当然ながら使えません。

▼ ダメなコード例

▼ コンソール出力結果

なんかHTMLがずらりと表示されます、、、

 

実はこれも読み込み専用のプロパティなんですよね。

▼ MDNでの window.document の解説

window に含まれる document への参照を返します。

引用元 : https://developer.mozilla.org/ja/docs/Web/API/Window/document

平ったく言えば、DOMツリーの開始地点になるオブジェクトです。

この変数名も使わないように注意しましょう。

JavaScriptで使えない変数名のまとめ

JavaScriptで使えない変数名はこの3つ!

もし「これも使えないよ」という変数名があれば コメント欄 で教えてください。

以上、JSで使えない変数名でした。ではまた。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください