(JS) Scope Chain

Scope란 위 그림처럼 계층 구조로 형성된다. 어떤 함수로도 둘러싸여 있지 않은 가장 최상위 Scope를 Global Scope라고 부른다.
그리고 그 하위엔 함수 생성을 기준으로 Scope가 형성된다.

[상위] Global Scope - Person Scope - DisplayName Scope [하위]

이런 Scope 계층에서 가장 중요한 특징은 상위에서 하위 Scope 내부 정로를 접근할 수 없다는 점이다. 반면, 하위에서 상위 Scope의 정보는 접근 가능하다. (자바스크립트를 처음 배우는 초심자에겐 가장 중요한 부분일지도..)

그리고 실행문의 위치를 기준으로 하위 Scope부터 시작해 원하는 값을 찾을때까지 상위로 탐색한다

예제 1

let a = 1;

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

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

로그 #1

• a라는 메시지를 출력하는 실행문이 실행된다.
• 현 실행문의 위치는 로그#1 부분에 위치한다. foo 함수 내부에서 시작하여 해당 변수를 찾기 위한 탐색이 시작된다.
• foo 함수 Scope 탐색 결과, 바로 위에 있는 (값이 2인) a 변수를 찾는다.
• 따라서, console.log(a)는 2

로그 #2

• 현 실행문의 위치는 Global Scope 자바스크립트는 Gloal 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

• Global Scope에서 a변수가 존재하는지 찾지만, 찾을 수 없다.
• 자바스크립트 입장에서 a라는 명칭은 알 수 없는 문자다.(에러발생)

**만약 현재 Scope에서 원하는 정보를 찾지 못하고 상위 Scope가 존재한다면, 상위 Scope에서 원하는 정보를 찾지 못하고 한 단계 위 상위 Scope에서 탐색합니다.

이런 방식으로 Global Scope까지 탐색을 계속하며, 원하는 벙보를 찾으면 탐색을 멈춘다**

변수를 선언할때 해당 변수가 사용되는 스코프를 잘 판단해 불필요하게 상위 스코프에 선언하지 않도록 해야 한다!