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

JavaScriptの変数スコープとは?グローバル変数とローカル変数の違いを解説

変数のスコープとは

変数のスコープ(scope)とは、プログラムの中でその変数が定義され、参照できる範囲のことを指します。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」、関数内のローカル変数「myVar」に「local」という値を代入しています。checkscope()関数を実行すると、関数内ではローカル変数が優先されるため、画面には「local」と表示されます。

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

なお、ES6(ES2015)以降では、letやconstで宣言した変数には「ブロックスコープ」が適用されます。これは波括弧({})で囲まれたブロック内でのみ有効となるスコープで、varの関数スコープとは挙動が異なります。現代のJavaScriptでは、意図しないスコープの問題を避けるため、letやconstの使用が推奨されています。

  1. JavaScript DOMとは？基本の仕組みと要素の取得方法をわかりやすく解説

    JavaScriptのDOM（Document Object Model：ドキュメントオブジェクトモデル）は、Webページ上のHTML要素を表現する仕組みです。DOMはインターフェースとして機能し、ページのコンテンツやスタイルを変更することで、Webページを自由に操作できるようにします。 DOMにアクセスするには、Webページ上で右クリックして「検証（Inspect）」を選択します。すると画面の右側または左側にパネルが表示され、現在閲覧しているページのHTML要素を確認できます。要素にマウスカーソルを合わせると、ページ上の該当部分がハイライトされるため、どの要素がページのどのセクションに対応

  2. Pythonのグローバル変数とローカル変数の違いとは？わかりやすく解説

    Pythonにおいて、グローバル変数とはプログラム全体（モジュール内のどこからでも）アクセスできる変数のことです。一方、ローカル変数は特定のスコープ内、たとえば関数定義の中でのみアクセスできる変数であり、関数内で一時的に使用される変数などがこれに該当します。コード例以下のコードを見てみましょう。q = I love coffee # グローバル変数 def f(): p = Me Tarzan, You Jane. # ローカル変数 print(p) f() print(q)実行結果このコードを実行すると、次のような出力が得られます。Me Tarzan, You Jan