JavaScript 메모리 구조: 스택과 힙

 

JavaScript 메모리 구조: 스택과 힙

JavaScript의 값은 **스택(Stack)**과 힙(Heap) 두 가지 메모리 영역에 저장됩니다.

스택 메모리 (Stack)

특징:

• 함수 호출, 지역 변수 저장
• 작고 빠름
• 자동 관리 (스코프 벗어나면 자동 해제)

저장되는 것:

• 원시값 (직접 저장)
• 객체의 주소 (참조값)

힙 메모리 (Heap)

특징:

• 객체, 배열 등 참조 타입 저장
• 크고 동적 크기
• 가비지 컬렉션으로 관리

저장되는 것:

• 실제 객체, 배열, 함수

원시값 - 스택에 직접 저장

let num = 42;
let str = 'hello';

스택
┌─────┬─────┐
│ num │ 0x1 │ ──→ [0x1]: 42
│ str │ 0x2 │ ──→ [0x2]: "hello"
└─────┴─────┘

// 변수 → 스택 → 값 (1단계)

• 스택에 값을 직접 저장
• 빠른 접근
• 독립적인 값

객체 - 힙에 저장, 스택엔 주소만

let obj = { value: 1 };
let arr = [1, 2, 3];

스택                     힙
┌─────┬─────┐
│ obj │ 0x3 │ ──→ [0x3]: 0x100 ──→ [0x100]: { value: 1 }
│ arr │ 0x4 │ ──→ [0x4]: 0x200 ──→ [0x200]: [1, 2, 3]
└─────┴─────┘      (힙 주소)         (실제 객체)

// 변수 → 스택 → 힙 주소 → 객체 (2단계)

• 힙에 실제 객체 생성
• 스택에는 힙 주소만 저장
• 주소를 통해 간접 접근

복사 시 차이

원시값 복사

let a = 10;
let b = a;

스택
┌───┬─────┐
│ a │ 0x1 │ ──→ [0x1]: 10
│ b │ 0x2 │ ──→ [0x2]: 10 (값 복사)
└───┴─────┘

a = 20;
// a와 b는 독립적 (다른 스택 공간)

객체 복사

let obj1 = { value: 10 };
let obj2 = obj1;

스택                     힙
┌──────┬─────┐
│ obj1 │ 0x3 │ ──→ [0x3]: 0x100 ──┐
│ obj2 │ 0x4 │ ──→ [0x4]: 0x100 ──┴→ [0x100]: { value: 10 }
└──────┴─────┘      (같은 주소)         (같은 객체)

obj1.value = 20;
// obj1과 obj2는 같은 객체 참조 (같은 힙 주소)

전체 예시

function example() {
  // 스택에 직접 저장
  let num = 42;
  let bool = true;
  
  // 힙에 저장, 스택엔 주소만
  let user = {
    name: 'zzimzzim',
    age: 25
  };
  let scores = [90, 85, 100];
}

스택                          힙
┌───────┬─────┐
│ num   │ 0x1 │ → [0x1]: 42
│ bool  │ 0x2 │ → [0x2]: true
│ user  │ 0x3 │ → [0x3]: 0x100 ──→ [0x100]: { name: '...', age: 25 }
│ scores│ 0x4 │ → [0x4]: 0x200 ──→ [0x200]: [90, 85, 100]
└───────┴─────┘

핵심 정리

	원시값	객체
저장 위치	스택	힙
스택에 저장	값 직접	힙 주소
접근 방식	직접 (1단계)	간접 (2단계)
복사	값 복사	주소 복사
독립성	독립적	공유됨

// 원시값: 스택에 직접
let x = 10;
x → [스택]: 10

// 객체: 스택 → 힙
let obj = { x: 10 };
obj → [스택]: 주소 → [힙]: { x: 10 }

기억하기:

• 원시값 = 스택 직행 🚀
• 객체 = 스택 경유 → 힙 도착 🚉➡️🏢