티스토리 뷰
자바스크립트 힙 (Heap)
자바스크립트에서 동적 메모리 할당이 필요한 값들이 저장되는 메모리 영역으로 객체, 배열, 함수등이 여기에 저장된다.
즉, 개발자가 직접 만들거나 생성한 데이터들이 저장되는 큰 저장 공간이다.
크기가 커질 수 있고, 위치가 정해져 있지 않다.
느리지만 유연한 점이 특징이다.
스택(Stack)과 힙(Heap)
구분 | Stack | Heap |
위치 | 고정적, 작음 | 동적, 큼 |
용도 | 함수 호출, 지역 변수 | 객체, 배열, 함수 등 참조값 |
속도 | 빠름 | 느림 |
관리 | 컴파일러가 자동 관리 | JS 엔진(GC)이 자동 관리 (Garbage Collection) |
function test() {
const a = 1; // 스택 (고정 크기, 기본 타입)
const b = { value: 2 }; // 힙 (객체니까 동적 저장)
const c = [1, 2, 3]; // 힙 (배열도 객체)
}
전역 객체나 클로저에서 참조하는 값처럼 오래 살아야하는 값들을 관리하기에는 힙이 적합하다.
(객체나 배열은 크기를 예측할 수 없고, 동적으로 할당되기 때문에)
클로저와 힙의 관계 요약
클로저는 함수가 선언될 당시 외부 변수(환경)을 기억하고 그 변수들은 힙 메모리에 저장되어 살아남게 된다.
즉, 클로저 때문에 힙에 있는 값들이 더 오래 살아남는다.
function outer() {
const outerVar = { value: 42 }; // 객체 → 힙에 저장됨
return function inner() {
console.log(outerVar.value); // 외부 변수 참조 (클로저)
};
}
const closureFn = outer(); // outer 실행 → inner 반환
closureFn(); // outerVar는 사라지지 않고 유지됨
outerVar는 일반 지역 변수처럼 보이지만, inner()가 outerVar를 참조하고 있기 때문에, 가비지컬렉션이 메모리 해제를 하지 못한다.
이 outerVar 변수는 힙에 저장되어 클로저가 참조되는 동안 유지된다.
클로저로 인해 외부 함수가 종료되었는데도 변수를 유지하려면 스택처럼 함수 종료와 함께 사라지는 공간이 아니라, 계속 참조 가능한 힙에 변수들이 있어야한다.
Q. '스택처럼 함수 종료와 함께 사라지는 공간'에 대해 설명하기 위해서 관련 설명해줘
A.
스택은 함수 호출과 지역변수 저장을 위한 메모리공간으로, 최근에 실행된 함수를 순서대로 쌓아 올리는 구조이다.
함수가 호출되면 스택에 정보(컨텍스트)가 저장되고 함수가 끝나면 바로 그 정보가 제거된다.
지역 변수들은 함수 호출 중에만 필요하며, 함수가 끝났다는건 그 변수들도 더 이상 쓸일이 없다는 의미이다. 그래서 자바스크립트 엔진은 스택 프레임을 바로 제거하여 메모리를 효율적으로 관리한다.
즉, 스택은 함수 실행 중 필요한 변수만 잠깐 저장하는 메모리 공간이고 함수가 끝나면 그 변수들도 같이 사라진다.
여기서 말하는 스택은 콜스택인가?
정확히 말하면 약간의 맥락 차이가 있다.
콜스택은 자바스크립트 엔진이 함수 실행 흐름을 추적하기 위해 사용하는 스택구조이다.
콜스택은 스택 메모리의 한 부분이라고 봐도되는데 스택 메모리에는 함수 컨텍스트, 지역 변수, 매개 변수 등이 들어가고 자바스크립트에서 이걸 콜 스택이라는 이름으로 부른다.
결론은 스택은 실질적으로 콜스택을 말한다.
Q. 힙의 데이터 공간은 무한대야?
A. 아니다. (늘어난다 ≠ 무한대)
하지만 스택보다 훨씬 크고 유연하게 메모리를 사용한다.
힙은 결국 컴퓨터의 메인 메모리(RAM) 위에서 운영된다. 따라서 메모리는 유한하기 때문에 힙도 당연히 유한하다.
또한 너무 많은 객체를 힙에 쌓게 되면 과부하가 올 수 있다. 그래서 자바스크립트 실행환경(브라우저, 노드)은 최대 힙 크기 제한을 둔다.
힙 메모리 부족 시 Out of Memory(OOM) 오류가 발생하게 되고, 브라우저 탭이 죽거나 Node.js 프로세스가 터진다.
힙은 동적 데이터를 저장하는 큰 저장소이지만, 물리적 메모리와 엔진 제한 때문에 무한하지 않다. 그냥 스택보다는 훨씬 크고 유연할 뿐이다.
'개념 > 2025 학습' 카테고리의 다른 글
React의 동시성 기능 (Concurrent Features) (0) | 2025.04.24 |
---|---|
React의 예측 가능한(predictable) UI를 위한 설계 철학 (0) | 2025.04.23 |
주요 시간 관련 용어 정리 (UTC, KST, ISO String, Timestamp) (0) | 2025.04.20 |
React 18에서 Strict Mode (0) | 2025.04.20 |
클라이언트에서 API 호출할때 사용하는 도구에는 뭐가 있을까? (fetch, axios, TanStack Query, SWR) + graphql, firebase, supabase (0) | 2025.04.10 |
프로젝트에서 Vue 쓸까? React 쓸까? (0) | 2025.04.06 |
데이터 바인딩(Data Binding)과 MVVM (Vue, React) (0) | 2025.04.06 |
자바스크립트 쓰로틀링(Throttling), 디바운싱(Debouncing) 성능 최적화 (0) | 2025.04.06 |