javascript グローバル変数の値がundefinedになる
- 2021.03.22
- javascript
- javascript
javascriptで、グローバル変数の値がundefinedになる原因と対処法を掲載してます。ブラウザはchromeを使用しています。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 89.0.4389.90
グローバル変数の値がundefined
以下のコードの場合は、グローバル変数「hoge」は「undefined」となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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);」実行前に「b」が宣言されていることになるため「undefined」となります。
|
1 2 3 4 5 6 7 8 9 10 |
var hoge = "a"; // グローバル変数「hoge」 btn.onclick = () => { var b; console.log(hoge); // undefined var hoge = "b"; } |
対処法
「console.log(hoge);」に「b」を表示したい場合は、
|
1 2 3 4 5 6 7 8 9 |
var hoge = "a"; // グローバル変数 btn.onclick = () => { var hoge = "b"; // ローカル変数 console.log(hoge); // b } |
とします。「a」を表示したい場合は、
|
1 2 3 4 5 6 7 |
var hoge = "a"; //グローバル変数 btn.onclick = () => { console.log(hoge); // a } |
とします。
-
前の記事
javascript metaKeyプロパティでmacのcommandキーが押されているかを判定する 2021.03.22
-
次の記事
python EXCELのセルの幅を指定する 2021.03.22