execution context와 call stack을 설명해 주세요

call-stackscope-chain

execution context와 call stack을 설명해 주세요

예상 시간: 6분

30초 답변

execution context는 JavaScript 코드가 실행될 때 필요한 환경입니다. 전역 코드가 실행되면 global execution context가 만들어지고, 함수가 호출될 때마다 함수 execution context가 새로 만들어져 call stack에 올라갑니다. 각 context에는 변수 환경, lexical environment, this binding 같은 정보가 들어갑니다.

call stack은 이런 실행 context를 쌓아두는 구조이고, 현재 실행 중인 함수가 끝나면 stack에서 제거됩니다. 그래서 재귀가 너무 깊어지면 call stack이 넘쳐서 stack overflow가 발생할 수 있습니다.

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

execution context는 언제 만들어지나요?

전역 코드를 평가할 때 global execution context가 먼저 만들어집니다. 그 뒤 함수가 호출될 때마다 새로운 function execution context가 만들어집니다. 함수 선언만으로 매번 context가 만들어지는 것은 아니고, 실제 호출 시점에 만들어진다고 보는 것이 중요합니다.

핵심은 함수 정의 시점과 함수 호출 시점을 구분하는 것입니다.

stack overflow는 왜 발생하나요?

함수가 끝나기 전에 계속 새로운 함수 호출이 쌓이면 call stack이 비워지지 못합니다. 재귀 종료 조건이 없거나 너무 깊은 재귀가 대표적인 예입니다.

function loop() {
  loop();
}
 
loop();

이 코드는 매번 새로운 execution context를 만들지만 빠져나오지 못하기 때문에 stack overflow가 발생합니다.

부가 설명

function first() {
  second();
}
 
function second() {
  console.log("run");
}
 
first();

처음에는 전역 execution context가 stack에 있습니다. first()가 호출되면 first의 context가 올라가고, 그 안에서 second()가 호출되면 second의 context가 한 번 더 올라갑니다. second가 끝나면 빠지고, 그 다음 first가 끝나면서 빠집니다.

중요한 점은 call stack이 함수 호출 순서를 기억하는 구조라는 것입니다. 비동기 callback이 나중에 실행되는 것도 결국 실행 시점에는 call stack에 올라와야 합니다.

Execution context는 변수들이 실제로 저장되는 곳이라기보다, 현재 코드가 어떤 scope에서 실행되는지, 어떤 식별자를 참조할 수 있는지, this가 무엇을 가리키는지 같은 실행 정보를 묶은 단위에 가깝습니다.

Execution context는 hoisting, closure, scope chain과 연결됩니다. 함수가 호출될 때 execution context가 생기고, 그 context가 만들어질 때 lexical environment가 연결되기 때문에 closure가 가능해집니다.

한 줄 정리

execution context는 코드 실행에 필요한 환경이고, call stack은 함수 호출로 생긴 context를 쌓아 실행 순서를 관리하는 구조입니다.