【JavaScript】スコープとは何か？ブロックとの違い｜グローバルスコープとローカルスコープ

JavaScript

2024/6/30

記事内に広告が含まれていることがあります。

JavaScriptを使っていると必ず「スコープ」という言葉が出てきます。「スコープ」はとても大切でしかも便利なものです。

ここでは、「スコープ」とは何かや「グローバルスコープ」と「ローカルスコープ」の違い、関連する言葉である「ブロック」とは何かについて解説しています。

スコープとは何か？

スコープとは、プログラム内で変数が有効（アクセス可能）な範囲のことです。

スコープには次の4つの種類があります。

大きいくくりだと「グローバルスコープ」と「ローカルスコープ」の2つのくくりです。名称の違いはありますが、根本的にはどこで変数を定義したか？の違いです。

スコープの種類

グローバルスコープとは、プログラム全体でアクセス可能な範囲のことです。

使い方はとても簡単で、関数の外で定義します。

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

function showGlobalVar() {
  console.log(globalVar);
}

showGlobalVar();

ローカルスコープとは、関数の中でのみアクセス可能なスコープです。

関数の中で定義した変数を関数の外（スコープ外）で呼び出そうとすると存在しない状態となります。

関数スコープには次の２つがあります。

ローカルスコープの種類

関数スコープとは、関数内でのみアクセス可能なローカルスコープです。

関数の中で定義し、その関数の中（同じスコープ内）では使うことができます。

function localFunction() {
  let localVar = "関数スコープです！";
  console.log(localVar);
}

localFunction();

・出力結果： 関数スコープです！

一方、関数内で定義した変数を、関数の外（スコープ外）で呼び出そうとするとエラーになります。

function localFunction() {
  let localVar = "関数スコープです！";
  console.log(localVar);
}

console.log(localVar); //エラーになる

ReferenceError: localVar is not defined

ブロックスコープとは、ブロック（ {} ）内でのみアクセス可能なローカルスコープです。関数スコープよりも範囲が狭いものになます。

ブロックの中で定義し、そのブロックの中（同じスコープ内）では使うことができます。

if (true) {
  let blockVar = "ブロックスコープです！";
  console.log(blockVar); 
}

・出力結果： ブロックスコープです！

一方、ブロック内で定義した変数を、ブロックの外（スコープ外）で呼び出そうとするとエラーになります。

if (true) {
  let blockVar = "ブロックスコープです！";
  console.log(blockVar); 
}

console.log(blockVar); //エラーになる

ReferenceError: blockVar is not defined

スコープと密接に関係する要素に変数を定義する「let」「var」「const」があります。

それぞれの詳細は下記をご参考ください。