JavaScript変数のスコープ解説

JavaScriptにおける変数のスコープについて

JavaScriptにおける変数のスコープは、その変数にアクセスできる範囲を指します。変数のスコープは、その変数が宣言された場所によって決まります。

グローバルスコープ

• 例
  
• アクセス範囲
  JavaScriptファイル全体およびそのファイルに含まれるすべての関数。
• 宣言場所
  JavaScriptファイルのトップレベルまたは<script>タグ内。

let globalVariable = "Hello, world!";

関数スコープ

• アクセス範囲
  その関数の内部およびその関数の内部で宣言されたネストされた関数。
• 宣言場所
  関数の内部。

function myFunction() {
  let functionScopeVariable = "This is a function-scoped variable.";
  console.log(functionScopeVariable);
}

ブロックスコープ (ES6以降)

• アクセス範囲
  そのブロックの内部。
• 宣言場所
  letまたはconstキーワードを使用してブロック (中括弧{}で囲まれたコードの範囲) の内部で宣言。

if (true) {
  let blockScopeVariable = "This is a block-scoped variable.";
  console.log(blockScopeVariable);
}

注意

• ネストされた関数内で宣言された変数は、外側の関数で宣言された同名の変数を隠蔽します。
• letおよびconstキーワードを使用して宣言された変数はブロックスコープを持ちます。
• varキーワードを使用して宣言された変数は関数スコープを持ちます。

• letおよびconstキーワードを使用すると、変数のスコープをより厳密に制御することができます。
• 変数のスコープは、その変数が宣言された場所によって決まります。
• JavaScriptの変数は、グローバルスコープ、関数スコープ、またはブロックスコープを持つことができます。

JavaScript変数のスコープ解説: コード例

グローバルスコープの例:

let globalVariable = "Hello, world!";

function myFunction() {
  console.log(globalVariable); // 出力: Hello, world!
}

myFunction();

• globalVariableはグローバルスコープで宣言されているため、関数myFunction内でもアクセスできます。

関数スコープの例:

function outerFunction() {
  let outerVariable = "Outer variable";

  function innerFunction() {
    let innerVariable = "Inner variable";
    console.log(outer   Variable); // 出力: Outer variable
    console.log(innerVariable); // 出力: Inner variable
  }

  innerFunction();
  console.log(outerVariable); // 出力: Outer variable
}

outerFunction();

• innerVariableはinnerFunctionの関数スコープで宣言されているため、innerFunction内でのみアクセスできます。

ブロックスコープの例:

if (true) {
  let blockScopeVariable = "Block-scoped variable";
  console.log(blockScopeVariable); // 出力: Block-scoped variable
}

// console.log(blockScopeVariable); // エラー: blockScopeVariableは未定義

• blockScopeVariableはブロックスコープで宣言されているため、そのブロック内でのみアクセスできます。ブロックの外からはアクセスできません。

varキーワードを使用した関数スコープの例:

function myFunction() {
  var functionScopeVariable = "Function-scoped variable";
  console.log(functionScopeVariable); // 出力: Function-scoped variable
}

myFunction();

letおよびconstキーワードを使用したブロックスコープの例:

for (let i = 0; i < 3; i++) {
  console.log(i); // 出力: 0, 1, 2
}

// console.log(i); // エラー: iは未定義

const pi = 3.14159;
// pi = 3.15; // エラー: piは再代入できません

• constキーワードを使用して宣言された変数は、再代入できません。

IIFE (Immediately Invoked Function Expression)

• 方法
  関数を定義し、すぐに呼び出す。
• 目的
  変数をローカルスコープに閉じ込める。

(function() {
  let privateVariable = "Private variable";
  console.log(privateVariable); // 出力: Private variable
})();

// console.log(privateVariable); // エラー: privateVariableは未定義

モジュールパターン

• 方法
  オブジェクトを返して公開する変数を定義する。
• 目的
  変数をプライベートスコープに閉じ込め、公開する必要がある変数を公開する。

const myModule = (function() {
  let privateVariable = "Private variable";

  function privateFunction() {
    console.log("Private function");
  }

  return {
    publicVariable: "Public variable",
    publicFunction: function() {
      console.log("Public function");
    }
  };
})();

console.log(myModule.publicVariable); // 出力: Public variable
myModule.publicFunction(); // 出力: Public function

クラス

• 方法
  クラスを定義し、メソッド内で変数を使用する。
• 目的
  変数をプライベートスコープに閉じ込め、メソッドを通じてアクセスする。

class MyClass {
  constructor() {
    this.publicVariable = "Public variable";
    this.privateVariable = "Private variable";
  }

  publicMethod() {
    console.log(this.publicVariable); // 出力: Public variable
    console.log(this.privateVariable); // 出力: Private variable
  }
}

const myObject = new MyClass();
console.log(myObject.publicVariable); // 出力: Public variable
myObject.publicMethod();

クロージャ

• 方法
  内側の関数を外側の関数から返す。
• 目的
  外側の関数のスコープを内側の関数に閉じ込める。

function createCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log   (counter()); // 出力: 1
console.log(counter()); // 出力: 2