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

JavaScriptにおける 変数は 、データの保存や処理に欠かせないものです。これらの変数がどこで有効で、コードのどの領域にアクセスできるのかを理解することが重要です。 グローバル 変数と ローカル 変数という異なるタイプの変数がある以上、「スコープ」（可視範囲）を理解することは基本です。それでは、グローバル変数とローカル変数がどのようなものなのか、詳しく見ていきましょう。

主な発見

• グローバル変数はコード内のどこにいてもアクセスできるが、ローカル変数はその関数の中でしか見えない。
• 関数の外で変数を定義するとグローバル変数になり、関数の中で定義するとローカル変数になる。
• コードの構造を明確にし、維持しやすくするためには、スクリプトの最初にグローバル変数を宣言するのが有利である。

ステップ・バイ・ステップの説明

変数の定義とその可視性

最初のステップでは、変数の作成方法とその可視性の意味について説明します。次の例のように、関数の外で変数を宣言すると、その変数はグローバルになります。

ここでは myVariable というグローバル変数を作成します。

ローカル変数を使った関数の作成

次に、2つの関数を作成します。1つの関数をlocalFunctionと呼び、その中にローカル変数を作成します。この変数は関数の中でしか見えません。関数を定義しましょう。

localFunctionの中で、値5を持つローカル変数localVを作成し、それを出力する。

関数の呼び出し

では、localFunctionを呼び出して数値5を出力したいと思います。コード内で関数を呼び出すと、出力はこのようになります：

ローカル変数の可視性のテスト

では、ローカル変数localVを別の関数で使ってみましょう。これがうまくいかないことに気づくだろう。otherFunctionを呼び出し、何が起こるか見てみましょう。

変数localVはlocalFunction内でしか見えないため、エラーが発生します。

コンソールでエラーをチェックする

なぜエラーが発生するのかをよりよく理解するために、コンソールでコードを調べてみよう。右クリックして "Examine "を選択すると、DOMエクスプローラーとコンソールが開き、エラーを分析することができる。

そこで、localVが未定義であることがわかります。これは、変数がその関数の外には存在しないという仮定を裏付けるものです。

グローバル変数の定義

それでは、両方の関数で使用できるグローバル変数を作成しましょう。この変数をglobaleVariableと呼び、単純なテキスト値を与えます。

これで、このグローバル変数は両方の関数で呼び出すことができ、出力は同じになります。これを一度テストしてみよう。

変数の定義と呼び出し順序

変数と関数の定義の順番は非常に重要であることに注意する必要がある。グローバル変数をその用途よりも下に作ると、未定義の問題につながります。

なぜなら、そのグローバル変数を必要とする関数は、その定義よりも先にそのグローバル変数を呼び出してしまうからです。これを避けるためには、グローバル変数をコードの先頭で定義することが望ましい。

ローカル変数とその使い方

次に、別の関数に別のローカル変数を作成します。ここではlocalVariableと呼び、その値を12に設定する。

このローカル変数も使うことができますが、それはそのローカル変数自身の関数の中だけで、他の関数の中では使えません。両方のローカル変数を使えば、プログラムの複雑さにもよりますが、忍耐と秩序が保たれます。

概念のまとめ

これで、JavaScript における変数の可視性とスコープに関する基本的な概念を理解したことでしょう。グローバル変数はすべての関数から見えますが、ローカル変数はその関数の中にしか存在しません。可読性と保守性を向上させるために、コードの中心的な場所でグローバル変数を定義することをお勧めします。

まとめ - JavaScriptにおける変数の可視性

まとめると、変数の定義方法が変数の可視性とスコープに直接影響することを学びました。間違いを避けるために、変数を置く場所には常に注意を払ってください。