[JS] 스코프 체인(Scope chain)

자바스크립트 스코프(Scope)는 변수의 유효 범위를 나타낸다. 대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)를 따르지만 자바스크립트는 함수 레벨 스코프(Function-level scope)를 따른다.

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

스코프는 전역(Global) 과 지역(Local)으로 나누어지는데 전역 스코프는 Web page 당 1개만 존재하는 영역으로, 말 그대로 어떤 함수로도 둘러싸여 있지 않아 어느 곳에서든 접근할 수 있는 최상위 영역이다.

//Global scope
const age = 20;

function foo() {
    //foo 함수 Scope
  function innerFoo() {
      //innerFoo 함수 Scope
    console.log(age);
  }
}

<실행 순서>

Step 1. innerFoo 함수 스코프에서 age를 찾는다. (실패)

Step 2. 상위 스코프인 foo 함수 스코프에서 age를 찾는다. (실패)

Step 3. 전역 스코프에 있는 age 값을 가져와 사용한다. (성공)

scope 계층 간 접근 가능 여부

상위 Scope에서 하위 Scope 접근 (X)

하위 Scope에서 상위 Scope 접근 (O)

이처럼 자바스크립트에서는 현재 스코프에서 원하는 정보를 찾지 못하였을 경우, 그 스코프의 상위 스코프를 계속해서 탐색해나가다가 원하는 정보를 찾으면 탐색을 중지한다. 이를 스코프 체인(Scope Chain)이라고 한다.

참고

https://poiemaweb.com/es6-block-scope