【JS】スコープとレキシカルスコープ

スコープとは

スコープの定義

実行中のコードから値と式が参照できる範囲。
JSは一行ずつ実行されるが、その実行行から見える値と式のこと。

スコープは5種類

1. グローバルスコープ
2. スクリプトスコープ
3. 関数スコープ
4. ブロックスコープ
5. モジュールスコープ

グローバルスコープとスクリプトスコープについて

以下を実行、デベロッパーツールで確認。するとdebuggerの部分で停止する。

let a = 0;
var b = 0;
function c() {}
debugger;

Scopeの中を見ると、scriptの中にはletで定義したaが、Globalにはwindowオブジェクトが格納されている。

さらに、Globalの中にはbとcが格納されている

1.グローバルスコープ

varやfunctionで宣言を行った場合、windowオブジェクトのプロパティとして値が保持される。

2.スクリプトスコープ

letやconstで宣言を行った場合は、scriptのほうに表示される。

グローバルスコープ＝windowオブジェクト

グローバルオブジェクトは下記のように省略できる。

console.log(window.b);
console.log(b);

よって、javascriptではwindowスコープ自体がグローバルスコープとなっている。

使い勝手は、スクリプトスコープもグローバルスコープも、特に変わらない。

スクリプトスコープもグローバルスコープも、一般的にはまとめてグローバルスコープと呼ばれることが多い。

3.関数スコープ

関数に囲まれたスコープのこと。

function a() {
  let b =0; // 変数bは関数スコープの中でのみ取得可能
  console.log(b);
}
a();

4.ブロックスコープ

ブロックとはJavaScriptでは、{}（）のこと。
ブロックスコープとは、{}で囲まれた範囲のことを表す。

ブロックスコープを使用する際の条件

変数の宣言で、letまたはconstを使用する。
varを使用した場合は、ブロックスコープが生成されない。

{
  let c = 1;
  console.log(c);
}
// 実行結果は1が表示される

{
  let c = 1;
}
console.log(c);
// ブロックの外にあるのでエラー

varと関数の場合

{
  var c = 1;
}
console.log(c);
// 実行結果は1が表示される（ブロックが無視される）

{
  function d() {
    console.log('d is called.');
  }
}
d();
// 実行結果はd is called.が表示される（ブロックが無視される）

関数式の場合

{
  const d = function() {
    console.log('d is called.');
  }
}
d();
// ブロックの外にあるのでエラー

ブロックスコープは、if文やfor文と一緒に使用される。

if文やfor文の中でvarは使用できない。

5.モジュールスコープ

後日更新予定

レキシカルスコープ（外部スコープ）とは

レキシカルスコープの定義

コードを書く場所によって参照できる変数が変わるスコープのこと。
コードを記述した時点で決定するため、「静的スコープ」ともいう。

自身のスコープより外側のスコープは参照可能。これを外部スコープという。

下記ページ「関数コンテキスト」参照

あわせて読みたい

【JS】JavaScriptの実行 【JavaScript実行前の状態】 JavaSciptは、ブラウザに装備されているJavaScriptエンジン（ChromeとEdgeはV8）によって実行される。 JavaScript実行前には、「グローバル…

レキシカルスコープとはまとめ

1. 実行中のコードから見た外部スコープのこと。
2. どのようにしてスコープを決定するかの使用のこと。