[자바스크립트] 스코프 체인

gooweon.tistory.com/134

실행 컨텍스트 개념

여기서는 실행 컨텍스트 생성 과정에서 설명한 스코프 체인이 어떻게 만들어지는지 살펴보겠다.

• 자바스크립트 코드를 이해하려면 스코프 체인의 이해는 필수적이다.
• 이를 알아야, 변수에 대한 인식 메커니즘을 알 수 있고, 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다.

자바스크립트도 다른 언어와 마찬가지로 스코프, 즉 유효 범위가 있다.

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

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

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

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

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

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

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

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

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

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

 

출처

인사이드 자바스크립트(송형주, 고현준 지음) - 한빛미디어