[Javascript] 자바스크립트의 실행 컨텍스트

 

 

 

1. 실행 컨텍스트란?

실행컨텍스트는 코드가 실행될 때 생성되는 환경을 의미한다. 실행 컨텍스트는 코드의 실행을 관리하고 변수, 함수, 스코프 등의 코드가 실행되기 위해 필요한 정보를 담고 있는 객체이다. 크게 세 가지 타입으로 구분된다.

실행 컨텍스트는 실행 가능한 코드 블록(전역 코드, 함수 코드, eval 코드 등)이 실행될 때 생성되며, 해당 코드 블록 내에서 사용되는 변수 및 함수 등의 정보를 담고 있는데 변수 객체, 스코프체인, this 등의 정보를 가지고 있다. 변수 객체는 해당 컨텍스트의 변수, 함수 선언, 인자 등을 포함하고 있으며, 스코프 체인은 실행 컨텍스트의 스코프를 구성하는 변수 및 함수에 접근할 때 사용되는 스코프의 집합이다. this는 함수가 호출될 때 설정되는 특별한 값으로, 함수의 호출 방식에 따라 달라진다.

실행 컨텍스트는 스택 자료구조로 관리되며, 현재 실행 중인 컨텍스트는 스택의 맨 위에 위치한다. 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고, 함수의 실행이 종료되면 해당 컨텍스트가 스택에서 제거된다.

 

1) 전역 실행 컨텍스트

코드 실행이 시작될 때 생성되는 최상위 실행 컨텍스트로 전역 변수 및 함수, 전역 객체 등을 포함하고 있다.

2) 함수 실행 컨텍스트

함수가 호출될 때마다 생성되는 실행 컨텍스트로 각 함수마다 고유한 실행 컨텍스트가 생성되며, 함수의 인자(parameter), 지역 변수, arguments 객체 등을 포함한다.

3) Eval 실행 컨텍스트

eval() 함수를 실행할 때 생성되는 실행 컨텍스트입니다. eval() 함수는 문자열로 표현된 javascript를 실행한다.

 

실행 컨텍스트를 이해하기 위한 예제

function greet(name) {
    var greeting = "Hello";
    console.log(greeting + ", " + name + "!");
}

greet("John");

위 코드의 마지막 줄에서  greet함수를 호출했을 때 진행되는 과정은 아래와 같다.

1. 함수 호출: greet("John")을 호출하면 새로운 실행 컨텍스트가 생성되고, 스택의 맨 위에 쌓인다.
2. 변수 객체 생성: 새로운 실행 컨텍스트 내에 변수 객체가 생성되어야 하는데 여기에는 name 파라미터와 greeting 변수가 담겨 있다. name은 "John"이 될 것이고, greeting은 "Hello"로 초기화됩니다.
3. 스코프 체인 생성: 해당 실행 컨텍스트의 스코프 체인은 변수 객체 자체로 형성된다. 함수의 외부 스코프는 전역 스코프일 것이다.
4. 코드 실행: 함수 안의 코드가 실행됩니다. console.log가 실행되면서 "Hello, John!"이 출력된다.
5. 실행 종료 및 컨텍스트 제거: 함수의 실행이 종료되면 해당 실행 컨텍스트가 스택에서 제거다.

이러한 과정을 코드 실행의 시점에서 시각화하면 다음과 같다:

1. 전역 컨텍스트 생성
2. greet 함수 호출
   - 새로운 실행 컨텍스트 생성
     - 변수 객체 생성 (name: "John", greeting: "Hello")
     - 스코프 체인 생성
   - 코드 실행
     - "Hello, John!" 출력
   - 실행 종료 및 컨텍스트 제거
3. 전역 컨텍스트에서 실행 계속

이런 식으로 함수가 호출될 때마다 실행 컨텍스트가 생성되고, 함수 실행이 종료되면 해당 컨텍스트가 스택에서 제거된다.

 

2. Javascript 엔진이 코드를 실행하는 과정

자바스크립트 엔진은 코드를 실행할 때 다음과 같은 과정을 따른다. 이 과정에서 실행 컨텍스트는 코드 실행의 관리와 각 실행 단위의 환경을 설정하는 데 중요한 역할을 한다.

1) 전역 코드 실행

• 스크립트 파일이나 HTML 문서에 포함된 전역 코드가 실행된다.
• 이때, 전역 실행 컨텍스트가 생성되며, 전역 변수 객체와 전역 스코프 체인이 설정된다.

2) 함수 호출

• 함수가 호출되면 새로운 실행 컨텍스트가 생성된다.
• 이 새로운 실행 컨텍스트에는 함수의 지역 변수, arguments 객체, 함수의 스코프 체인 등이 설정된다.

3) 변수 및 함수 선언 처리

• 실행 컨텍스트가 생성될 때, 변수와 함수 선언을 처리한다.
• 변수 선언은 변수 객체에 등록되고, 함수 선언은 해당 함수의 이름과 참조가 변수 객체에 저장된다.

4) 코드 실행

• 실행 컨텍스트가 설정되고 변수 및 함수 선언이 처리되면 코드 실행이 시작된다.
• 스코프 체인을 사용하여 변수에 접근하고 함수를 호출한다.

5) 재귀적 함수 호출 및 중첩 실행 컨텍스트

• 함수 내에서 다른 함수가 호출되면 새로운 실행 컨텍스트가 생성되며, 이것은 실행 스택에 쌓인다.
• 이러한 방식으로 함수 호출이 중첩될 때마다 새로운 실행 컨텍스트가 생성되고 실행 스택에 추가된다.

6) 코드 실행 완료 및 실행 컨텍스트 제거

• 코드 실행이 완료되면 해당 실행 컨텍스트가 실행 스택에서 제거된다.
• 함수가 반환되거나 예외가 발생하면 실행 컨텍스트가 즉시 제거된다.

1.  

 

이러한 과정을 통해 자바스크립트 엔진은 코드를 실행하고 실행 중에 필요한 정보를 실행 컨텍스트에 유지한다. 실행 컨텍스트는 스택 자료구조로 관리되므로 현재 실행 중인 컨텍스트가 항상 스택의 맨 위에 위치하여 제어 흐름을 유지한다.