[javascript] Execution Context (실행문맥)의 개념과 구조

이번 포스팅은 javascript의 동작원리를 이해하기위해 필요한 execution context (실행문맥)에 파헤쳐보겠습니다.

execution context는 다양한 개념들이 융합되어있기 때문에 전체를 이해하기 위해서는 선행되어야하는 개념이 필요하다고 생각합니다.

문법적 개념 : 객체, this variable, arguments객체, closure, hoisting, scope chain 등등

data stucture : stack

위의 내용이 선행되어있다는 전제 하에 소스코드와 논리적인 구조를 확인해보면서 javascript 엔진의 관점에서 분석해보도록 하겠습니다. (호스팅환경은 web browser입니다)

1. Execution Context 개념

1.1 개념

1) context의 사전적 정의는 글의 앞뒤 연결하는 문맥을 의미하며 javascript에서는 실행가능한 코드(영역)를 의미합니다. 그리고 execution context란 실행가능한 코드가 동작하기 위해 필요한 환경(정보)입니다. 

2) javascript 코드가 최초에 실행시 execution context stack이 생성되고 코드가 실행되기전 execution context이 순차적으로 할당됩니다.

*  javascript 코드가 동작하기 전에 반드시 execution context가 생성되어야 실행코드가 이 정보를 참고하여 코드를 동작 할 수 있습니다.

[실행가능한 코드]

1) 전역 코드(Global Object) : 전역 영역에 존재하는 코드

2) 함수 코드(Activation Object) : 함수 내에 존재하는 코드

3) eval 코드 : eval 함수로 실행하는 코드

2. execution context 흐름 

예제 소스코드를 통해서 코드가 실행 될 때 execution context (EC)가 stack에서 생성/소멸되는 과정을 확인해 보겠습니다.

[예제소스]

위의 코드를 실행하면 stack이 생성되고 코드가 실행되는 흐름에 따라  execution context (EC)가 생성/소멸하는 과정이 발생하며 그 시점은 아래와 같습니다. 

[ 예제소스 - execution context (EC)의 생성/소멸시점]

[Execution Context (EC) 생성과 소멸에 따른 stack의 변화]

3. execution context 구성

3.1 논리적 구조

3.2 VO (variable object)

1) 정의

- 실행가능한 코드(전역코드, 함수코드)에 선언되어있는 자원를 property로 소유하는 객체를 가리키는 참조 변수입니다.

= 자원의 종류 : 변수, parameter, argument 객체(인자정보), 함수(표현식 제외)

- 전역 코드가 실행될 경우 VO가 가리키는 객체는 global객체(GO)이며, 함수 코드가 실행될 경우 vo가 가리키는 객체는 activation 객체(AO)입니다.

2) 객체의 구성 

- Global 객체 (GO) : property(변수), method(표현식 제외)

    + Built-in 객체, DOM 객체, BOM 객체

- Activation 객체 (AO) : property(변수), method(표현식 제외), parameter, arguments객체(인자정보) 

                            + Built-in 객체, DOM 객체, BOM 객체

3) 특징 : Function 객체만이 소유하는 property 인 [[Scopes]] 는 function 객체 자신이 실행되는 execution context의 Scopes 객체를 가리킴으로써 closure 함수가 동작 할 수 있음

3.3 SC (scope chain)

1) 정의 : scope chain을 구성하는 Scopes객체를 가리키는 참조변수

2) 객체의 구성 : VO가 가리키는 객체, 전체 부모 객체

3) 특징 : scope chain 을 기반으로 지역/전역변수 호출 시 탐색하는 매커니즘이 동작

3.4 this variable

1) 정의 : this변수를 호출하는 함수가 소속되어있는 객체의 주소가 저장된 참조변수

2) 특징 : this변수를 호출하는 시점에 따라 저장되는 객체의 주소가 달라짐 (동적 바인딩 특성)

4. execution context 종류

4.1 Global Execute Context (전역 실행 문맥)

4.1.1 정의 : VO가 Global Object(=window)를 가리키는 execution context

4.1.2 생성 및 소멸 시점

- globel 객체 : web browser에 web page가 로드 시 생성

- global EC : 전역 코드에 컨트롤이 진입시 생성되며 web page또는 web browser을 종료시킬때 소멸됨

4.1.3 생성 순서와 논리적 구조

4.1.4 특징 : global EC의 VO에 의해 생성된 global object에 func1() function과 global variable이 

선언되기 때문에 전역 코드내에 각 멤버의 선언부 이전에 호출(변수/함수 hoisting)이 가능합니다.

단, 값의 할당은 정의문이 실행된 이후에 동작

[ 예제소스 - 변수/함수 hoisting ]

[ chome  develop tool의 console 출력결과 ]

4.2 Function Execution Context (함수 실행 문맥)

4.2.1 정의 : VO가 Activation 객체(=func1() )를 가리키는 execution context

4.2.2 생성 및 소멸 시점 : 함수를 호출 전 생성되고, 함수가 소멸된 후 소멸합니다.

4.2.3 생성 순서와 논리적 구조

4.2.3 특징

1) Activation 객체 생성 시 arguments object가 생성되기 때문에 함수코드는 별도의 parameter를 선언하지 않아도 인자를 전달 받을 수 있음

2) hoisting 특성 (Global execute context 와 동일)

5. execution context의 전체 구조

이제 이제까지 설명한 내용을 바탕으로 전체 execution context 의 구조를 확인해보겠습니다.

아래의 소스코드에서 빨간색으로 표시된 부분이 실행되는 시점에서 stack에 생성된 execution context 입니다.

5.1 소스코드 및 시점

5.2 전체 구조

6. execution context의 전체 구조 확인

(chrome develop tool 활용)

마지막으로 소스코드의 execution context의 구조를 쉽게 확인 하는 방법을 확인해보겠습니다. chrome web browser에서 제공하는 개발툴을 이용하면 쉽게 확인 할 수 있습니다.

(* chrome develop tool : chrome을 설치하고 단축키 F12를 클릭하면 활성화 할 수 있습니다.)

6.1 Global object(window) 에 생성된 전역함수/변수

개발 툴 우측의 'Scope 영역'에서 global을 클릭하면 global객체인 window의 수 많은 method와 property를 확인 할 수 있는데요. 그 수많은 리스트를 천천히 살펴보면 개발자가 전역으로 선언 및 정의한 method와 property를 확인 할 수 있습니다.

6.2 call stack과 Scope 객체 구조

또한 개발 툴 우측의 'Call Stack영역'에서 특정 시점(코드 21번줄)에서의 execution context의 구조를 확인 할 수 있으며, 'Scope 영역'에서 특정 시점에서 scope chain으로 연결된 객체( GO or VO)의 구조도 활인 할 수 있습니다.

최대한 정확한 정보를 공유하고자 항상 신중하게 포스팅을 하고 있지만, 내용에 개선이 필요한 부분이 있을 수 도 있습니다.

혹시나 추가적인 보완이 필요하다고 판단되는 부분이 있다면 댓글로 조언해주세요. 참고하여 수정해놓겠습니다.

* 해당 포스팅이 도움이되셨다면 공감과 댓글 부탁드릴께요 ㅎㅎ