JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの変数スコープはどのように機能するのか?基本をわかりやすく解説

変数スコープとは

変数のスコープとは、プログラム内でその変数が定義され、参照できる範囲のことです。JavaScriptの変数には、大きく分けて2種類のスコープが存在します。

グローバル変数

グローバル変数はグローバルスコープを持ちます。つまり、JavaScriptコード内のどこからでも定義・参照できる変数です。関数の外で宣言された変数は、自動的にグローバル変数となります。

ローカル変数

ローカル変数は、定義された関数の内部でのみ有効です。関数の外から参照することはできません。また、関数の引数(パラメータ)も常にその関数にローカルな変数として扱われます。

関数内での変数の優先順位

関数の内部では、同じ名前を持つローカル変数がグローバル変数よりも優先されます。グローバル変数と同じ名前のローカル変数や関数の引数を宣言すると、グローバル変数は実質的に隠蔽されます。この現象は「シャドーイング(変数の隠蔽)」と呼ばれます。

それでは、JavaScriptにおける変数スコープの動作を、具体的なコードで確認してみましょう。

実行例

<html>
   <body onload = checkscope();>
      <script>
         <!--
            var myVar = "global"; // グローバル変数を宣言
            function checkscope( ) {
               var myVar = "local"; // ローカル変数を宣言
               document.write(myVar);
            }
         //-->
      </script>
   </body>
</html>

このコードでは、まずグローバル変数 myVar"global" を代入しています。その後、checkscope 関数内で同じ名前のローカル変数 myVar"local" を代入しています。関数が実行されると、document.write(myVar) はローカル変数の値である "local" を出力します。これは、関数内ではローカル変数が優先されるためです。

補足:let・constによるブロックスコープ

なお、現代のJavaScript(ES6以降)では var 以外に letconst を使った変数宣言が推奨されています。letconst で宣言された変数はブロックスコープ{ } で囲まれた範囲)を持ち、if文やfor文の中でも独立したスコープが生成されるため、より直感的で安全な変数管理が可能になります。新しくコードを書く際は、特別な理由がない限り let または const の使用を心がけるとよいでしょう。

  1. 【JavaScript】変数が配列かどうか判定する3つの方法(isArray・instanceof・constructor)

    JavaScriptでは、ある変数が配列(Array)であるかどうかを判定したい場面はよくあります。本記事では、代表的な3つの判定方法を、サンプルコードと出力結果付きでわかりやすく解説します。 1)Array.isArray() メソッド Array.isArray() メソッドは、引数として渡された変数が配列かどうかをチェックします。変数が配列であれば true を返し、そうでなければ false を返します。ES5以降で利用できる標準メソッドであり、現在最も推奨されている判定方法です。 構文 Array.isArray(variableName) 例 <html> <

  2. JavaScriptはブロックスコープ(block scope)に対応している?let・const・varの違いを実例付きで解説

    JavaScriptとブロックスコープの関係 JavaScriptでは、let または const キーワードを使って宣言された変数に対してのみ、ブロックスコープが適用されます。 一方で、var キーワードで宣言された変数は関数スコープには従いますが、ブロックスコープには従いません。つまり、波括弧 { } で囲まれたブロックの中で var を使って変数を宣言しても、その変数はブロックの外側からでもアクセスできてしまいます。 let・const と var のスコープの違い let / const: ブロック単位でスコープが生成されるため、ブロックの外部からは参照できません。 var: 関数