기본적으로 프로그래밍 언어에서 스코프란, 어떤 변수에 대한 유효 범위를 뜻한다.

대표적으로 C언어에 함수 안에서 선언한 변수는, 함수 밖에서는 참조할 수 없는 것을 예로 들 수 있다.

보통 C,C++,JAVA에선 이 스코프에 대한 정보 흐름을 스택으로 표현한다. 프로그램이 시작하면 main함수에서 참조하는 정보들이 스택 영역에 push하고, 새로운 함수나 흐름이 시작하면 스택 영역의 가장 위에 push하여 정보를 저장한다. 그리고 변수를 사용할 때 스택의 top에 있는 정보를 사용한다. 

자바스크립트도 이러한 스코프를 구현하기 위해, 다른 언어의 스택 영역과 유사한 개념으로 실행 컨텍스트(Excution context)를 정의하였다.


실행 컨텍스트란, '실행 가능한 코드를 형상화하고 구분하는 추상적인 개념'으로 정의 된다고 한다, 쉽게 말하면 코드 블럭에 대한 정보들을 표현한 것이라고 할 수 있다.


이러한 실행 컨텍스트는 다른 언어의 main영역과 마찬가지로 global 컨텍스트가 존재한다, 이는 실행 컨텍스트가 생성되는 과정을 살펴본 후 알아보도록 하겠다.


function circle(r){
    var number = 3.14;
    function square(){
        return r*r;
    }
    return number * square();
}

circle(4);//50.24


위는 입력받은 반지름에 따른 원의 넓이를 구하는, 그냥 예제를 위한 함수이다. 위 함수를 실행함에 따라 실행컨텍스트가 어떻게 생성이 되는지 하나씩 정리하도록 해자.


1. 함수가 실행되면, 실행 컨텍스트를 생성한다.


 실행 컨텍스트

 



2. 실행 컨텍스트가 생성된 후, 이 컨텍스트에서 실행에 필요한 정보들을 담을 객체인 활성 객체를 생성한다.


 실행 컨텍스트

 

 활성 객체

 


활성 객체에는 이 함수가 가지고 있는 파라미터나 변수, 객체 등에 대한 정보가 저장된다. 

또한 다른 스코프에서 이 실행 컨텍스트를 참조할 땐 저 활성 객체를 통해 참조하게 된다.



3. 활성 객체 내에, 매개변수의 정보를 저장하고 있는 arguments 객체가 생성되고, 함수의 arguments 객체를 참조한다.


 실행 컨텍스트

 

 활성 객체

 arguments ---> [ r ]



활성 객체에는 이 함수가 가지고 있는 파라미터나 변수, 객체 등에 대한 정보가 저장된다. 

또한 다른 스코프에서 이 실행 컨텍스트를 참조할 땐 저 활성 객체를 통해 참조하게 된다.


4. 활성 객체 내에, 이 실행 컨텍스트의 스코프 체인을 생성한다.


 실행 컨텍스트

 

 활성 객체

 arguments ---> [ r ]

 [[scope]] 


스코프 체인은 이 컨텍스트 생성의 대상이 되는 함수가 가지고있는 [[scope]]를 복사해오고, 거기에 이 실행 컨텍스트의 활성 객체를 추가한다.

[[scope]]는 list의 형태로 저장이 되며, 전역객체에서 함수를 선언했으므로, 이 예제에서 저장되어있는 스코프는 이 실행 컨텍스트와, 전역 컨텍스트 일 것이다.



5. 변수 객체가 생성 되고, 함수가 가지고있는 변수 및 객체 정보를 생성한다.


 실행 컨텍스트

 

 활성 객체 = 변수 객체

 arguments ---> [ r ]

 [[scope]] ---> [List]

 r : value

 number : undefined

 square ---> Function Object


변수 객체가 따로 명명 되었지만, 변수 객체가 활성 객체와 같다.

매개변수로 받은 변수들은 바로 그 값으로 초기화 되고, 

함수 내에 선언된 변수는 해당 코드가 실행 되기 전까지는 초기화 되지 않기 때문에,

먼저 undefined로 저장이 된다.



6. this에 대한 정보를 저장하며, 이 객체에 바인딩한다.


 실행 컨텍스트

 

 활성 객체 = 변수 객체

 arguments ---> [ r ]

 [[scope]] ---> [List]

 r : value

 number : undefined

 square() ---> square함수 객체를 참조

 this ---> 전역 객체에 바운딩


this 바운딩에 대해선 this 키워드 포스트를 참조하자. 여기선 전역에 선언되어있는 함수이기 때문에 전역 객체에 바인딩 될 것이다.



7. 코드가 실행된다.

코드가 실행되면서 number의 값이 초기화되고 함수가 실행되어 반환된다.



지금까지 circle 함수의 실행 컨텍스트의 생성 과정을 보았다. 그러면 global 컨텍스트는 어떻게 될까? 

global 객체도 자바스크립트 객체이기 때문에 이와 크게 다르지 않다. global에 선언되어있는 변수와 객체에 대한 정보를 변 수객체에 저장하게 될 것이다.


global 실행 컨텍스트

 

 활성 객체 = 변수 객체

 arguments ---> []

 [[scope]] ---> [List]

 circle() ---> circle 함수 객체를 참조

 this ---> 전역 객체에 바운딩



예제에서의 global 컨텍스트는 위와 같을 것이다. 이 컨텍스트의 [[scope]]는 그 이전의 전역 컨텍스트의 변수 객체만이 존재할 것이며, this도 전역 객체에 바운딩 될 것이다.

'Javascript' 카테고리의 다른 글

자바스크립트 - Prototype 기반의 객체지향  (0) 2016.02.25
자바스크립트 - 객체 생성  (0) 2016.02.21
자바스크립트 - this 키워드  (0) 2016.02.04

+ Recent posts