[JS] Execution Context - 실행 컨텍스트

Execution Context (실행 컨텍스트) 란?

실행 컨텍스트는 JavaScript 코드가 실행되는 환경에서 필요한 정보를 모아놓은 객체입니다. 모든 JavaScript 코드는 실행 컨텍스트 내에서 실행됩니다.
실행 컨텍스트는 변수, 함수 선언, 매개변수, this 값 등과 같은 환경 정보를 가지고 있으며, 코드 실행 중에 해당 정보에 접근할 수 있도록 합니다.

• 실행 컨텍스트가 생성되는 3가지 경우

  • 전역 컨텍스트(Global Execution Context)
    전역 컨텍스트는 자바스크립트 코드의 최상위 수준에서 실행되는 컨텍스트입니다. 스크립트가 로드되면 전역 컨텍스트가 자동으로 생성됩니다. 전역 컨텍스트는 코드의 전역 변수, 전역 함수, 전역 객체를 포함하며, 프로그램의 생명 주기와 관련된 전역 환경을 설정합니다. 전역 컨텍스트는 실행 컨텍스트 스택의 가장 바깥쪽에 위치하며, 다른 컨텍스트가 생성되기 전에 항상 존재합니다.

  • 함수 컨텍스트(Function Execution Context)
    함수 컨텍스트는 함수가 호출될 때마다 생성되는 컨텍스트입니다. 함수 컨텍스트는 해당 함수의 실행에 필요한 모든 변수, 매개변수, 내부 함수 및 변수, this 값 등을 포함합니다. 함수 컨텍스트는 해당 함수의 실행이 완료되면 스택에서 제거됩니다. 함수가 재귀적으로 호출되면 각 호출마다 새로운 함수 컨텍스트가 생성됩니다.

  • Eval() 컨텍스트(Eval Execution Context)
    Eval() 함수는 문자열로 표현된 자바스크립트 코드를 실행하는 데 사용됩니다. Eval() 함수는 전달된 코드를 동적으로 실행하기 때문에, 해당 코드는 Eval() 컨텍스트 내에서 실행됩니다. Eval() 컨텍스트는 전역 컨텍스트와 유사한 방식으로 동작하지만, Eval() 함수 내에서 선언된 변수는 Eval() 컨텍스트 내에서만 유효합니다. Eval() 함수를 사용하는 것은 악성코드 포함 가능성으로 해킹에 위험이 있어 보안과 성능 측면에서 주의해야 하며, 가능하면 다른 대안을 고려하는 것이 좋습니다.

    이러한 컨텍스트들은 실행 컨텍스트 스택(Execution Context Stack)에 저장되며, 현재 실행 중인 컨텍스트는 스택의 맨 위에 위치합니다. 코드 실행 시 컨텍스트가 생성되고 완료되며, 스택을 통해 다음으로 실행될 컨텍스트가 관리됩니다.

그렇다면 스택(stack)과 큐(queue)란?

스택(stack)

JavaScript에서 스택은 후입선출 LIFO ((Last in, First out) 원칙을 기반으로 설계된 자료구조입니다.
접시를 아래서 차곡히 쌓고 위에서 부터 빼는것이 당연하듯이 스택 또한 같은 원리로 작동합니다.

큐(queue)

한편 큐(queue)는 선입선출 FIFO(First in, first out) 원칙으로 만들어진 자료구조입니다.
한쪽 끝에서는 삽입이, 다른 한쪽 끝에서는 삭제 작업이 이루어 집니다.
양쪽이 모두 열려있는 파이프를 떠올리면 됩니다.

스택과 큐 작동 원리 이미지

실행 컨텍스트와 콜 스택 동작과정

//에시 코드
// ------------------- (1)
var a = 1;
function outer() {
  function inner() {
    console.log(a); // undefined
    var a = 3;
   
  }
  inner(); // -------- (2)
  console.log(a); //1
}
outer(); // ---------- (3)
console.log(a); //1

1. 전역 컨텍스트가 생성되고, 변수 a가 선언되어 값 1이 할당됩니다.
2. outer 함수가 호출되면서 outer 실행 컨텍스트가 콜 스택에 추가됩니다.
3. inner 함수가 정의되고, inner 실행 컨텍스트가 outer 실행 컨텍스트 안에 생성되어 콜 스택에 추가됩니다.
4. inner 함수 내부에서 변수 a가 선언되었지만, 아직 값이 할당되지 않았으므로 undefined입니다.
5. 그 후에 a에 값 3이 할당됩니다.
6. console.log(a)를 통해 inner 함수 내부의 a 값인 3이 출력됩니다.
7. inner 실행 컨텍스트가 콜 스택에서 제거됩니다.
8. console.log(a)를 통해 outer 함수 내부의 a 값인 1이 출력됩니다.
9. outer 실행 컨텍스트가 콜 스택에서 제거됩니다.
10. 전역 컨텍스트에서 console.log(a)를 통해 전역 변수 a의 값인 1이 출력됩니다.
11. 프로그램의 실행이 종료됩니다.

위 코드에서 유심히 봐야 될 부분은 inner 함수 내부에서 변수 a가 선언되었지만, 선언 후 값이 할당되기 전에 console.log(a)가 실행되므로 undefined가 출력된다는 점입니다. 이는 자바스크립트의 변수 호이스팅에 의해 발생하는 현상입니다. 호이스팅과 관련된 내용은 다음 글에서 다루도록 하겠습니다.