JavaScriptスコープ徹底解説！7つのポイントで理解が深まる

はじめに
JavaScriptスコープとは
スコープの種類
- ○グローバルスコープ
- ○ローカルスコープ
スコープチェーンとは
使い方とサンプルコード
応用例とサンプルコード
- ○クロージャ
- ○IIFE（即時実行関数式）
注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptのスコープを理解し、使い方ができるようになります。

JavaScriptスコープとは

JavaScriptのスコープとは、変数や関数がどの範囲で参照・利用可能かを決める概念です。

スコープを理解することで、変数の扱い方やコードの効率を向上させることができます。

スコープの種類

JavaScriptには、主に2つのスコープがあります。

○グローバルスコープ

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

グローバル変数や関数がこのスコープに属します。

// グローバル変数
var globalVar = "Hello, World!";

○ローカルスコープ

ローカルスコープは、特定の関数やブロック内でのみアクセス可能な範囲です。

関数内で宣言された変数や関数がこのスコープに属します。

function myFunction() {
  // ローカル変数
  var localVar = "Hello, Local!";
}

スコープチェーンとは

スコープチェーンとは、現在のスコープから順に外側のスコープへと参照できる範囲のことです。

スコープチェーンを理解することで、変数の参照や書き換えがどのように行われるかを把握できます。

使い方とサンプルコード

下記では、スコープに関連するいくつかの使い方とサンプルコードを紹介します。

○変数のスコープ

グローバル変数は、どこからでもアクセス可能です。

var globalVar = "I am global!";

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

showGlobalVar(); // "I am global!"

ローカル変数は、宣言された関数内でのみアクセス可能です。

function showLocalVar() {
  var localVar = "I am local!";
  console.log(localVar);
}

showLocalVar(); // "I am local!"
console.log(localVar); // Uncaught ReferenceError: localVar is not defined

○関数のスコープ

関数もスコープの影響を受けます。

function outer() {
  function inner() {
    console.log("I am inner function!");
  }

  inner();
}

outer(); // "I am inner function!"
inner(); // Uncaught ReferenceError: inner is not defined

○ブロックスコープ

letやconstで宣言された変数は、ブロックスコープを持ちます。

if (true) {
  let blockVar = "I am block scoped!";
}

console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined

応用例とサンプルコード

下記では、スコープを利用した応用例とサンプルコードを紹介します。

○クロージャ

クロージャは、関数が外側のスコープにある変数を覚えておく仕組みです。

function makeCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const counter = makeCounter();
counter(); // 1
counter(); // 2

○IIFE（即時実行関数式）

IIFEは、関数を定義と同時に実行する方法で、変数のスコープを制限するのに役立ちます。

(function() {
  var localVar = "I am in an IIFE!";
  console.log(localVar);
})(); // "I am in an IIFE!"

console.log(localVar); // Uncaught ReferenceError: localVar is not defined

注意点と対処法

スコープに関連する注意点と対処法を下記に示します。

○変数の巻き上げ

JavaScriptでは、変数宣言がスコープの先頭に巻き上げられる現象があります。

この現象を変数の巻き上げ（hoisting）と呼びます。

巻き上げを理解することで、予期せぬバグを防ぐことができます。

function showVar() {
  console.log(myVar); // undefined
  var myVar = "Hello, World!";
}

showVar();

対処法

変数宣言をスコープの先頭に移動させるか、letやconstを使って宣言することで巻き上げを回避できます。

○グローバル変数の使いすぎ

グローバル変数は使いすぎると、コードの管理が難しくなります。

ローカル変数を適切に使用することで、この問題を回避できます。

// Bad: グローバル変数の使いすぎ
var globalVar1 = "A";
var globalVar2 = "B";

// Good: ローカル変数を適切に使用
function exampleFunction() {
  var localVar1 = "A";
  var localVar2 = "B";
}

○スコープを適切に使う

スコープを適切に使うことで、コードの可読性や保守性を向上させることができます。

関数やブロックを利用して、適切なスコープを作成しましょう。

// Bad: スコープが不適切
var myVar = "Hello, World!";

function badScopeExample() {
  myVar = "Hello, again!";
}

// Good: 適切なスコープ
function goodScopeExample() {
  var myVar = "Hello, World!";
}