자바스크립트 스코프 체인

스코프 체인

자바스크립트 코드를 이해하려면 스코프 체인의 이해는 필수적이다.

이를 알아야, 변수에 대한 인식 메커니즘을 알 수 있고, 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다.

자바스크립트에서는 함수 내의 {,} 블록은, 이를테면 for() {}, if {}와 같은 구문은 유효 범위가 없다.

오직 함수만이 유효 범위의 한 단위가 된다.

이 유효 범위를 나타내는 스코프가 [[scope]] 프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리되는데,

이를 스코프 체인이라고 한다.

 

전역 실행 컨텍스트의 스코프 체인

var var1 = 1;
var var2 = 2;
console.log(var1); // 1
console.log(var2); // 2

위의 예제 코드는 함수가 선언되지 않아 함수 호출이 없고, 실행 가능한 코드들만 나열되어 있다.

이 자바스크립트 코드를 실행하면, 먼저 전역 실행 컨텍스트가 생성되고, 변수 객체가 만들어진다.

현재 전역 실행 컨텍스트 단 하나만 실행되고 있어 참조할 상위 컨텍스트가 없다. 자신이 최상위에 위치하는 변수 객체인 것이다.

따라서, 이 변수 객체의 스코프 체인은 자기 자신만을 가진다.

 

함수를 호출한 경우 생성되는 실행 컨텍스트의 스코프 체인

var var1 = 1;
var var2 = 2'
function func() {
  var var1 = 10;
  var var2 = 20;
  console.log(var1); // 10
  console.log(var2); // 20
}

func();
console.log(var1); // 1
console.log(var2); // 2

함수 객체가 생성될 때, 그 함수 객체의 [[scope]]는 현재 실행되는 컨텍스트의 변수 객체에 있는 [[scope]]를 그대로 가진다. 

따라서, func 함수 객체의 [[scope]]는 전역 변수 객체가 된다.

스코프 체인 = 현재 실행 컨텍스트의 변수 객체 + 상위 컨텍스트의 스코프 체인

 

 

- 본 포스팅은 "인사이드 자바스크립트" 도서를 기반으로 작성한 글입니다.