【JavaScript】ブラウザの開発ツールで関数外部の変数を参照できないのはどうして？

更新日：2023/08/09

ブラウザの開発ツールでスクリプトをデバックしているとき、関数外部の変数を参照しようと思ったらできませんでした。
JavaScriptの仕様では参照できるはずなのに、どうしてできないのでしょうか。

再現コード

次のコードを使って、問題を再現してみます。

(()=>{
  const a = 1;

  const func = ()=>{
    // 何らかの処理
    return 1;
  }
  func();
})();

ここで、func1の内部コードにブレークポイントをセットして、コードを実行します。
ブレークポイントで停止したら、関数外部の変数aの値を参照します。

Google Chromeは、Uncaught ReferenceError: a is not defined と表示されました。

変数aが定義されていないようです。
定義しているはずなのに、おかしいですね。

Firefoxは、Uncaught Error: variable 'a' has been optimized out と表示されました。

翻訳すると、「変数aは最適化されています」という意味になります。
どういう意味でしょうか。

理由と対処法

JavaScriptの仕様上は、変数を関数内部で探して、存在しなかったら関数外部で探します。
この流れからすると、関数外部の変数aは問題なく参照できます。

ここで少し話を広げます。
変数の検索で外部で探せなかった、さらに外部に探しに行きます。
そこになかったら、また外部を探し、最終的に最上位のオブジェクトまで到達して、そこに無かったらundefindを返します。

このとき、関数内で使用している外部変数のみを検索対象にできたら、効率的ですね。
実際のところ、JavaScript側はコードを読み込んだ時に使用している変数を把握できます。
そこで、ムダな検索を避けるような最適化をおこなっています。

しかしデバッグも、この最適化の影響を受けます。
そのため、関数内部で使用していない外部変数を検索できない状況になっているのです。

対処法は、変数をコンソール出力するなどして関数内で使用することです。
ブレークポイントで停止させる必要がなくなりますが…

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。