자바스크립트의 콜스택과 힙 심층 분석
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
자바스크립트 개발자 (중급~고급), 메모리 관리 및 성능 최적화에 관심 있는 개발자
핵심 요약
- 콜스택은 LIFO 원칙에 따라 실행 컨텍스트를 관리하며, 재귀 호출 시 스택 오버플로우 발생 가능
- 힙은 동적 메모리 할당을 지원하며, 가비지 컬렉션(Mark-and-Sweep 알고리즘)을 통해 불필요한 메모리 해제
- 깊은 재귀 호출(
factorial(1000))은RangeError: Maximum call stack size exceeded발생
섹션별 세부 요약
1. 자바스크립트 실행 모델 소개
- 콜스택과 힙은 자바스크립트 엔진(V8, SpiderMonkey)의 핵심 구성 요소
- 콜스택은 실행 컨텍스트(변수 환경, 스코프 체인,
this값)를 저장 - 힙은 객체, 배열 등 동적 메모리 할당을 지원
2. 콜스택의 동작 원리
- 함수 호출 시 스택 프레임(실행 컨텍스트)이 생성되고 콜스택에 추가
- 예시:
outerFunction()→innerFunction()→innerFunction()실행 후 콜스택에서 제거 - 재귀 호출(
factorial(n)) 시 스택 프레임 누적 →factorial(1000)은Maximum call stack size exceeded발생
3. 힙과 가비지 컬렉션
- 힙은 가비지 컬렉션(Mark-and-Sweep)을 통해 불필요 메모리 해제
- 예시:
person과anotherPerson이 같은 객체를 참조 →anotherPerson.age = 31로person.age도 변경 - 메모리 누수 방지: WeakMap, WeakSet 사용,
Object.create(null)으로 메모리 절약
4. 디버깅 및 최적화 전략
- Chrome DevTools의 Heap Snapshot, Node.js Inspector로 콜스택/힙 문제 분석
- Web Worker로 중량 작업 처리 → UI 블로킹 방지
- Tail Call Optimization(TCO) 지원 엔진에서 재귀 호출을 반복 구조로 변환 가능
결론
- 콜스택 관리: 재귀 깊이 제한(
factorial(1000)대신 반복 구조 사용) - 힙 최적화:
WeakMap,Web Worker,Object.create(null)활용 - 가비지 컬렉션과 메모리 누수 방지를 위한 참조 관리 필수