JavaScriptのスコープをマスターしよう!!

はじめに

初学者です。
スコープについて学習したので備忘録。
間違っていたら教えていただけると幸いです。

スコープとは

スコープとは「実行中のコードから値と式が参照できる範囲」です
スコープによって呼び出せる関数や変数に違いがでます。

スコープの種類

スコープにはいくつかの種類があります

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

各種スコープの説明

グローバルスコープ

グローバルスコープはグローバルコンテキスト内でvarやfuntionで定義した定義物です。
グローバルスコープに分類されるものはグローバルオブジェクト(windowオブジェクト)のプロパティとして値が保持されているものです。

スクリプトスコープ

スクリプトスコープはグローバルコンテキスト内でletやconstで宣言された宣言物です。関数宣言を使わずに関数式で作成た関数も
スクリプトスコープに分類されます。
グローバルスコープとスクリプトスコープは厳密には違うスコープですが、どこからでも呼び出すことができるという点で
どちらもグローバルスコープとして扱われることが多いです

window.a = 0
console.log(window.b)//省略しない呼び出し方
console.log(b)//省略した呼び出し方

グローバルオブジェクト(windowオブジェクト)に保存されている値でもwindow.を省略して呼び出すことができるため、参照の仕方＋どこからでも呼び出し可能な点はスクリプトスコープと違いがありません。
厳密にスコープを分けると下記のようになりますが、どちらもグローバルオブジェクトと呼ばれることが多いです

let a = 0; //Script scope
var b = 0; //global scope
function c() {} // grobal scope

関数スコープ

function a (){
let b = 0;
console.log(b)//○
}
a();
console.log(b)//x
//関数の中と外ではスコープが違う

ブロックスコープ

{
  let c = 1;
  console.log(c)//○
}
console.log(c)//x
//関数式以外の波括弧で囲まれた範囲をブロックスコープという
//使用するための条件 let or constを使う  varはx
//関数式は無視されるため変数宣言で関数を作る
//基本はforやif文で生成される

レキシカルスコープ

スコープの種類では出しませんでしたが、番外編と思ってください。
実行中のスコープからみた外部スコープがレキシカルスコープです

let a = 2
function fn1() {
  let b = 1
  function fn2() {
    let c = 3;
    console.log(b)//○
  }
  fn2()

}
fn1();

//fn1はfn2のレキシカルスコープ(外部スコープなので)bを参照することができる

let a = 2
function fn1() {
  let b = 1
  
}
fn1();

function fn2() {
  let c = 3;
  console.log(b)//x
}
fn2()
//こちらのコードではfn2のレキシカルスコープにある変数や関数はaと関数fnの2つ
//fn2の中にあるbは参照できない

まとめ

グローバルスコープはグローバルオブジェクト(windowオブジェクト)に保存される変数や関数
スクリプトスコープはグローバルコンテキスト内でletやconstで宣言されたもの
関数スコープは関数の{}の中の記述(関数宣言に限る)
ブロックスコープは関数宣言された{}以外の{}の中（forとかifとかの{}）
レキシカルスコープは実行中のスコープからみた外側のスコープ