자바스크립트 엔진은 자바스크립트 코드를 어떻게 실행시킬까?

자바스크립트 엔진은 자바스크립트 코드를 어떻게 실행시킬까요?

자바스크립트의 실행 컨텍스트라는 개념을 알고 있다면, 이를 이해할 수 있습니다. 실행 컨텍스트에 대해 알아보겠습니다.

실행 컨텍스트란
실행 컨텍스트는 영어로 Execution Context다. 직역하면 실행 문맥입니다.
실행 문맥? 한국어로 들어봐도 잘 와닿지 않는데요, 그럼 이 글을 계속해서 읽어보겠습니다.

자바스크립트 엔진
먼저 브라우저가 자바스크립트 코드를 어떻게 실행하는지 알아보겠습니다. 자바스크립트는 "자바스크립트 엔진"이 있는 곳에서 동작합니다. 자바스크립트 엔진이 바로 자바스크립트 코드를 실행하게 도와주는 역할을 하는 녀석이고, 우리가 사용하고 있는 브라우저에는 이 자바스크립트 엔진이 있기 때문에 자바스크립트를 실행할 수 있습니다.

그렇다면 자바스크립트 엔진은 자바스크립트 코드를 어떻게 실행시킬까요?

자바스크립트 코드를 실행하기 위해서는 변수, 스코프, 함수, this 등의 정보들을 알고 있어야 합니다. 이 정보들이 들어있는 객체가 바로 실행 컨텍스트입니다. 한마디로 정리하면, 실행 컨텍스트는 자바스크립트 코드를 실행하기 위해 필요한 여러 정보들을 모아 놓은 객체입니다.

실행 컨텍스트와 콜스택
그럼 이 실행 컨텍스트는 언제 만들어지고, 자바스크립트 엔진은 이 실행 컨텍스트에 있는 여러 정보들을 어떻게 가져올까요?
먼저 실행컨텍스트가 언제 생성되고 종료되는지 알아보겠습니다.

실행 컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트로 분류할 수 있습니다. 

전역 실행 컨텍스트는 자바스크립트 코드가 실행되는 순간에 바로 생성되고, 더 이상 실행할 코드가 없다면 전역 실행 컨텍스트는 종료됩니다. 함수 실행 컨텍스트 역시, 함수가 호출될 때 생성되고 함수가 종료되면 함수 실행 컨텍스트가 종료됩니다.

let num = 10;

function outer() {
    console.log(num); // 첫 번째

    function inner() {
        let num = 25;
        console.log(num); //두 번째
    }

    inner();
    console.log(num); //세 번째
}

outer();
console.log(num); // 네 번쨰

위 코드가 실행되는 순서와 함께 실행 컨텍스트가 생성되고 종료되는 과정을 자세하게 알아볼게요. 

코드를 실행하면 주석에 작성된 순서대로 10, 25, 10, 10이 출력됩니다. 이 순서대로 코드가 실행되는 이유는 실행 컨텍스트가 생성되고 종료되는 과정으로 설명 가능합니다.

코드가 실행되면 전역 실행 컨텍스트가 생성됩니다. 그 다음 코드의 흐름 상 outer 함수가 호출됩니다. outer 함수가 호출되면, 10이 출력되고 inner 함수가 호출됩니다. inner 함수가 호출되면 inner 함수 실행 컨텍스트가 생성되고 inner 함수 내부에 작성된 console.log를 통해 숫자 25가 출력됩니다. inner 함수 내부의 모든 코드들이 실행된 다음 inner 함수가 종료되어 inner 함수 실행 컨텍스트가 종료됩니다. 

종료 이후에는 다시 outer 함수 실행 컨텍스트로 돌아가서 outer 함수 내부의 console.log가 실행되어 숫자 10이 출력됩니다. 마찬가지로 outer 함수가 종료되어 outer 함수 실행 컨텍스트가 종료되고, 전역에 작성된 마지막 console.log를 통해 숫자 10이 출력됩니다. 

실행해야 될 남은 코드가 없기 때문에 전역 실행 컨텍스트도 종료되고 코드가 종료됩니다. 이 과정을 그림으로 나타내보면 다음과 같습니다.

그림을 보면 가장 마지막에 들어온 inner 함수 실행 컨텍스트가 가장 먼저 종료되어 사라지고, 가장 처음에 들어온 전역 실행 컨텍스트가 제일 마지막에 사라집니다. 이러한 형태를 "스택"이라고 부르고, 스택의 형태로 함수의 호출을 기록하고 실행 컨텍스트를 저장하는 자료구조를 "콜스택"이라고 부릅니다. 

자바스크립트는 실행 컨텍스트를 콜스택에 담아 관련 코드들을 실행하고, 코드의 순서와 환경을 보장합니다. 자바스크립트 엔진은 이 콜스택에 담긴 실행 컨텍스트들을 통해 자바스크립트 코드를 실행합니다.