자바스크립트 코드의 실행과정

김보현·2021년 10월 21일

자바스크립트

목록 보기

10/11

Execution Contexts and Call Stack

자바스크립트의 코드가 어떻게 실행되는지 알아보자

우리는 자바스크립트의 코드가 엔진의 Call Stack에서 실행되는 것을 알고 있다.

여기서 좀 더 깊게 들어가보자.

자바스크립트의 코드가 기계어로 컴파일 된다.
Global execution context가 Top-level-code를 위해 생성된다.
- Top-level-code: 함수 밖의 코드들
- Execution context: 자바스크립트를 실행시키기 위한 조각들이 모여있는 환경이다. 코드가 실행되기 위해 필요한 모든 정보를 저장하고 있다.
  피자로 예를 들어보자. 피자를 주문하면 피자박스에 피자와 일회용 나이프, 포크, 등이 같이 배달 될 것이다.
  여기서 피자가 자바스크립트 코드이고, 피자 박스가 피자(자바스크립트 코드)를 먹기위해 필요한 모든 것들을 담고 있는 상자, 즉 execution context이다.
  
  박스는 피자를 먹기 위해 필요한 것들, 나이프, 포크, 영수증등도 같이 가지고 있다.
  
  자바스크립트 프로젝트가 얼마나 크든 프로젝트는 단 하나의 Global Execution context를 가지고 있다.
Top-level-code가 Global execution context안에서 실행된다.
함수가 실행되고 callback함수들은 대기한다.
- 여기서 함수마다 Execution context가 새롭게 생성된다.
- 📍 여기서 생성된 Execution context들이 모여 Call Stack을 생성한다.

Execution Context in detail

Execution Context안에는 어떤 것 들이 들어 있을까?

Variable Environment
- let, const, var 선언들
- 함수들
- arguments object
Scope chain
this keyword

위의 요소들은 creation phase, 즉 실행 바로 전에 생성된다.

Creation phase

const name = 'BoHyeon';

const first = function(){
    let a =1;
    const b = second(7,9);
    a = a + b;
    return a;
}

const second = function(x,y){
    var c = 2;
    return c;
}
const x = first();

여기서 Global execution context는

name = 'BoHyeon'
first = <function>
second = <function>
x = <unknown> // first()가 실행되지 않았기 때문에 알 수 없다.

위에서 보듯이 기술적으로 execution context 안의 값은 실행됬을 때 알 수 있다.

하지만 여기서는 설명을 위해 임의로 작성하겠다.

first()의 execution context

a = 1
b = <unknown> //실행되지 않았기 떄문에 알 수 없다.

second()의 execution context

c = 2
arguments = [7, 9] // second가 호출 됬을때 넘어온 arguments들의 값들을 배열로 가지고 있다.

여기서는 코드의 양이 적어서 매우 간단하다.

하지만 만약 100개의 함수들이 있어서 100개의 execution context가 생성된다면 어떻게 엔진은 함수를 호출해야 하는 순서를 추적할까?
그리고 지금 어떤함수를 실행하고 있는지 어떻게 알 수 있을까?

바로 여기서 Call Stack이 등장한다.

Call Stack

현제 실행 단계를 추적하기 위해 Execution context들이 Stack되는 곳

가장 위에 있는 Execution context가 현재 실행되고 있는 함수이다.

실행이 끝나면 Execution context는 Call stack에서 제거 되고 그 밑의 Execution context가 실행된다.

다시 위의 코드를 예로 들어보자.

코드들은 컴파일되서 실행을 시작했다고 하자.

const name = 'BoHyeon';

const first = function(){
    let a =1;
    const b = second(7,9);
    a = a + b;
    return a;
}

const second = function(x,y){
    var c = 2;
    return c;
}
const x = first();

Global execution context가 생성된다
Global execution context가 Call Stack로 이동한다.
```
const x = first();
```
first()함수가 호출 된다.
first()의 execution context가 생성된다.
first()의 execution context가 Call Stack으로 이동해 Global execution context위에 자리한다.
```
const b = second(7,9);
```
second(7,9)가 호출 된다.

여기서 중요한 것은 first()의 실행은 잠시 중지된다. (왜냐하면 자바스크립트는 하나의 실행 쓰레드만 가지고 있기 때문이다)
second()의 execution context가 생성된다.
second()의 execution context가 Call Stack으로 이동해 first()의 execution context위에 자리한다.
second()의 실행이 끝나면 second()의 execution context는 Call Stack에서 pop 되고 중지되었던 first()를 이어 실행한다.
이어 first()의 실행이 끝나면 first()의 execution context도 Call Stack에서 pop 된다.
브라우저 종료등의 프로그램 종료 전까지 Call Stack은 Global execution context에 머문다.
프로그램이 종료되면 비로서 맨 아래에 있었던 Global execution context 또한 pop된다.

김보현

안녕하세요 김보현입니다.

이전 포스트

자바스크립트 엔진, 런타임

다음 포스트

자바스크립트 코드의 실행과정