[JavaScript] ⭐️ 실행 컨텍스트

자바스크립트에서 실행 컨텍스트란 실행할 코드에 제공할 환경정보들을 모아놓은 객체이다. 이를 이해하게 된다면scope, hoisting, closure등 다양한 자바스크립트 동작들을 이해하기 편리할 것이다. 이전에 알아야할 내용이 stack과 queue 라는 개념이 있다.

stack

• 출입구가 하나있는 바구니로 생각하면 쉽다.
• 먼저 넣은 데이터는 나중에 꺼낼 수 있다.

queue

• 양쪽이 모두 열려있는 파이프와 같은 구조이다.
• 먼저 넣은 데이터는 먼저 꺼낼 수 있다.

아래의 코드에서는 콜 스택에 실행 컨텍스트가 어떤식으로 쌓이고 제거되는지 확인한다.

var a = 1;
function outer() {
    function inner() {
        console.log(a); // undefined
        var a = 3;
    }
    inner();
    console.log(a);     // 1
}

outer();
console.log("2");       // 2

// 1. 코드 실행과 동시에 전역 컨텍스트가 콜 스택에 담긴다.
// 2. 순차적으로 코드를 읽어 내려가면서 다음 outer() 함수를 호출.
// 3. 자바스크립트 엔진이 outer()의 환경정보를 수집하여 실행 컨텍스트 생성 후 콜스택에 담는다.
// 4. 전역 컨텍스트 코드를 일시중지하고 맨위에 쌓여있는 outer()함수 내부의 코드들을 순차적으로 실행.
// 5. outer() 내부의 함수인 inner()함수의 실행 컨텍스트가 콜스택 맨위에 담긴다.
// 6. outer 컨텍스트가 일시중지되고 inner() 함수의 코드가 순차적으로 진행.
// 7. inner 함수 내부에서 a 변수에 3이라는 값이 할당되면 inner 함수가 실행종료.
// 8. 종료되면서 inner 실행 콘텍스트가 콜스택에서 제거
// 9. 현재 맨 위에 있는 outer가 있으므로 순차적으로 코드 실행 - 8번째줄 console.log(a);
// 10. outer()함수가 종료되고 "2"를 출력한 후 outer 실행 콘텍스트가 콜스택에서 제거.
// 11. 전역 공간에 더이상 실행할 코드가 없으므로 전역 컨텍스트가 콜 스택에서 제거.
// 12. 프로그램 종료.

📌 참고도서

• 코어 자바스크립트 - 정재남