(JS) Scope Chain

Scopeは上図のように階層を形成している.関数に囲まれていない最上位レベルのScopeをグローバルScopeと呼びます.
次に生成関数を基準としてScopeを形成する.
[親]グローバルScope-Person Scope-displayName Scope[子]
このScope層において最も重要な特徴は,下層Scope内部経路に上層からアクセスできないことである.逆に,下位層から上位層Scopeへの情報はアクセス可能である.(JavaScriptを習い始めたばかりの初心者にとって、これは最も重要な部分かもしれません...)
次に、実行文の場所に応じて、サブScopeから開始し、必要な値が見つかるまで親Scopeに移動します.

例1

let a = 1;

function foo () {
  let a = 2;
  console.log(a); //  로그 #1
}

foo();
console.log(a); // 로그 #2

ログ#1

aメッセージの実行文が実行されます.

既存の文の場所はlog#1セクションにあります.foo関数の内部から、変数を検索するためのナビゲーションを開始します.

foo関数Scopeナビゲーション結果は、真上(値2)にあるa変数を検索することを示します.

従って、console.log(a)は2

ログ#2

現在の文の場所は、Global Scope JavaScriptがGlobal Scopeを起点としてa変数を検索する場所です.

最初の行で宣言されたa変数が見つかり、その値が1であることがわかります.

console.log(a)は1

親ScopeでサブScopeの内部情報を参照できません.
すなわち,Line 1のa変数宣言がなくても,Line 4のa変数情報を見つけることができない.

例2

function foo () {
  let a = 2;
  console.log(a); //  로그 #1
}

foo();
console.log(a); // 로그 #2

ログ#2

GlobalScopeは、a変数が存在するかどうかを検索しますが、見つかりません.

JavaScriptではaという名前は不明です.(エラー発生)

**現在のScopeで必要な情報が見つからず、親Scopeが存在する場合は、親Scopeで必要な情報が見つかりません.
このようにGlobal Scopeまで探索を続け、必要な人形が見つかれば探索を停止**
変数を宣言するときは、その変数を使用するscopeを正しく判断し、上司scopeに不要に宣言しないようにしてください.