js 실행 컨텍스트 와 콜 스택

 

JavaScript의 실행 컨텍스트(Execution Context)와 콜 스택(Call Stack)은
 JavaScript의 동작 방식을 이해하는 데 중요한 개념입니다.

 

 

 

실행 컨텍스트 (Execution Context)
실행 컨텍스트는 JavaScript 코드가 실행되는 환경을 나타내는 객체입니다.

 

변수 객체 (Variable Object): 현재 실행 컨텍스트에서 사용 가능한 모든 변수와 함수 선언을 포함합니다. 

이는 함수의 매개변수, 지역 변수, 그리고 함수 내에서 선언된 모든 변수들을 포함합니다.

스코프 체인 (Scope Chain): 현재 컨텍스트에서 접근할 수 있는 변수의 범위를 결정합니다. 

스코프 체인은 현재 실행 컨텍스트의 변수 객체와 외부 컨텍스트의 변수 객체를 연결하여, 

변수에 접근할 수 있는 경로를 제공합니다.

this 값: 현재 실행 컨텍스트에서의 this 키워드의 값을 정의합니다. 

이는 함수가 호출되는 방식에 따라 달라질 수 있습니다.

 

콜 스택 (Call Stack)

콜 스택은 현재 실행 중인 실행 컨텍스트의 목록을 관리하는 데이터 구조입니다. 

JavaScript는 단일 스레드 언어이므로, 한 번에 하나의 실행 컨텍스트만 실행할 수 있습니다.

 

푸시 (Push): 함수가 호출되면, 해당 함수의 실행 컨텍스트가 콜 스택의 맨 위에 푸시됩니다. 

이때, 함수의 매개변수와 지역 변수, 그리고 this 값이 설정됩니다.

팝 (Pop): 함수의 실행이 완료되면, 해당 실행 컨텍스트가 콜 스택에서 팝됩니다. 

이때, 제어는 이전 실행 컨텍스트로 돌아갑니다.

스택 오버플로우: 콜 스택의 깊이가 너무 깊어지면(예: 무한 재귀 호출), 

스택 오버플로우가 발생하여 프로그램이 중단됩니다.

 

예시

function firstFunction() {
    secondFunction();
    console.log("First Function");
}

function secondFunction() {
    console.log("Second Function");
}

firstFunction();

 

firstFunction이 호출되면, firstFunction의 실행 컨텍스트가 콜 스택에 푸시됩니다.
secondFunction이 호출되면, secondFunction의 실행 컨텍스트가 콜 스택에 푸시됩니다.
secondFunction의 실행이 완료되면, 해당 컨텍스트가 팝되고, 제어가 firstFunction으로 돌아갑니다.
firstFunction의 나머지 코드가 실행되고, 해당 컨텍스트가 팝됩니다.