ブロックスコープと関数スコープ | 変数のスコープ | JavaScript 超完全入門 基本から発展までのすべて

スコープとは？

スコープとは、変数が有効な範囲を指します。JavaScriptには主にブロックスコープと関数スコープの2つのスコープがあります。スコープを理解することで、変数の適切な管理や意図しないエラーの回避が可能になります。

ブロックスコープとは？

ブロックスコープは、変数が{}で囲まれたブロック内でのみ有効となるスコープです。letとconstで宣言された変数は、ブロックスコープを持ち、ブロック外からはアクセスできません。

以下のコード例を見てください。

if (true) {
    let blockScopedVar = "ブロックスコープの変数";
    console.log(blockScopedVar); // "ブロックスコープの変数"が表示される
}

// console.log(blockScopedVar); // エラー：blockScopedVarは定義されていない

この例では、blockScopedVarはifブロック内で宣言された変数であり、ブロックの外ではアクセスできません。

関数スコープとは？

関数スコープは、関数内で宣言された変数がその関数内でのみ有効となるスコープです。varで宣言された変数は関数スコープを持ち、関数外からはアクセスできません。

次のコード例を見てみましょう。

function functionScopeExample() {
    var functionScopedVar = "関数スコープの変数";
    console.log(functionScopedVar); // "関数スコープの変数"が表示される
}

functionScopeExample();
// console.log(functionScopedVar); // エラー：functionScopedVarは定義されていない

ここでは、functionScopedVarは関数内で宣言されたため、その関数の外ではアクセスできません。

ブロックスコープと関数スコープの違い

ブロックスコープと関数スコープの違いを表でまとめました。

プログラムの解説

<script>
// ブロックスコープの例
if (true) {
    let blockScopedVar = "ブロックスコープの変数";
    console.log(blockScopedVar); // "ブロックスコープの変数"が表示される
}
// console.log(blockScopedVar); // エラー：blockScopedVarは定義されていない

// 関数スコープの例
function functionScopeExample() {
    var functionScopedVar = "関数スコープの変数";
    console.log(functionScopedVar); // "関数スコープの変数"が表示される
}

functionScopeExample();
// console.log(functionScopedVar); // エラー：functionScopedVarは定義されていない
</script>

このコードでは、ブロックスコープの例としてifブロック内でletを使って変数を宣言しています。この変数はブロックの外では参照できません。また、関数スコープの例としてvarで宣言した変数は、関数内でのみ有効です。

スコープの使い分け

適切なスコープを使い分けることで、変数の衝突や予期せぬエラーを防ぐことができます。以下は、スコープの使い分けに関するポイントです。

• ブロックスコープ: ブロックスコープは、ループや条件分岐など、特定のブロック内でしか使用しない変数に適しています。
• 関数スコープ: 関数内で処理されるデータを保持するために関数スコープを使います。varの使用は避け、代わりにletやconstを使用することが推奨されます。

まとめ

JavaScriptでは、letやconstで宣言された変数はブロックスコープを持ち、varで宣言された変数は関数スコープを持ちます。適切にスコープを使い分けることで、予期しない変数の上書きやバグを防ぎ、コードの可読性や保守性を向上させることができます。