定義済み定数で Uncaught ReferenceError: ** is not defined がでた理由

Question

下記のようなコードにおいて、不可解なエラーが発生しました。

「RBOXが未定義」というエラーです。

しかしながら、定数RBOXは最上位にて定義済みです。
数行上にある const el = 内で RBOX は正常に処理されています。

また、この処理自体はクリックごとに何十回と問題なく処理されていました。
それが、ある時エラーで止まってしまいました。

疑問なのはこのような
「偶発的な未定義エラーは起こり得るのか？」
ということです。

ご意見いただけると嬉しいです。

それと、このような予測できないエラーに対して対応する方法はあるでしょうか？
あらゆる場所で使っている定数のため、try-catchをどこに設定するべきか悩みます。

よろしくお願いします。

Comments

[maisumakun]

ソースコード全体をご提示いただけないでしょうか？

[yambejp]

ソースの流れでエラーがでるのではなく、手打ちしたらエラーということですか？ちょっと状況説明がたりないかも

[m.ts10806]

画像では手元で確認できませんのでご配慮願います。

[退会済みユーザー]

ご質問、ご提案ありがとうございます。
今回のエラーは、エラーメッセージの部分とは異なる場所が原因と判明しました。
（自己解決と投稿しました）
ソースコードなど必要な情報が不足していてお手数おかけしました。
新たに質問する際は、再現できるコードを記載したり、より詳細に報告できるようにいたします。

[m.ts10806]

質問は編集できます

Answer 1

原因が判明いたしました。
エラーが再現できる箇所を見つけたので調査してみたところ、

定数RBOX とは関係ない部分でした。
その後ろにある [data-name=${this.name}] が問題でした。

変数 this.name が「数字から始まる」場合に展開すると [data-name=1abcdefg] のようになります。
このような場合にエラーになることがわかりました。

解決策は ""で囲むという基礎的なことでした。[data-name="${this.name}"]

エラーメッセージが常に正しいとは限らない、その周辺も探ってみる
ということを今回の事例で学びました。

回答、修正依頼などありがとうございました。

Answer 2

JavaScript の定数（というかconst）は、例えばPHPの定数と違い、全体から参照できるわけでは有りません。
コンソールから直接入力で使える変数は、関数内以外で宣言されたものか、windowオブジェクト配下に有る変数になります。

「スコープチェーン」とかで調べてみてください。

【ブロック - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/block#block_scoping_rules_with_let_const_or_function_declaration_in_strict_mode

Comments

[退会済みユーザー]

回答ありがとうございます。
今回、殆どの場合大丈夫だけど、時折エラーが出るので悩まされていました。
しかし、原因がエラーメッセージとは異なる部分と判明しました。

[kei344]

質問文の画像から、コンソールでアクセスしているように見えたのでこう回答しましたが、とりあえず質問する際には問題が再現できるコードを提示してください。