ぽんぽこ開発日記

主にHTML, CSS, JavaScriptなどフロントエンドの話を。目指せ脱初心者。

意外と曖昧なJavaScriptの変数スコープ

改めて、JavaScriptを書いていると「あれ?変数のスコープってどこまででしたっけ?」ってなることが多々ある。その都度確認してるんだけど、なぜか忘れてしまいがちなので一度こうやって整理がてら理解しておくべきだと思う訳でございます。

グローバル変数とローカル変数

JavaScript(というかほとんどのプログラミング言語)にはグローバル変数とローカル変数が存在します。グローバル変数というのはプログラム全域で利用できる変数で、ローカル変数は関数内でしか利用できない変数になります。グローバル変数・ローカル変数と、それぞれ設定の仕方がありますので、ちゃんと理解して使っていないと変数が上書きされてしまい意図しない結果を出してしまうこともありますので気をつけなければなりません。

グローバル変数の設定の仕方

<script>
     var a = 1111; ・・・①
     function test(){
          b = 4444; ・・・②
          return b;
     };
</script>
 

①のようにfunction()の外側で設定する変数をグローバル変数JavaScriptは認識します。またfunction()内であっても変数名の前に var がついていない場合もまたグローバル変数になります。グローバル変数を利用する際に気をつけておくべき点があります。別のファイルであろうともすべてのプログラム内でそのグローバル変数が利用可能になりますので、気づかずに変数を上書きしている場合があり得るので、接頭辞をつけるなりして一工夫施してから設定してあげる必要があります。ですので、よっぽどのことがない限りは、出来る限りグローバル変数を設定するのは極力さけるべきです。

ローカル変数の設定の仕方

<script>
     function test(){
          var b = 4444; ・・・①
          return b;
     };

     document.write(b); ・・・②
</script> 
 

次はローカル変数の設定方法です。ローカル変数はfunction()内にてvar 変数名といった形で変数を設定してあげることで利用可能になります。この場合、そのfunction()でしか利用ができないので、外から変数にアクセスしようとしてもエラーが生じてしまいます。(②でエラーが生じます。)

グローバル変数とローカル変数の名前を同じにした場合どうなるの?

<script>
     var color = "red";

     function test(){
          var color = "blue";
          return color;
     };

     console.log(test());
     console.log(color);
</script>
 

結果:
blue
red

グローバル変数 color に red という文字列を代入。次にtest関数を設定後、このtest関数内にローカル変数 color という変数を設定。中身は blue という文字列になっております。 出力される結果をみると 最初にtest関数の返り値であるblueが、次にグローバル変数 color の中身 red が出力されております。
つまり、test関数内のローカル変数 color はグローバル変数 color に汚染されずにきちんと別の変数として認識されていることを表しております。


以上がJavaScriptにおける変数のスコープです。特にグローバル関数を使おうとすると意図せず上書きされてしまったりしますし、使おうとすると「あれ?ローカル変数を汚染させないためにはどうするんだっけ?funciton()内のローカル変数は汚染されないんだっけ?」と曖昧になりがちだったので良い確認になりました。