Scope chain 이란?
자바스크립트의 여러 중요한 개념중 하나인 scope chain 에 대해 개괄적인 내용을 담고자 합니다.
scope 개념은 알고 있다는 전제로 설명합니다.
시작하기 전에..
function a(){
var a = 1; (A)
function b(){
console.log(a); (B)
}
b();
}
a();위 코드라인 (B)를 보면 b() 함수내에 선언하지 않은 a 변수에 접근하여 로그를 찍으력 합니다.
자 과연 어떤 결과가 나올까요?
1 결과는 a()에 변수 a값을 출력하였습니다.
함수 b()에 선언도 안되있는 외부에 있는 변수 a 값을 출력 할 수 있었을까요?
여기서 scope chain 의 개념을 집어넣으면 설명이 됩니다.
scope chain 이란?
scope chain 의 영어적 해석을 보면
- scope
- 범위 etc..
- chain
- 사슬 , 연쇄, etc..
범위 연쇄 라고 언어적으로 해석 할 수 있습니다. 한국말로 해석된 말을 의미 유추해보면 어떤 범위안에 범위안에 범위에 연쇄적으로 사슬과 같이 올라간다 라고 유추 할 수 있을거 같습니다.(너무 억지같은...?)
그럼 이제 개발자 스럽게 접근해보겠습니다.
자바스크립트는 실행시점에 Excecution Context(EC)가 생성이되고, 그 시점에 온갖 잡다한 행위들이 이뤄집니다.(예를들어 Hoisting)
function a(){
var a = 1; (A)
function b(){
console.log(a); (B)
}
b();
}
a();다시 코드를 보면 a(), b() 가 실행되면서 생성된 EC에 의해서 b() 함수내 변수 a를 탐색하기 시작하는데, 만약 함수 b()에 변수 a 가 없다면 함수 b()를 감싸고 있는 외부함수 a() 를 탐색하게 됩니다. 이때 변수 a가 존재하면 a를 참조하게 되고, 혹시 없다면 계속적으로 감싸고 있는 상위 함수를 탐색하는 과정을 거칩니다.
결국 찾지 못하고 root 인 Global Object EC까지 오게 되고 탐색하는 a가 없다고 VM500:1 Uncaught ReferenceError: a is not defined라는 자주보는 에러를 뿜어내게 됩니다.
한마디로 scope chain 은
- Identifiers(식별자)를 찾는 일련의 과정
입니다.
추가적으로 scope chain은 Identifiers(식별자)를 찾는 거지, 어떤 객체의 property(속성)를 찾는 과정이 아닙니다. (<= 이것은 프로토타입 체인)
내부 작동방식
자바스크립트는 ES6로 넘어오면서 기존 ES3 ~ ES5와 다르게 내부 구현이 바뀌었습니다.
함수 a()가 실행이 되면 Execution Context(EC) 생성되고 Lexical Environment가 생성시점의 함수 a() 의 정보를 담기며 생성이 됩니다.
함수 생성시점에 평가된 EC b(), EC a()와 Global 이 생성되면서 outer Lexical Environment에 의해서 연결이 되어집니다.
자 그래서 이 시점에 정리를 할 수 가 있습니다.
함수가 생성되면 Execution Context 가 생성되고, 그리하여 Lexical Environment 가 내 outer Lexical Environment 가 상위 Environment Record 와 연결되면서 내부 함수 정보를 탐색할 수 있게 됩니다.
그리하여 b()함수 내 변수 a가 함수 a() 내 변수 a를 참조하여 에러 없이 결과출력이 가능하게 됩니다.
이것이 바로 Scope Chain 입니다.