11. Javascript 실행 컨텍스트(1) - 실행 컨텍스트의 개념

 

 

실행 컨텍스트의 개념

Javascript에서의 실행 컨텍스트 개념은 저도 공부하면서 상당히 추상적인 개념이라 학습하기 어려웠습니다. 다만, C#이나 JAVA 등의 일반적인 OOP 기반 언어들과의 근본적인 차이를 불러오는 개념이기 때문에, 어렵지만 잘 이해해야 하는 개념이기도 합니다. 

 

아마 가장 큰 차이점은 변수의 가용 범위를 결정하는 프로세스가 될 것입니다. 특히 명시적으로 클래스와 이에 따른 상속 개념을 기반으로 가용 범위가 정해지는 언어와 범위를 결정짓는 방법이 다르기 때문에 기존 언어를 사용하는데 익숙하신 분들이라면 오히려 Javascript가 어렵게 다가올 것입니다. 

 

우선, 실행 컨텍스트는 [실행할 수 있는 자바스크립트 코드를 구분하는 추상적인 개념이고, 코드가 실행되는 환경]이라고 볼 수 있습니다. 사실 선뜻 와닿는 뜻은 아닙니다. 그럼 다시 질문을 좁혀서 정의를 미시적으로 해보겠습니다. 여기서 말하는 '구분되는 코드'라는 단위는 무엇일까요? '실행 가능한 코드 블럭'이라고 볼 수 있습니다. 그럼, 우리가 배웠던 Javascript에서 대표적인 코드 블럭 단위로 작성하던 것은 무엇일까요? 맞습니다. 함수입니다. 함수는 실행 컨텍스트라는 단위를 생성하는 가장 이해하기 쉬운 경우입니다. 

 

Javascript에서 실행 컨텍스트가 생성되는 경우는 세 가지로 규정됩니다. 우선 특별한 경우가 아니라면, 실행 컨텍스트를 이루는 단위는 '함수'인 것으로 가정하겠습니다.

 

1. 전역 코드
2. 함수 안의 코드를 실행할 경우
3. eval( ) 함수로 실행되는 코드

 

 

---

 

함수 하나가 실행되었을 때, 우선 실행 컨텍스트가 하나 새롭게 형성된다고 봅시다. 그리고 그 안에는 그 함수가 갖고 있는 변수, 객체, 실행 가능 코드가 포함됩니다. 그리고 실행 컨텍스트는 '새로운 함수'가 실행될 때 마다 새로운 컨텍스트 단위가 생성됩니다. 

 

그리고 이러한 실행 컨텍스트는 스택(stack)구조로 쌓이게 됩니다.(이해가 안되더라도 그냥 이미지만 떠올리세요) 스택 구조이기 때문에, 가장 맨 위에 있는 실행 컨텍스트가 제어권을 가지고 있는 상황이 됩니다. Javascript 코드에서 여러개의 함수가 실행되었을 때, 함수가 실행되는 순서가 있을 것입니다. 함수가 실행이 완료되면 결과를 반환하고, 스택이 쌓인 순서를 역으로 따라가며 실행이 완료된다고 말할 수 있습니다. 

 

자, 80%의 확률로 이 설명이 이해가 가지 않으셨을 겁니다. 아마 Javascript를 처음 접하시는 분들이라면 당연한 상황이니 안심(?)하시고 다음 내용을 따라가시기 바랍니다. 좀 더 코드 예제를 기반으로 설명한 후속 아티클을 읽다보면 자연스럽게 이해가 될 수 있는 내용이니 걱정하지 마세요.

 

console.log("전역 컨텍스트입니다.");

function Context1() {
    console.log("컨텍스트1");
};

function Context2() {
    Context1();
    console.log("컨텍스트2");
};

Context2();

 

위와 같은 코드가 있다고 가정해 봅시다. 결과는 대충 예상이 가실겁니다. 하지만 그 결과가 출력되는 순서를 실행 컨텍스트 개념을 통해서 설명해 보면 다음과 같습니다. 

 

우선 가장 기본적으로 전역 컨텍스트(최초의 컨텍스트)가 생성됩니다. 그리고 선언문과 별개로 가장 먼저 '실행'되는 함수는 무엇일까요? 바로 Context2( ) 함수죠. 그럼 여기서 Context2( ) 실행 컨텍스트가 생성됩니다. 그런데 Context2( ) 함수 안에는 Context1( )을 실행하는 코드가 있습니다. 그럼 여기서 또 한번 Context1( ) 실행 컨텍스트가 생성이 됩니다. 

 

전역 컨텍스트 > Context2( ) > Context1( ) 의 순서로 실행 컨텍스트가 생성되어 스택에 쌓이게 됩니다. 그리고 Context1( )이 맨 위에 놓이게 되므로 Context1( )의 컨텍스트가 완료되면 Context2( )로 반환하고, Context2( )의 컨텍스트까지 완료되면 이는 전역 컨텍스트로 반환되며 실행이 마무리 되는 것입니다. 

 

여기까지는 실행 컨텍스트의 추상적인 이미지를 다룬 부분이니 명확하게 이해되지 않더라도 인내심을 가지고 다음 내용을 학습하시기 바랍니다.