[JS] 실행 컨텍스트

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심

: 자바스크립트가 스코프를 기반으로 식별자와 바인딩 값을 관리하는 방식 및 호이스팅, 클로저 등의 동작 방식 이해가 가능하다.

 

• 소스코드의 타입

전역 코드(global code)	전역에 존재하는 코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않음
함수 코드(function code)	함수 내부에 존재하는 코드. 함수 내부에 중첩된 내부 코드는 포함되지 않음
eval 코드(eval code)	빌트인 전역 함수인 eval 함수(strict mode 스코프)에 인수로 전달되어 실행되는 코드
모듈 코드(module code)	모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않음

 

• 실행 컨텍스트의 실행 순서(스택)

1. 전역 코드 평가

2. 전역 코드 실행

3. 함수 코드 평가

4. 함수 코드 실행

const x = 1;

function foo()
{
	const y = 2;
    console.log('foo');
    
    function bar()
    {
    	const z = 3;
        console.log('bar');
    }
    bar();
}

foo();

 

위 코드를 기준으로 실행 컨텍스트 스택은 다음과 같다.

 

1. 전역 실행 컨텍스트

: x, foo() 등록 및 foo 호출

 

2. 전역 실행 컨텍스트 -> foo 함수 실행 컨텍스트

: foo 함수 실행 및 전역 실행 중지

-> 지역변수 y와 중첩함수 bar()가 foo() 함수 실행 컨텍스트에 등록

-> y값 할당, console.log 호출 후 bar() 호출

 

3. 전역 실행 컨텍스트 -> foo 함수 실행 컨텍스트 -> bar 함수 실행 컨텍스트

: bar 호출 및 foo 함수 실행 중지

-> z가 bar 함수 실행 컨텍스트에 등록

-> z 할당, console.log 호출

 

4. 전역 실행 컨텍스트 -> foo 함수 실행 컨텍스트

: bar() 종료 . 후다시 foo()로 제어권 이동

 

5. 전역 실행 컨텍스트

: foo() 종료, 전역 실행 컨텍스트로 제어권 이동

 

6. end