컨텍스트 실행을 배워보자

어제, 스코프와 클로저에 대해 배웠다. 배우면서 자연스럽게 컨텍스트 실행이라는 단어가 나왔다.

그렇다면, '컨텍스트 실행'은 무엇일까?

 

컨텍스트 실행

'컨텍스트(Context)'는 코드가 실행될 때 변수와 함수에 접근할 수 있는 '범위(Scope)'를 나타낸다.

컨텍스트는 '실행 컨텍스트(Execution Context)'라는 내부 데이터 구조로 관리가 된다. 각각의 실행 컨텍스트는 변수, 함수 선언, this 값 등과 같은 정보를 갖고 있다.

 

컨텍스트 실행은 '스택(Stack)' 형태로 관리가 된다. 새로운 코드 블록이 실행될 때마다 해당 코드 블록에 대한 새로운 실행 컨텍스트가 생성이 되고, 새로 생성된 컨텍스트는 스택의 가장 위에 쌓인다. 코드 블록의 실행이 완료되면 해당 실행 컨텍스트는 스택에서 제거되며, 이전 실행 컨텍스트로 되돌아가게 된다.

 

function outer() {
  var outerVariable = 'I am outside!';
  
  function inner() {
    var innerVariable = 'I am inside!';
    console.log(outerVariable);
    console.log(innerVariable);
  }
  
  inner();
}

outer();

이해하기 쉽게 예시 코드로 살펴보자.

 

위 예시 코드에서 'outer' 함수는 외부 함수이며, 'inner' 함수는 내부 함수다. 그리고 'outer' 함수 내에서 'inner' 함수를 호출하고 있는 것을 확인할 수 있다.

 

컨텍스트의 실행 흐름은 다음과 같다.

 

1. 전역 컨텍스트(Global Context)는 코드가 실행되는 가장 처음의 컨텍스트이다. 전역 변수와 전역 함수가 초기화된다.
2. 'outer' 함수 실행 컨텍스트는 'outer' 함수가 호출될 때 생성되는 컨텍스트이며, 'outerVariable' 변수가 선언되고 값이 할당된다.
3. 'inner' 함수 실행 컨텍스트는 'inner' 함수가 호출될 때 생성되는 컨텍스트이며, 'innerVariable' 변수가 선언되고 값이 할당된다.
4. 'inner' 함수 실행 컨텍스트에서 'console.log(outerVariable)'과 'console.log(innerVariable)'가 실행이 되며, 이 때 'outerVariable'은 'outer' 함수의 실행 컨텍스트에 참조된다.
5. 'inner' 함수 실행이 완료가 되고, 'inner' 함수 실행 컨텍스트가 스택에서 제거된다.
6. 'outer' 함수 실행이 완료가 되고, 'outer' 함수 실행 컨텍스트가 스택에서 제거된다.
7. 전역 컨텍스트에서 코드 실행이 종료된다.

위의 내용만 보면 정확하게 이해가 안 될 수 있다. 쉽게 말하면,

 

1. 전역 컨텍스트는 코드가 실행되는 가장 처음의 컨텍스트로, 전역 변수와 전역 함수가 초기화가 된다. 이 컨텍스트도 컨텍스트 실행으로 스택에 쌓인다.
2. 'outer' 함수 실행 컨텍스트는 'outer' 함수가 호출될 때 생성되는 컨텍스트로, 'outer' 함수가 호출되면 'outer' 함수의 실행 컨텍스트가 스택에 쌓이고, 'outerVariable' 변수가 선언되고 값이 할당된다. 따라서, 'outer' 함수 실행 컨텍스트가 스택에 쌓이고 그 후에 'outerVariable' 변수가 스택에 쌓이게 된다.
3. 이 후, 'inner' 함수 실행 컨텍스트가 생성되고 스택에 쌓인다. 'inner' 함수 실행 컨텍스트에서는 'innerVariable' 변수가 선언되고 값이 할당된다. 'inner' 함수 실행 컨텍스트에서 'console.log(outerVariable)'과 'console.log(innerVariable)'이 실행될 때, 'outerVariable'는 'outer' 함수 실행 컨텍스트에서 참조되며 'innerVariable'은 'inner' 함수 실행 컨텍스트에서 참조된다.
4. 'inner' 함수 실행이 완료되고 'inner' 함수 실행 컨텍스트가 스택에서 제거된 후, 'outer' 함수 실행이 완료되고 'outer' 함수 실행 컨텍스트가 스택에서 제거된다.
5. 마지막으로 전역 컨텍스트에서 코드 실행이 종료된다.

즉, 컨텍스트는 함수 호출 시 생성되며, 해당 함수 실행에 필요한 변수와 함수, 실행 순서 등을 관리하는 데 사용된다. 컨텍스트는 스택에 쌓이고 실행이 완료되면 스택에서 제거된다.

 

I am outside!
I am inside!

그래서 결과적으로 실행 결과는 위와 같다.

 

이를 통해 컨텍스트 실행의 흐름을 확인할 수 있다. 각 함수 호출 시 해당 함수의 실행 컨텍스트가 실행이 되고, 실행이 완료가 되면 해당 컨텍스트가 스택에서 제거가 된다. 이렇게 컨텍스트를 관리함으로써 변수와 함수에 접근하고 실행 순서를 제어할 수 있다.