자바스크립트 함수 구동 원리와 스택 프레임 (Function Execution Mechanism and Stack Frames)

10 Sep 2023

javascript

자바스크립트는 동적이고 유연한 언어이며, 함수는 자바스크립트 프로그램의 핵심 구성 요소입니다. 이번 글에서는 자바스크립트에서 함수가 동작하는 방식 및 그와 관련된 스택 프레임에 대해 알아보겠습니다.

함수 실행 메커니즘 (Function Execution Mechanism)

자바스크립트에서 함수를 호출하려면 다음과 같은 단계를 거칩니다.

함수 호출: 함수를 호출하는 코드를 실행합니다. 이때, 함수의 매개변수와 함께 호출 정보가 메모리에 저장됩니다.
함수 생성: 호출된 함수의 실행 컨텍스트(execution context)가 생성됩니다. 실행 컨텍스트에는 함수가 실행되기 위해 필요한 정보, 변수, 매개변수 등이 저장됩니다.
변수 및 매개변수 할당: 함수 내의 변수와 매개변수가 할당됩니다. 이때, 변수와 매개변수는 메모리에 저장되며, 초기값 또는 인자 값으로 초기화됩니다.
함수 실행: 함수 내의 코드 블록이 실행됩니다. 이때, 함수는 정의된 로직에 따라 동작하고, 필요한 데이터를 사용하여 계산 또는 처리합니다.
리턴 값 반환: 함수가 값을 반환하는 경우, 해당 값을 리턴(return)합니다. 이때, 반환된 값은 호출된 곳으로 되돌아갑니다.
함수 종료: 함수가 종료되면, 실행 컨텍스트는 메모리에서 제거됩니다. 이로써 함수의 실행은 완료되고, 호출된 위치로 제어가 이동합니다.

스택 프레임 (Stack Frames)

자바스크립트에서 함수가 실행될 때, 스택 프레임(stack frame) 개념을 사용합니다. 스택 프레임은 호출된 함수의 실행 컨텍스트를 저장하는 데이터 구조로, 한 번에 하나의 함수만이 실행될 수 있도록 제어합니다.

함수가 호출될 때마다 스택 프레임이 생성되고, 스택 프레임은 스택 구조로 관리됩니다. 가장 최근에 호출된 함수의 스택 프레임이 제일 위에 있으며, 이전에 호출된 함수들의 스택 프레임이 순차적으로 아래에 위치합니다.

함수 실행이 완료되면, 해당 함수의 스택 프레임은 메모리에서 제거되고, 바로 이전에 호출된 함수의 스택 프레임으로 제어가 이동합니다. 이 과정을 함수 호출 스택(call stack)이라고도 합니다.

함수가 재귀적으로 호출되는 경우, 함수 호출 스택이 계속해서 쌓이게 됩니다. 이렇게 스택 프레임이 쌓이는 과정을 잘 관리하지 않으면, 스택 오버플로우(stack overflow) 오류가 발생할 수 있습니다.

예제 코드

다음은 자바스크립트에서 함수 실행 메커니즘과 스택 프레임을 보여주는 간단한 예제 코드입니다.

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

function sayHello() {
  greet("John");
}

sayHello();

위의 예제 코드는 sayHello 함수가 호출되면서 greet 함수도 호출됩니다. 이때, sayHello 함수의 실행 컨텍스트와 greet 함수의 실행 컨텍스트가 각각 스택 프레임에 저장됩니다.

콘솔에 출력 결과는 다음과 같이 나타납니다.

Hello, John!

sayHello 함수가 호출되면서 greet 함수가 실행되고, name 매개변수에 “John”이 전달되어 값을 출력합니다. 이후, greet 함수의 실행 컨텍스트가 스택에서 제거되고, sayHello 함수의 실행 컨텍스트만 남게 됩니다.

이번 글에서는 자바스크립트 함수의 실행 메커니즘과 스택 프레임에 대해 알아보았습니다. 자바스크립트를 이해하는데 있어서 함수의 동작 방식을 이해하는 것은 매우 중요합니다. 함수가 동작하는 원리를 이해하고, 스택 프레임을 관리하는 방법을 익히면 자바스크립트 프로그래밍에 대한 이해도를 높일 수 있습니다.