JavaScriptのスコープとは

こんにちは！ 株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「JavaScriptのスコープ」についてお伝えしていきます。

JavaScriptのスコープとは

JavaScriptのスコープ（Scope）は変数や関数が有効である範囲を定義します。

正確な変数の使用、エラーの回避、そしてクロージャの作成など、JavaScriptのコーディングができます。

スコープの基本

JavaScriptには次のスコープがあります。

グローバルスコープ（Global Scope）

スクリプト全体で有効なスコープで、どこからでもアクセス可能です。

ローカルスコープ（Local Scope）

関数内で有効なスコープで、関数内で宣言された変数は関数内でのみアクセス可能です。

ブロックスコープ（Block Scope）:

let や const で宣言された変数がブロック内でのみ有効なスコープです。

変数のスコープ

変数宣言方法によってスコープが変わります。
もちろん、以下にスコープに関する記事のコード例を示します。

javascriptCopy code
// グローバルスコープ
var globalVar = 10;

function exampleFunction() {
  // ローカルスコープ
  var localVar = 5;
  
  if (true) {
    // ブロックスコープ
    let blockVar = 20;
  }
}

console.log(globalVar); // 10
console.log(localVar);  // エラー（未定義のエラー）
console.log(blockVar);  // エラー（未定義のエラー）
// グローバルスコープ
var globalVar = 10;

function exampleFunction() {
  // ローカルスコープ
  var localVar = 5;
  
  if (true) {
    // ブロックスコープ
    let blockVar = 20;
  }
}

console.log(globalVar); // 10
console.log(localVar);  // エラー（未定義のエラー）
console.log(blockVar);  // エラー（未定義のエラー）

クロージャ

クロージャは、関数とその外部スコープにある変数との組み合わせです。

外部変数へのアクセスが可能になります。

]javascriptCopy code
function createCounter() {
  let count = 0;
  
  return function() {
    return count++;
  };
}

const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
function createCounter() {
  let count = 0;
  
  return function() {
    return count++;
  };
}

const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1

スコープとエラーハンドリング

スコープに関連するエラーは、try catch文を使用してハンドリングできます。

javascriptCopy code
try {
  // ここでエラーが発生する可能性があるコード
} catch (error) {
  // エラーハンドリング
}
try {
  // ここでエラーが発生する可能性があるコード
} catch (error) {
  // エラーハンドリング
}

綺麗なコードを記述するために必要な知識ですので、インプットしましょう。