스코프 체인

스코프 체인의 의미

자바스크립트에서는 함수 내의 블록(for, if)와 같은 구문은 유효 범위가 없으며, 오직 함수만이 유효 범위의 한 단위가 됨.

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

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

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

 

 

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

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

 

설명

코드가 실행되면, 전역 실행 컨텍스트가 생성되고 변수가 객체(활성 객체)가 만들어 짐. 현재 전역 실행 컨텍스트가 단 하나만 실행되어 참조할 상위 컨텍스트가 없음. 자신이 최상위에 위치하는 변수 객체.

따라서 변수 객체의 스코프 체인은 자기 자신만을 가짐. 변수 객체의 [[scope]]는 변수 객체 자신을 가리킴.

 

 

 

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

var var1 = 1;
var var2 = 2;

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

func();
console.log(var1);
console.log(var2);

-- 실행 결과 --
10
20
1
2

 

설명

코드 실행되면, 전역 컨텍스트 생성 후 func() 함수 객체가 만들어 짐. 

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

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

이후 함수를 실행하였을 때 새로운 컨텍스트 생성(func 컨텍스트). func 컨텍스트의 스코프 체인은 실행된 함수의 [[scope]] 프로퍼티를 그대로 복사한 후, 현재 생성된 변수 객체를 복사한 스코프 체인의 맨 앞에 추가 됨.

 

 

요약

• 각 함수 객체는 [[scope]] 프로퍼티로 현재 스코프 체인을 참조.

• 현재 실행되는 함수 객체의 [[scope]] 프로퍼티를 복사하고, 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가.

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

※ var1과 var2는 func 변수 객체를 먼저 탐색하고, 없으면 전역 객체를 탐색

 

※ 식별자 인식

스코프 체인으로 식별자 인식 작업이 이루어 짐. 

식별자 인식은 스코프 체인의 첫번째 변수 객체부터 시작하며 식별자와 대응되는 이름을 가진 프로퍼티가 있는지를 체크. 

함수 호출 시, 스코프 체인의 가장 앞에 있는 객체가 변수 객체이므로 이 객체에 있는 공식 인자, 내부 함수, 지역 변수에 대응되는지 확인

만약 대응 되는 프로퍼티를 찾지 못한다면 다음 객체로 이동하여 찾는다.

 

 

예제)

var value = "value1";

function printFunc() {
    var value = "value2";
    
    function printValue() {
        return value;
    }
    console.log(printValue());
}

printFunc();

 

설명

코드 실행 시 전역 실행 컨텍스트 생성, 이후 printFunc 함수 실행. 각 함수가 실행될 때 새로운 컨텍스트 생성 및 스코프 체인은 실행된 함수의 [[scope]] 프로퍼티를 그대로 복사 후, 현재 생성된 변수 객체를 복사한 스코프 체인의 맨앞에 추가.

 

 

 

참조 : INSIDE Javascript