NEW ARTICLE
C# 円マーク付きの文字列を生成する
  1. HOME
  2. javascript
  3. javascript グローバル変数の値がundefinedになる

javascript グローバル変数の値がundefinedになる

javascript グローバル変数の値がundefinedになる

javascriptで、グローバル変数の値がundefinedになる原因と対処法を掲載してます。ブラウザはchromeを使用しています。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 104.0.5112.81
Javascript サンプル集はこちら

グローバル変数の値がundefined

以下のコードの場合は、グローバル変数「hoge」は「undefined」となります。

<input id="btn" type="button" value="ボタン">

<script>

var hoge = "a"; // グローバル変数「hoge」

btn.onclick = () => {

  console.log(hoge); // undefined

  var hoge = "b"; // ローカル変数「hoge」

}

</script>
アロー関数の使い方

原因

「javascript」では「ホイスティング」と呼ばれ「console.log(hoge);」実行前に「var b;」が宣言されていることになるため「undefined」となります。

var hoge = "a"; // グローバル変数「hoge」

btn.onclick = () => {

　var b;

  console.log(hoge); // undefined

  var hoge = "b";

}

対処法

「console.log(hoge);」に「b」を表示したい場合は、

var hoge = "a"; // グローバル変数

btn.onclick = () => {

  var hoge = "b"; // ローカル変数

  console.log(hoge); // b

}

とします。「a」を表示したい場合は、

var hoge = "a"; //グローバル変数

btn.onclick = () => {  

  console.log(hoge); // a

}

とします。