Call Stack

콜 스택(Call Stack = 호출 스택)

자바스크립트는 단일 스레드 프로그래밍 언어로, 자바스크립트 엔진은 하나의 콜 스택을 가지는 싱글 스레드

하나의 콜 스택을 가진다는 뜻은 한 번에 하나의 일(Task)만 처리할 수 있다는 뜻

 

콜 스택은 함수 호출과 관련된 정보를 저장하는 스택 자료구조

스택이라는 이름에서 알 수 있듯 후입선출(LIFO, Last In First Out)으로 동작함

즉, 최근에 호출된 함수(가장 나중에 호출된 함수)가 가장 먼저 완료된다는 의미

 

자바스크립트는 함수 호출을 스택에 추가(Push)하고 완료되면 스택에서 제거(Pop)

이렇게 스택에 쌓이는 함수 호출은 순차적으로 실행되며, 이것이 자바스크립트의 실행 컨텍스트를 관리하는 중요한 부분

 

호출 스택의 각 항목을 스택 프레임이라고 함

▶ 콜 스택의 목적

콜 스택의 주요 목적은 함수가 호출되는 순서를 추적하고 각 함수 실행의 컨텍스트를 관리하는 것

• 함수 반환 주소 저장
  • 함수가 호출되면 해당 반환 주소가 호출 스택에 푸시
  • 이 주소는 함수 실행이 완료되면 제어권을 반환할 위치를 아는 데 사용
• 지역 변수 및 인수 관리
  • 각 함수 실행에는 고유한 지역 변수 및 인수 세트가 있음
  • 호출 스택은 필요할 때 액세스할 수 있도록 각 함수 실행에 대한 이러한 변수와 인수를 추적
• 재귀 처리
  • 재귀는 함수가 자신을 호출하는 기술
  • 호출 스택은 중첩된 함수 호출을 추적하고 모든 중첩된 함수의 실행이 완료되면 프로그램이 재귀 스택을 해제할 수 있도록 허용하므로 재귀를 처리하는 데 필수적
• 메모리 할당 및 할당 취소 관리
  • 호출 스택은 현재 활성화된 기능과 실행이 완료된 기능을 추적하여 메모리 할당 및 할당 취소를 관리하는 데 도움이 됨
  • 이 정보는 더 이상 필요하지 않은 사용되지 않은 메모리를 수집하는 데 사용될 수 있음

 

▶ 동작방식

function f1() {
    console.log('Hi by f1!');
}
 
function f2() {
    f1();
    console.log('Hi by f2!');
}
 
f2();

 

1단계: 코드가 메모리에 로드되면 전역 실행 컨텍스트가 스택에 추가

 

2단계:  f2 () 함수가 호출되고 f2() 의 실행 컨텍스트가 스택에 추가

 

3단계: f2() 의 실행이 시작되고 실행 중에 f1() 함수가 f2() 함수 내에서 호출

이로 인해 f1() 의 실행 컨텍스트가 호출 스택에 추가

 

4단계:  이제 f1() 함수가 실행되기 시작합니다. console.log() 메서드 의 새 스택 프레임이 스택에 제거

 

5단계: console.log() 메서드가 실행 되면 "Hi by f1"이 인쇄된 다음 스택에서 제거

실행 컨텍스트는 함수로 돌아가고 이제 f1() 함수에 남아 있는 코드 줄이 없으므로 결과적으로 호출 스택에서 제거

 

6단계: "Hi by f2" 줄을 인쇄하는console.log() 메서드 에서도 비슷한 일이 발생하고 마지막으로 함수 f2()가 완료되어 스택에서 제거

 

▶ 예외 처리 시 스택의 동작

function foo() {
    throw new Error('SessionStack will help you resolve crashes :)');
}
function bar() {
    foo();
}
function start() {
    bar();
}
start();

 

크롬에서 실행된다면 아래와 같은 순서로 에러가 발생

 

 

▶ 스택 오버플로우

스택의 사이즈를 초과 했을 때 발생하는 오류

스택 오버플로우는 쉽게 일어날 수 있는 일로 재귀를 호출했을 때 쉽게 확인 가능함

 

function foo() {
    foo();
}
foo();

 

위의 예시는 마지막 줄에서 foo() 함수가 실행되는데, foo() 함수의 내부를 보면 종료 조건 없이 자신을 계속해서 호출하게 됨(함수의 스택 프레임이 계속해서 호출 스택에 쌓이게 됨)

어떠한 시점에서 호출 스택의 함수 호출 수가 호출 스택의 실제 크기를 초과(콜 스택의 최대치는 브라우저마다 다름)하게 되고, 브라우저는 오류를 발생시키는 것으로 함수를 종료 시킴

 

 

 

참고

Javascript - 콜스택(Call Stack)

Javascript 호출 스택 (call stack)

What is Call Stack in JavaScript ?

JavaScript의 호출 스택이란 무엇입니까?