11. Javascript 실행 컨텍스트(2) - 실행 컨텍스트 생성 프로세스

 

 

이제 하나의 함수를 선언하고, 그 함수가 실행되는 과정과 함께 실행 컨텍스트가 형성되고 어떤 정보가 처리되는지를 살펴보도록 하겠습니다. 아래와 같은 코드를 통해 함수를 선언하고 실행한다고 가정해 보겠습니다.

 

function execute(param1, param2){
    var a = 1;
    var b = 2;
    function func(){
        return a + b;
    }

    return param1 + param2 + func();
}

execute(3, 4);

 

 

(1) 변수 객체(활성 객체)의 생성

함수의 실행과 함께, 하나의 실행 컨텍스트가 형성되고 이 컨텍스트 안에는 여러 가지 실행 정보를 담는 변수 객체를 만들게 됩니다. 이 변수 객체에 매개변수, 변수, 객체 등이 저장되고 이 변수 객체에서 새로운 실행 컨텍스트를 접근하게 됩니다. 

 

(2) arguments 객체의 생성

우리가 앞서 배운, 함수에서 기본적으로 갖게되는 프로퍼티 중 하나인 arguments 객체가 생성됩니다. 여기서 execute( ) 함수는 매개변수 param1, param2를 선언해 두었으므로 이 두 개의 정보가 포함됩니다. 변수 객체는 기본적으로 함수의 arguments 프로퍼티를 통해 이 arguments 객체를 참조하게 됩니다. 

 

(3) [[scope]] 생성

스코프 정보는 컨텍스트의 유효 범위에 대한 정보를 저장하는 속성입니다. [[scope]] 프로퍼티를 통해 참조하게 되며 이는 리스트 형태로 저장하게 됩니다. 이 리스트를 따라 특정 변수를 접근하게 되는데 이 리스트에서 특정 변수를 찾지 못하게 되면 에러가 발생하게 됩니다. [[scope]]는 이후 스코프 체인 아티클에서 다룰 예정이니, 현재 생성된 컨텍스트의 변수 객체가 가장 앞에 추가되어 우선적으로 검토된다는 사실만 기억하도록 합시다. 

 

(4) 변수의 생성

변수 객체 내부에는 이제 execute( ) 함수에서 사용하게 되는 지역 변수들의 생성이 이루어집니다. 여기서는 변수 a, 변수 b, 그리고 함수 func, 매개변수 param1, param2가 해당되는 부분이죠. 여기서 Javascript의 중요 특징 하나를 확인할 수 있는데요, 이 과정에서는 변수나 내부 함수들에 대해 메모리 생성(instantiation)만 일어난다는 점입니다. 그럼 어떤 작업이 진행되지 않는 것일까요? 바로 초기화(initialization)입니다. 이런 값들의 초기화는 변수 객체가 전부 생성된 이후 표현식의 실행과 함께 이루어지기 때문에 현 단계에서는 변수 a, b의 값들은 모두 undefined로 할당되어 있습니다. 

 

기억하실지는 모르겠지만, Javascript에서는 함수 표현식을 사용하지 않는 경우에는 함수 호이스팅이 발생한다고 했습니다. 그 이유가 이 변수 객체 내에서의 변수의 생성 과정과 연계가 되는 것입니다. 이와 관련된 사항은 다른 아티클에서 좀 더 상세히 살펴보도록 하겠습니다. 

 

(5) this 바인딩

이제까지 특정 함수에서의 조건에서 this 바인딩이 일어나는 여러 케이스를 살펴보았었습니다. 이 과정에서 this가 어떤 객체를 참조할 것인지 할당됩니다. 만일 별도의 참조 객체가 없다면, 전역 객체를 참조하게 됩니다.