【JavaScript】スコープ（Scope）とは

function fnA () {
 const val = 100;
}

function fnB() {
 console.log(val) 
}

fnB() //  Uncaught ReferenceError: val is not defined

{
 //ブロックスコープ(親スコープ)
 const number = 1;
  {
   //ブロックスコープ(子スコープ)
　　let string = "文字列";
  }
}

{
 const number = 1;
  {
　　let string = "文字列";
    console.log(number) // 1
  }
  console.log(string); // エラー
}

//スクリプトコープ
const number = 1;

function Fn() {
 //関数Fn内のスコープ（関数スコープ）から見て、変数numberはレキシカルスコープである。
 //console.logに書かれた識別子"number"は、常にレキシカルスコープである変数numberの値を参照する。
 console.log(number);
}

function run() {
  /*関数run内で新たに変数numberが宣言されていますが、
    記述された時点でどの変数を参照するか決定しているので常に1を参照します。*/
  const number = 10;
  Fn();
}

run();// 常に1が出力

//【識別子numberの参照過程】
//1：Fnの関数スコープに変数numberが定義されていない
//2：ひとつ外側のスコープ（スクリプトスコープ）を確認する
//3：スクリプトスコープにconst number = 1;が定義されているので、識別子xはこの変数を参照する

function fnA () {
 //関数スコープ
 const val = 100;
}

function fnB() {
 //関数スコープ
 console.log(val) 
}

fnB() // Uncaught ReferenceError: val is not defined

function fnA() {
  //関数スコープ（親スコープ）
  let valA = 1;
  console.log(valA); // 1

  function fnB() {
    //関数スコープ(fnAの子スコープ)
    const valB = 10;
    console.log(valA); // 1
    console.log(valB); //  10
    return (valA += 1);
  }

  function fnC() {
    //関数スコープ（fnAの子スコープ）
    const valC = 100;
    console.log(valC) // 100
    console.log(`関数fnBの実行結果: ${fnB()}`); // 関数fnBの実行結果: 2
    console.log(`変数numberの値: ${valA}`); // 変数numberの値： 2
    console.log(valB); // 参照できない。valBは関数fnB内でのみ参照できる
  }

  return fnC();
}

fnA();

{
// ブロックスコープ
 let number = 1;
 const string = 1;
 const fn = () => {
   return 1;
 }
}

if(true) {
 //ブロックスコープ
 const number = 1;
}

//一つ外側のスコープ（今回の場合、グローバルスコープ）
if(true) {
 // varやfunctionキーワードの場合、ブロックの外側のスコープに属する。
 var number = 1;
 function fn() {
  return 1;
 } 
}

console.log(number) // 1 グローバルスコープに属するため、実行できてしまう
console.log(fn())  //  1 上記と同様

"use strict";
//グローバルスコープ
if(true) {
 var number = 1; // グローバルスコープのまま
 function fn() { 
 // ブロックスコープに属する
  return 1;
 } 
}

console.log(number) // 1 グローバルスコープに属するため、実行できてしまう
console.log(fn())  // ブロックスコープに属しており、スコープ外で実行しているためエラー  ReferenceError: fn is not defined

<script>
// トップレベル

//グローバルスコープ
var globalVal = "グローバル変数";
var globalFn = () => {
 return "グローバル関数式"
}

function callGlobal() {
 console.log(globalVal,globalFn()) // グローバル変数、グローバル関数式
 return "グローバル関数宣言文";
} 

console.log(callGlobal()); // グローバル関数宣言文

</script>

// jsファイルのトップレベル
let number = 1;

const string = "文字列"

const fn = () => {
 return "関数式"
}

//スクリプトスコープ
const a = 1;
//グローバルスコープ
var b = "string";
// console.log(window.b or b)で呼び出せる
window.a = 100;
console.log(window.a)  // 1

<script type="module">
//モジュールスコープ
const number = 1;
console.log(number) // 1
</script>

<script type="module">
//モジュールスコープ
console.log(number) // エラー モジュールスコープでは、異なるscriptタグやjsファイルから参照不可。
</script>