11. Javascript 실행 컨텍스트(4) - 스코프 체인 2

 

 

앞서 살펴본 스코프 체인의 예시를 통해, 어렴풋이나마 스코프 체인이 어떻게 작동하는지 살펴보았습니다. 아마 기본적인 내용은 이해가 갔으리라 생각합니다. 그럼, 내부 함수가 포함된 다음의 예제를 살펴보고 결과를 예측해 봅시다.

 

var value = "value1";

function printFunc() {
    var value = "value2";

    function printValue(){
        return value;
    }

    console.log(printValue());
}

printFunc();

 

우선 위 예제의 실행 컨텍스트 형성과 변수 객체, 그리고 스코프 체인을 도식화해서 살펴보고 결과가 어떻게 출력될지 확인해 보도록 하겠습니다. 

 

 

우선 위의 경우는 함수의 선언과 실행을 잘 구분하여 살펴봐야겠습니다. 전역 컨텍스트에서는 변수 value("value1"), 그리고 함수인 printFunc가 형성됩니다. 전역 컨텍스트 레벨에서 [[scope]]는 전역 객체만 생성되어 있습니다. 그리고 전역 컨텍스트 레벨에서 함수 printFunc( )가 실행됩니다.

 

이제 이 실행으로 printFunc 컨텍스트가 생성되고, 그에 따른 변수 객체가 다시 생성됩니다. 코드에서 printFunc( ) 함수 블록 내에 선언된 요소를 보겠습니다. 변수 value("valueXYZ")가 있고, 또 하나의 함수 printValue( )가 선언됩니다. 그리고 이 컨텍스트 안에서 printValue( )가 실행됩니다. 여기서 [[scope]]에는 전역 객체와 더불어 printFunc 변수 객체가 추가됩니다.

 

이제 printValue( ) 컨텍스트가 생성됩니다. 여기에는 새로 선언된 객체나 변수는 없군요. 다만 value라는 변수를 리턴하는 명령문만 존재합니다. 여기에는 [[scope]]에 전역 객체, printFunc 변수 객체 위에 printValue 변수 객체가 추가됩니다. 

 

이제 문제의 스코프 체인 과정을 살펴봐야 합니다. 우선 printValue 컨텍스트 안의 변수 객체를 봅시다. printValue( ) 함수에서는 value라는 변수를 출력하라고 명령했습니다. 하지만 위에서 설명했듯이 printValue( ) 함수 안에는 value라는 변수가 선언되어 있지 않습니다. [[scope]]안의 체이닝을 통해 우선 printValue 변수 객체 안에 value가 없음을 확인하면, 스코프 체인에 따라 다음으로 printFunc 변수 객체 안에 value라는 이름의 변수가 있는지를 확인합니다. 마침, 이곳에는 value라는 변수가 있습니다. value라는 변수의 값은 "value2"입니다. 그럼 여기서는 value를 출력하라는 명령에 대한 결과로 "value2"를 출력하게 됩니다. 

 

만일 printFunc 변수 객체에도 value라는 변수가 없었다면, 전역 변수 객체까지 체이닝이 일어나고, 여기에 있던 value의 값 "value1"이 출력되었을 것입니다. 프로토타입 체이닝 파트에서 살펴본 것과 유사한 프로세스입니다.