스코프 체인

앞선 실행 컨텍스트 글에서 나온 스코프 체인이 어떻게 만들어지는지 한번 확인해보자.

• 자바스크립트에서는 함수내의 {} 블록안에서의 for(){}, if(){}와 같은 구문은 유효 범위가 없다. 오직 함수만이 유효 범위의 한 단위가 된다.
• 이 유효 범위를 나타내는 스코프가 [[scope]]프로퍼티로 각 함수객체 내에서연결 리스트 형식으로 관리되고 이를 스코프 체인이라고 한다.
• 각각의 함수는[[scope]]프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조한다.
• 함수가 실행되는 그 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수의 [[scope]]프로퍼티를 기반으로 새로운 스코프 체인을 만든다.

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

• 전역코드의 예이다. 함수가 선언되지 않아 함수 호출이 없고, 실행 가능한 코드들만 나열되어 있다.
• 코드를 실행하면, 먼저 전역 실행 컨텍스트가 생성되고, 변수 객체가 만들어진다.
• 이 변수 객체의 스코프 체인은 어떻게 될까???
• 현재 전역 실행 컨텍스트 단 하나만 실행되고 있어 참조할 상위 컨텍스트가 없다.
• 즉 자신이 최상위에 위치하는 변수 객체인 것이다.
• 따라서, 이 변수 객체의 스코프 체인은 자기 자신만을 가진다.
• 다시말해 변수 객체의 [[scope]]는 변수 객체 자신을 가리킨다.

 

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

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

• 위의 코드를 실행하면 전역 실행 컨텍스트가 생성되고, func()함수 객체가 만들어진다.
• 이 함수 객체의 [[scope]]는 어떻게 될까???
• 함수 객체가 생성될 때, 그 함수 객체의 [[scope]]는 현재 실행되는 컨텍스트의 변수 객체에 있는 [[scope]]를 그대로 따라간다.
• 따라서 func함수 객체의 [[scope]]는 전역 변수 객체가 된다.

그렇다면 func(); 를 통해서 함수를 실행시키면 어떻게 될까??

• 함수를 실행하였으므로 새로운 컨텍스트가 만들어진다.
• 이 컨텍스트를 func컨텍스트라고 해보자
• func컨텍스트의 스코프 체인은 실행된 함수의 [[scope]]프로퍼티를 그대로 복사한 후, 현재 생성된 변수 객체를 복사한 스코프 체인의 맨 앞에 추가한다.
• func() 함수 객체의 [[scope]]프로러퍼티가 전역 객체 하나만을 가지고 있었으므로, func실행 컨텍스트의 스코프 체인은 아래 그림과 같이 [func 변수객체 - 전역객체] 가 된다.

 

 

위의 내용을 바탕으로 스코프 체인을 간단하게 정리해보면

• 각 함수 객체는[[scope]]프로퍼티로 현재 컨텍스트의 스코프 체인을 참조한다.
• 한 함수가 실행되면 새로운 실행 컨텍스트가 만들어지는데, 이 새로운 실행 컨텍스트는 자신이 사용할 스코프 체인을 다음과 같은 방법으로 만든다.
• 현재 실행되는 함수 객체의 [[scope]]프로퍼티를 복사하고, 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가한다.
• 요약하면 스코프 체인은 다음과 같이 표현 가능하다

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

 

 

참고

book.naver.com/bookdb/book_detail.nhn?bid=7400243