자바스크립트는 C처럼 main() 함수가 없습니다. 이 함수가 C언어의 시작점이 된다면 자바스크립트의 시작점은 무엇일까요? 자바스크립트 코드는 모두 Text일 뿐이고 이 코드는 자바스크립트 엔진에 의해 해석됩니다. 즉 동적으로 실행되지요. 그럼 그 해석기가 자바스크립트를 읽고 실행하는 것이니 시작점은 여기서 찾아볼 수 있습니다. 


자바스크립트 인터프리터는 C로 만들어졌기에 이미 main()함수는 쓴 셈이고 C가 구동되면서 Text로 이뤄진 자바스크립트 코드를 어디선가 읽을겁니다. 만약 제가 C언어로 자바스크립트 인터프리터를 만든다면 예상하길 다음과 같은 과정을 거칠 겁니다.


텍스트로 만들어진 자바스크립트 코드를 로드해 토큰(token; 의미가 있는 단어)으로 쪼개고 그것을 조합해 전처리 트리(파싱트리;언어수준 의미있는 자료구조)를 만들어낼 겁니다. 이러한 해석 과정을 거칠 코드 크기가 클수록 느려질 수 밖에 없기 때문에 코드가 짧을 수록 속도가 더 빨라집니다. 그래서 배포시 반드시 압축도구등을 사용해 압축해야 하겠죠?. 여기까지 해석차원이라면 구동차원에서는 window 객체를 정의하고 window의 key-value에 Object, Array, String 등의 기본 함수를 선언하고 Math와 같은 특수 객체도 만든 다음 window 함수를 실행시킬 겁니다. 예상한다면 다음처럼 구동코드를 만들 수 있지 않을까 추측합니다.(저렇게 만들어진다가 아니라 의미적으로 접근한 겁니다.) 


//1. 해쉬맵 생성 

window = new; 

 

//2. 필요한 함수 및 객체 정의 

window.Object = function () {};

window.Array = function () {};

window.RegExp = function () {};

window.Number = function () {};

window.String = function () {}

window.Boolean = function () {};

window.Math = { sin: ….. };


//3. window를 실행 컨텍스트로 함수 적용

(function window() {

     //4. <script> 태그내에 있는 var 문, 함수선언문을 호이스팅 처리 

     

     //5. <script> 내 구동 실시 

     //   여기서 this는 실행 컨텍스트인 window이다. 

     //   this없이 사용하면 자동으로 window를 가리킨다.(그렇게 인터프리터가 해석해 놓은 것이다.)

}).apply(window); 



중요한 것은 window 객체를 생성했다는 것과 기본 실행 컨텍스트(EC; Excution Context)가 바로 window자신이 된다는 것입니다. 그리고 window에 모든 필요한 작업을 진행한 뒤 <script> 내부를 실제로 구동하게 됩니다. 


자 여기서 우리는 자바스크립트의 시작은 window라는 점입니다. window가 가장 기본 객체이며 기본 실행 컨텍스트입니다. 또 자바스크립트의 window은 유일하게 인스턴스이기도 하지만 함수 명이기도 합니다. 


그래서 <script>내에 작성되는 다음과 같은 코드는 우리는 항상 window의 key-value에 정의되어 있다고 가정해야합니다. 


<script>

     //1. var로 변수 선언.

     var a, b;

     

     //2. var없이 변수 선언.

     c = 10;

     

     //3. 함수 표현식

     f = function(k, j) {

          var m, n;

     };

     f();


     //4. 함수 선언문. 호이스팅 처리됨 

     function f1() {

     }     

     f1();


     //5. 할당 없는 리터럴 값 및 즉시 실행 함수

     3;

     (function(){

     })();

</script>



위 코드를 재해석해 보면 다음과 같습니다. 


(function window() {

     //1, 4번처럼 var 변수 선언 및 함수 선언문의 경우 window의 스코프 영역인 vo에 key-value로 잡힌다. 스코프 공간은 직접 접근이 안되며 삭제도 되지 않는다. 이렇게 var 변수 선언 및 함수 선언문이 스코프 영역의 vo에 미리 해석되어 공간이 할당되는 것을 호이스팅(hositing: 끌어올리기)이라고 한다. 

     window.vo = {a:null, b:null, f1: {함수 선언에 의해 생성된 해쉬맵} };


     //2. 처럼 var없이 변수 선언한 경우에는 window의 key-value로 잡힌다.

     window.c = 10;

     

     //3. 함수 표현식 정의는 window의 key-value로 잡힌다.

     window.f = function(k, j){

          var m, n;

     };


     //구동되는 함수는 결국 컨텍스트가 null로 넘어가지만 이때는 가장 기본 컨텍스트인 window가 자동으로 실행 컨텍스트로 잡힌다. 

     f.apply( null );

     f1.apply( null ); 


     //5처럼 사용하는 경우 엄밀히 말해 값만 있고 키는 없는 셈으므로 temp라는 배열 공간에 넣는다. 메모리에서 지워지질 않는다. 물론 이 공간은 직접 접근이 안된다. 

     window.temp = [3, {즉시 실행 함수에 의해 생성된 해쉬맵}];


}).apply(window);



window는 사용자가 new 키워드 사용없이 만들어진 글로벌 객체이며 함수인 셈입니다. 우리가 만드는 자바스크립트는 모두 여기서 해석되고 구동될 겁니다.


참고 

글쓴이 : 지돌스타(http://blog.jidolstar.com/811)