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

JavaScriptスコープのイメージ図JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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

○ブロックスコープ

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

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();

対処法

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

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

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

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

// 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!";
}

まとめ

この記事では、JavaScriptのスコープについて、基本概念から使い方、応用例、注意点まで詳しく解説しました。

スコープを理解し、適切に使うことで、コードの品質を向上させることができます。

JavaScriptを学ぶ上で、スコープは非常に重要な概念ですので、ぜひ理解を深めてください。