グローバルスコープとローカルスコープ | 変数のスコープ | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

スコープとは？

スコープとは、変数が有効である範囲を指します。JavaScriptには、主に2つのスコープがあります。それがグローバルスコープとローカルスコープです。それぞれのスコープの特性を理解することで、変数の衝突や予期しないバグを防ぐことができます。

グローバルスコープとは？

グローバルスコープとは、プログラム全体で有効な変数のスコープです。グローバルスコープで宣言された変数は、すべての関数やブロックの外側で使用できるため、プログラムのどこからでもアクセス可能です。

例として、以下のコードを見てみましょう。

let globalVar = "グローバル変数";

function displayVar() {
    console.log(globalVar); // "グローバル変数"が表示される
}

displayVar();

この例では、globalVarはグローバルスコープで宣言されており、displayVar()関数内でもアクセスできます。

ローカルスコープとは？

ローカルスコープは、特定の関数やブロック内でのみ有効な変数のスコープです。関数内やブロック内で宣言された変数は、その関数やブロックの外ではアクセスできません。

次の例を見てください。

function localScopeExample() {
    let localVar = "ローカル変数";
    console.log(localVar); // "ローカル変数"が表示される
}

localScopeExample();
// console.log(localVar); // エラー：localVarは未定義

ここでは、localVarはlocalScopeExample()関数内で宣言されたローカル変数であり、その関数の外ではアクセスできません。

グローバルスコープとローカルスコープの違い

グローバルスコープとローカルスコープの違いを、以下の表で簡単にまとめました。

スコープの種類 有効範囲 使用例
グローバルスコープ プログラム全体 関数やブロック外で宣言された変数
ローカルスコープ 関数またはブロック内 関数やブロック内で宣言された変数

プログラムの解説

<script>
let globalVar = "グローバル変数";

function displayVar() {
    console.log(globalVar); // "グローバル変数"が表示される
}

displayVar();

function localScopeExample() {
    let localVar = "ローカル変数";
    console.log(localVar); // "ローカル変数"が表示される
}

localScopeExample();
// console.log(localVar); // エラー：localVarは未定義
</script>

このコードでは、globalVarはグローバルスコープで宣言された変数であり、関数内でもアクセス可能です。一方、localVarは関数内でのみ有効なローカル変数で、関数の外からアクセスしようとするとエラーになります。

スコープの使い分け

変数のスコープは、適切に使い分けることでバグを防ぎ、コードの可読性を高めることができます。以下に、グローバルスコープとローカルスコープを使い分ける際のポイントを挙げます。

  • グローバル変数はできるだけ避ける: グローバル変数が多すぎると、意図せずに変数が上書きされる可能性が高くなります。グローバルスコープで宣言する変数は必要最小限にしましょう。
  • ローカル変数を積極的に使用: ローカル変数はその関数やブロック内でのみ使用されるため、他の部分に影響を与えることなく、安全に使用できます。
  • 命名に注意: グローバル変数とローカル変数の名前が重複しないように注意しましょう。同じ名前を使用すると、思わぬバグを引き起こす可能性があります。

まとめ

JavaScriptでは、グローバルスコープとローカルスコープの2つのスコープを使い分けることで、変数の有効範囲を制御します。グローバル変数はプログラム全体で使用できる一方、ローカル変数は関数やブロック内でのみ有効です。適切なスコープ管理を行うことで、コードの保守性が向上し、予期しないエラーの発生を防ぐことができます。

スポンサーリンク