실행 컨텍스트 (EXECUTION CONTEXT) 이해하기

실행 컨텍스트 (EXECUTION CONTEXT)

실행 컨텍스트(Execution Context)는 코드들의 덩어리로 scope, hoisting, this 바인딩 등의 동작원리가 이루어 지는 자바스크립트의 핵심 원리중의 하나 입니다. ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의 합니다.

실행 컨텍스트는 실행 가능한 코드가 실행되는 환경 이라고도 말할 수 있습8니다. 여기서 실행 가능한 코드는 

• 전역 코드 : 전역 영역에 존재하는 코드
• Eval 코드 : Eval 함수로 실행되는 코드
• 함수 코드 : 함수 내에 존재하는 코드

일반적으로 실행 가능한 코드는 전역 코드와 함수 코드 입니다.

실행 컨텍스트에는 

1. 변수객체(Variable Object)

변수 객체는 실행 컨텍스트와 연관된 데이터를 담고 있는 객체입니다. 해당 실행 컨텍스트에서 사용하게 될 매개변수, 지역 변수, 사용할 함수 함수 선언(Function Declaration)등을 저장합니다. (함수 표현식은 제외 됩니다.) 함수가 호출되어서 활성화 되면 활성객체(activation object)가 생성되는데 활성객체는 함수가 호출되면서 받은 파라미터를 가지고 있는 arguments 객체를 가지며 해당 함수의 실행 컨텍스트에 변수 객체로 활용됩니다. 

2. 스코프 체인(Scope Chain)

스코프 체인(Scope Chain)은 일종의 리스트로서 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고 있는 개념입니다. 스코프 체인은 현재 실행 컨텍스트의 활성 객체를 선두로하여 순차적으로 상위 컨텍스트의 활성 객체를 가리키며 마지막 리스트는 전역 객체를 가리킵니다.

3. this value

this 프로퍼티에는 this 값이 할당됩니다. this 에 할당되는 값은 함수 호출 패턴에 의해 결정됩니다.

아래 이미지는 함수가 실행 되었을때 실행 컨텍스트가 생성되고 실행되는 과정을 보여주는 모습입니다. 아래 과정을 좀 더 자세히 이해하기 위해서는 자바스크립트의 클로저에 대한 추가 공부가 필요합니다. 또한 실행 컨텍스트는 함수가 실행 될때 생성되며 실행이 끝나면 사라지게 됩니다. 

위 사진을 보시면 가장 먼저 전역 실행 컨텍스트가 생성이 됩니다. 그 이후 전역 공간에 선언된 변수 a 를 선언 하고 outer() 함수를 선언을 해주는 과정을 가집니다. 이 과정이 바로 변수 객체 단계 입니다. outer() 함수가 호출 되어 실행 될때 outer 컨텍스트가 생성됩니다. 6.번 단계에서 outer scope에서 a를 탐색 하는 과정에서 var a = 3; 변수 선언이 되기 전에 console 이 실행되어 inner() 안에서 변수 a 를 찾지 못하고 상위 스코프로 변수 a 를 찾아가게 됩니다. 이 과정이 스코프 체인 과정 입니다. 사진 상에 this에 값을 할당되는 부분이 나와 있지 않지만 이미 실행 컨텍스트가 생성될때 this에 값이 바인딩 되었습니다. this는 함수 호출 패턴에 따라 달라지게 되기 때문에 전역 공간에서 함수 호출을 하여 this에 window로 되어 있습니다. 이러한 과정들을 실행한 후 함수 실행이 끝나면 실행 컨텍스트는 사라지게 됩니다.