[JavaScript] 실행 컨텍스트(Execution Context)

실행 컨텍스트(Execution Context)는 JavaScript에서 중요한 개념으로 코드가 실행되는 문맥 즉, 코드가 실행되는 환경을 의미한다. 이 글에서는 실행 컨텍스트의 개념과 동작 방식을 살펴보고, JavaScript 코드가 어떻게 실행되는지 단계별로 설명한다.

실행 컨텍스트란?

실행 컨텍스트는 JavaScript 코드가 실행되는 환경을 의미한다. 모든 JavaScript 코드는 실행될 때 실행 컨텍스트 안에서 실행된다. 실행 컨텍스트는 다음과 같은 중요한 정보들을 관리한다:

• 변수와 함수 선언
• this의 값
• 스코프 체인과 외부 환경 참조

실행 컨텍스트의 종류

JavaScript에서 실행 컨텍스트는 크게 두 가지 종류가 있다:
1. 글로벌 실행 컨텍스트(GEC): 코드가 처음 실행될 때 생성되며 전역 스코프에서 선언된 변수와 함수를 관리한다.
2. 함수 실행 컨텍스트(FEC): 함수가 호출될 때마다 생성되며 함수 내부에서 선언된 변수와 함수, 그리고 this의 값을 관리한다.

실행 컨텍스트의 생성 과정

실행 컨텍스트는 코드가 실행될 때 두 가지 주요 단계로 나뉜다: 생성 단계와 실행 단계.

1) 생성 단계 (Creation Phase)

실행 컨텍스트가 생성될 때, JavaScript 엔진은 아래와 같은 작업을 수행한다:

• 변수 객체(Variable Object) 생성: 변수, 함수 선언 등을 메모리에 할당한다. 이때, var로 선언된 변수는 undefined로 초기화된다.
• 스코프 체인(Scope Chain) 설정: 현재 실행 중인 코드에서 접근할 수 있는 변수나 함수를 결정하는 스코프 체인이 설정된다.
• this 바인딩: 실행 컨텍스트 내에서 this 키워드가 참조할 값을 결정한다.

2) 실행 단계 (Execution Phase)

생성 단계가 끝나면, 실제 코드가 실행된다. 이때 변수에 값이 할당되고 함수가 호출되며 코드가 한 줄씩 실행된다.

실행 컨텍스트 스택

JavaScript는 싱글 스레드 언어로 코드가 순차적으로 실행된다. 실행 컨텍스트는 스택 구조로 관리되며 이를 실행 컨텍스트 스택(Execution Context Stack)이라고 한다. 코드가 실행되면 실행 컨텍스트가 스택에 쌓이고 코드가 종료되면 스택에서 제거된다.

실행 컨텍스트 스택의 동작 과정

1. 자바스크립트 엔진이 처음 시작할 때, 전역 실행 컨텍스트가 스택에 쌓인다.
2. 함수가 호출될 때마다 새로운 함수 실행 컨텍스트가 스택에 쌓인다.
3. 함수 실행이 완료되면 해당 함수의 실행 컨텍스트가 스택에서 제거된다.
4. 전역 실행 컨텍스트는 애플리케이션이 종료될 때까지 남아 있다.

function foo() {
  console.log('foo 실행');
}

function bar() {
  foo();
  console.log('bar 실행');
}

bar();

실행 과정:

1. 전역 실행 컨텍스트가 스택에 쌓인다.
2. bar() 함수가 호출되면 bar의 실행 컨텍스트가 스택에 추가된다.
3. bar 함수 내부에서 foo() 함수가 호출되면 foo의 실행 컨텍스트가 추가된다.
4. foo 함수가 실행을 마치면 foo의 실행 컨텍스트가 스택에서 제거된다.
5. bar 함수가 실행을 마치면 bar의 실행 컨텍스트가 스택에서 제거된다.
6. 모든 함수가 실행을 마치고 나면 전역 실행 컨텍스트만 남게 된다.

실행 컨텍스트와 스코프

실행 컨텍스트는 스코프(Scope)와 밀접한 관계가 있다. 스코프는 코드에서 변수와 함수에 접근할 수 있는 유효 범위를 정의한다. 함수 실행 컨텍스트는 자신의 스코프와 외부 환경 참조를 통해 상위 스코프의 변수에도 접근할 수 있다.

var x = 10;

function outer() {
  var y = 20;
  
  function inner() {
    console.log(x + y); // 10 + 20 = 30
  }
  
  inner();
}

outer();

스코프 체인

inner() 함수는 자신의 스코프에서 y를 찾고, outer()의 스코프에서 y = 20을 찾는다. 또한 x는 전역 스코프에서 참조되어 x = 10 값을 사용하게 된다. 이렇게 실행 컨텍스트는 스코프 체인을 통해 변수를 찾는다.

요약

• 실행 컨텍스트는 JavaScript 코드가 실행되는 환경으로, 전역 컨텍스트와 함수 컨텍스트로 구분된다.
• 실행 컨텍스트는 생성 단계와 실행 단계로 나뉘며 변수 및 함수 선언, this 바인딩, 스코프 체인 설정 등이 이루어진다.
• 실행 컨텍스트 스택을 통해 JavaScript는 코드 실행 순서를 관리하며 함수 호출과 종료에 따라 컨텍스트가 스택에 쌓이고 제거된다.
• 실행 컨텍스트는 스코프 체인을 통해 상위 스코프의 변수에 접근할 수 있다.

실행 컨텍스트는 JavaScript의 핵심 개념 중 하나로 함수 호출과 스코프 체인, this 바인딩 등을 이해하는 데 중요한 역할을 한다. 이 개념을 잘 이해하면 JavaScript 코드의 실행 흐름을 더 깊이 있게 이해할 수 있다.