フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【JavaScript】知ってた? 変数にvar付けないとグローバルスコープになるって!!

スポンサーリンク

スポンサーリンク

リーダブルコード読んでて結構衝撃的だったので記事にしました。

サンプルコードも書いて実際に動きを確認したので知らなかった人はぜひ覚えてください。

 

 

変数にvar付けないとグローバルスコープになる

まあ、タイトルのままです。

 

変数宣言するのにvar付けない事はないので知らなかったですが、var付けなくてもエラーにならないのでミスでvarを付けないばかりに知らず知らずグローバルスコープになってしまいます。

 

ちなみに最近だとvarではなくlet, constを使うのがいいでしょう。

Qiitaに良い記事があるので参考までに。(変数の巻き上げもあります)

https://qiita.com/wannabe/items/b2a0d63fc786eab13c48

 

サンプルコード

ということでサンプルコードでvarを付けない場合、グローバルスコープになるか確認してみます。

 

gistfa428d5875ad80df2cc64eaec1a4bb06

 

6行目の初期化'i=0'にvarを付けてないのでグローバルスコープになるため15行目で参照できます。

 

動作確認

それでは早速ブラウザで見てみると、このようにalertに10と表示されますね。

f:id:ksakae1216:20190326094354p:plain


 

次に、6行目を'var i=0'に修正して実行すると・・・

f:id:ksakae1216:20190326094907p:plain


15行目で'i'が未定義だと怒られました。

 

javascriptは手軽に書けますが、こうゆうところがふわっとしてるので大きめのプログラムでバグが出たりすると結構苦労した経験があります。

 

変数にはvarあるいは、let, constを付けましょう。

あと、これ以外にもプログラム書く上で参考になることがたくさんあるのでリーダブルコードを読むのはおすすめですよ。

※40過ぎて初めて読みますが結構勉強になります。