자바스크립트는 함수를 실행하는 동안 스택 프레임(stack frame)이라는 개념을 사용합니다. 스택 프레임은 함수 호출과 실행 정보를 저장하는 자료구조로써, 함수의 실행 과정을 추적할 수 있도록 도와줍니다. 이번 글에서는 자바스크립트 함수의 구동 원리와 스택 프레임에 대해 살펴보겠습니다.

함수 호출과 스택 프레임

자바스크립트에서 함수가 호출되면 해당 함수에 대한 스택 프레임이 생성됩니다. 스택 프레임은 호출된 함수의 실행 정보를 저장하고, 실행이 완료되면 스택에서 제거됩니다. 따라서 함수 호출은 스택 프레임이 생성되고 제거되는 과정을 거치며 진행됩니다.

예를 들어, 다음과 같은 코드가 있다고 가정해봅시다:

function greet(name) {
  console.log("Hello, " + name + "!");
}

function sayHello() {
  let name = "John";
  greet(name);
}

sayHello();

위 코드에서 sayHello 함수가 호출되면 sayHello 함수의 스택 프레임이 생성됩니다. 이후 greet 함수를 호출하는데, 이때 greet 함수의 스택 프레임도 생성됩니다. 이후 greet 함수의 실행이 완료되면 greet 함수의 스택 프레임이 제거되고, 다음으로 sayHello 함수의 실행이 완료되면 sayHello 함수의 스택 프레임도 제거됩니다.

스택 프레임의 구성 요소

스택 프레임은 크게 세 가지 구성 요소로 이루어집니다.

1. Activation Record: 호출된 함수의 지역 변수, 매개 변수, 반환 주소 등의 정보를 저장합니다.
2. Return Value: 함수의 반환 값이 저장됩니다.
3. Caller Information: 호출한 함수에 대한 정보를 포함합니다.

스택 프레임은 이러한 구성 요소들을 저장하여 함수의 실행 정보를 추적하는데 사용됩니다.

재귀 함수와 스택 오버플로우

재귀 함수는 자기 자신을 호출하는 함수입니다. 이때 스택 프레임은 재귀 호출이 계속해서 발생하여 스택에 쌓이게 됩니다. 만약 재귀 호출의 깊이가 깊어지면 스택 프레임이 계속해서 쌓이다가 스택 크기를 초과하게 되는데, 이를 스택 오버플로우(Stack Overflow)라고 합니다. 스택 오버플로우는 재귀 함수를 사용할 때 주의해야 할 중요한 사항 중 하나입니다.

예를 들어, 다음과 같은 재귀 함수가 있다고 가정해봅시다:

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5));

위 코드에서 factorial 함수는 자기 자신을 호출하는 재귀 형태로 구현되어 있습니다. factorial(5)를 호출하면 factorial 함수는 5번 순환적으로 호출되며, 그 과정에서 스택 프레임이 쌓입니다. 마지막으로 n 값이 0이 되면 재귀 호출을 멈추고 스택 프레임이 하나씩 제거되며 반환 값을 계산합니다. 따라서 위 코드는 5 * 4 * 3 * 2 * 1 = 120의 결과를 출력합니다.

결론

자바스크립트 함수 실행 동안 스택 프레임이 중요한 역할을 합니다. 스택 프레임은 함수 호출과 실행 정보를 저장하여 함수의 실행을 관리합니다. 함수 호출이 진행될 때마다 스택 프레임이 생성되고 제거되는데, 이를 통해 함수의 실행 과정을 추적할 수 있습니다. 재귀 함수를 사용할 때는 스택 오버플로우에 유의해야 합니다.