Execution Context

실행 컨텍스트는 Javascript 언어로 작성된 코드를 실행하기 위해 필요한 환경이다.

함수가 호출되면, 새로운 실행 컨텍스트는 생성되어 CallStack 에 쌓이고, 함수 실행이 끝나면 제거된다.

// foo();

function foo() {
		let a= 1
    console.log('foo');
}

function temp() {
	this.b = 1;
}

// 기본바인딩
temp();
console.log()

// 암시적바인딩
const a = {
	temp : temp,
}

a.temp();

// 명시적 바인딩
temp.call(a);

// new
const c = new temp()

생성단계 - EC foo[]

실행단계 - EC 를 이용해서 foo 참조가 가능하다.

위와 예제를 통해 살펴보면, 우선 전역에서 실행되는 환경을 제공하기 위한 Global Context가 CallStack 을 구성한다. 그리고 foo() 함수를 호출하면 foo 함수에 대한 Execution Context 가 쌓이게 되고, 이후 bar() 함수를 위한 실행 컨텍스트도 콜스택에 순차적으로 쌓이게 된다.

실행 컨텍스트가 함수 호출이 발생할 때마다 생성되는 것은 이해가 됐다.

그럼 실행 컨텍스트는 무엇을 위해 필요하고, 왜 함수 호출마다 생성되는 것일까?

이제 하나씩 천천히 살펴보자.

실행 컨텍스트는 무엇을 위해 필요한가

실행 컨텍스트는 세 가지 영역으로 구분된다.

• LexicalEnvironment
• VariableEvironment
• ThisBinding

VariableEvironment는 LexicalEnvironment 과 유사한 기능이므로 LexicalEnvironment만 언급한다.

실행 컨텍스트는 함수 호출마다 생성되므로, LexicalEnvironment는 해당 함수에서 선언된 변수, 내부함수, 파라미터를 저장한다.

function foo(b) {
    var a = 1;
    function bar() {
        var c = 3;
    }

    bar();
}

foo(2);