콜 스택 (Call Stack)과 힙 (Heap)

<JavaScript 메모리 생명 주기>

1. 할당(Allocation): 변수를 선언할 때 메모리가 할당됩니다. JavaScript에서는 이 과정이 자동으로 처리됩니다.
2. 사용(Using): 할당된 메모리를 사용하여 데이터를 저장하거나 읽어옵니다.
3. 해제(Releasing): 더 이상 사용하지 않는 메모리는 해제됩니다. JavaScript에서는 이 과정도 가비지 컬렉션(Garbage Collection)으로 자동 관리됩니다.

<호출 스택 이란?>

여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터를 위한 메커니즘입니다. 현제 어떤 함수가 실행중인지, 그 함수 내에서 어떤 함수가 호출되어야 하는지, 등을 제어합니다. JavaScript 엔진은 단일 호출 스택만 가지고 있으므로 한 번에 하나의 작업만 수행할 수 있습니다. 스크립트를 실행하면 JavaScript 엔진은 코드를 위에서 아래로, 한 줄씩 동기적으로 실행합니다. (먼저 들어온 작업이 나중에 나가는 방식으로 작동 / First in last out)

 

즉, 호출 스택에 마지막으로 추가된 함수가 가장 먼저 반환되며 실행됩니다. 호출 스택이 비워지면 스크립트 실행이 종료됩니다.

 

호출 스택 진행 방식 :

1. greeting() 함수 호출 
   - 호출 스택에 greeting 추가 
   - 호출 스택 리스트 - greeting
2. greeting() 함수 실행
   - greeting 함수 내부에서 sayHi() 함수 호출
3. sayHi() 함수 호출
   - 호출 스택에 sayHi() 추가
   - 호출 스택 리스트 - sayHi - greeting
4. sayHi() 함수 실행 완료
   - 호출 스택에서 sayHi() 제거
   - 호출 스택 리스트 - greeting
5. greeting() 함수 실행 완료
   - 호출 스택에서 greeting 제거 
   - 호출 스택 리스트 - 비어 있

어때해서 보면 빈 호출 스택으로 시작하여, 함수를 호출할 때마다 밑에서 호출 스택을 쌓아 넣고 위에서 부터 스크립트 진행합니다.

 

<참고 할 점>

애플리케이션에 많은 중첩 함수나 재귀 함수가 있다면 호출 스택의 공간을 빠르게 소모하여 오류가 발생할 수 있습니다. 실행 컨텍스트의 수가 스택의 크기를 초과하면 스택 오버플로(Stack Overflow) 오류가 발생합니다.

 

<스택 오버플로 원인들>

• 재귀 함수를 처리할 때 발생하는 문제
• 함수가 여러 번 자기 자신을 호출하면 호출 스택에 다수의 스택 프레임이 생성됩니다. 이로 인해 스택 오버플로가 발생할 수 있으며, 결국 애플리케이션이 중단될 위험이 있습니다
• 범위를 벗어난 연산이 발생할 수도 있습니다

<힙 (Heap)> 

메모리 힙(Heap)은 데이터를 저장하는 공간으로, 메모리 할당이 이루어지는 곳입니다.
힙은 동적 메모리 할당을 위한 공간으로, JavaScript가 객체와 함수를 저장하는 곳입니다. 스택과 달리, 엔진은 이 공간에 고정된 메모리 양을 할당하지 않고, 필요에 따라 더 많은 공간을 할당합니다.

 

참고 자료 :

https://medium.com/@allansendagi/javascript-fundamentals-call-stack-and-memory-heap-401eb8713204

Javascript Fundamentals — Call Stack and Memory Heap

https://levelup.gitconnected.com/understanding-call-stack-and-heap-memory-in-js-e34bf8d3c3a4

Understanding Call Stack and Heap Memory in JS

https://developer.mozilla.org/ko/docs/Glossary/Call_stack

호출 스택 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://www.devlane.com/blog/what-is-call-stack-in-javascript

What is Call Stack in JavaScript?

https://www.linkedin.com/pulse/understanding-javascript-execution-part-2-exploring-call-kadour

Understanding JavaScript Engine (Part 2): Exploring the Components of the Call Stack and Memory Heap