[Javascript] 스코프 체인 Scopechain

정의

변수와 함수의 유효 범위를 나타내는 스코프가 [[scope]] 프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리되는데 이를 스코프 체인이라고 한다.

 

ES6 이전에는 함수만이 유효 범위의 유일한 범위였지만 ES6 이후 블록 스코프(let, const)가 추가되었다.

 

구성

각 실행 컨텍스트의 변수 객체가 구성 요소인 리스트.

 

3 - ...

2 - 변수 객체 2

1 - 변수 객체 1

0 - 변수 객체 0

 

각각의 함수는 [[scope]] 프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조한다.

함수가 실행되는 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수(상위 컨텍스트)의 [[scope]] 프로퍼티를 기반으로 새로운 스코프 체인을 만든다.

 

참고 > 실행 컨텍스트 Execution context

 

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

상위 컨텍스트가 없다.

자신이 최상위에 위치하는 변수 객체이기 때문에 스코프 체인은 변수 객체 자신을 가리킨다.

 

함수 실행 컨텍스트의 스코프 체인

함수 실행 컨텍스트의 변수 객체가 생성될 때, 현재 실행되는 컨텍스트(자신을 호출 한)의 변수 객체에 있는 스코프 체인([[scope]])을 그대로 함께 가진다. 

생성된 스코프 체인은 실행된 컨텍스트의 [[scope]] 프로퍼티를 그대로 복사한 후, 자신의 스코프 체인(변수 객체의 구성 요소를 가지고 있다.)의 맨 앞에 추가한다.

 

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

 

* 함수 객체가 처음 생성될 당시 실행 컨텍스트가 무엇인지 생각해야 한다

 

역할

스코프 체인을 이용해서 식별자 인식(Identifier resolution)이 이루어진다.

식별자 인식은 스코프 체인의 가장 앞에 있는 변수 객체부터 시작한다. 첫 번째 객체에서 식별자와 대응되는 프로퍼티가 있다면 사용하고 발견하지 못한다면 다음 객체로 이동해서 찾는다. 대응되는 이름의 프로퍼티를 찾을 때까지 계속된다. 

실행 중인 컨텍스트의 변수 객체 > 상위 컨텍스트의 변수 객체 > ... 

 

with

스코프 체인을 사용자가 임의로 수정할 수 있다.

성능을 높이고자 한다면 이 키워드는 사용하면 안 된다.

 

출처

• 인사이드 자바스크립트