JavaScript 메모리 이해하기: 값 전달 vs 참조 전달

 

JavaScript 메모리 이해하기: 값 전달 vs 참조 전달

원시값과 객체가 메모리에서 동작하는 방식

 

값에 의한 전달 (Pass by Value) - 원시값

let a = 10;
let b = a;

환경 레코드      메모리
┌───┬─────┐
│ a │ 0x1 │ ──→ [0x1]: 10
│ b │ 0x2 │ ──→ [0x2]: 10 (값 복사)
└───┴─────┘

a = 20;

┌───┬─────┐
│ a │ 0x3 │ ──→ [0x1]: 10 (b가 사용 중)
│ b │ 0x2 │ ──→ [0x2]: 10 (독립적, 영향 없음)
└───┴─────┘      [0x3]: 20 (새로 생성)

말씀하신 대로:

• 새로운 메모리 주소 생성
• 같은 값을 새 메모리에 복사
• 독립적이라 서로 영향 없음 ✅

참조에 의한 전달 (Pass by Reference) - 객체

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

환경 레코드   스택               힙
┌──────┬────┐
│ obj1 │ 0x1│ ─→ [0x1]: 0x100 ─┐
│ obj2 │ 0x2│ ─→ [0x2]: 0x100 ─┴→ [0x100]: { value: 1 }
└──────┴────┘    (같은 힙 주소)      (같은 객체)

obj1.value = 2;

┌──────┬────┐
│ obj1 │ 0x1│ ─→ [0x1]: 0x100 ─┐
│ obj2 │ 0x2│ ─→ [0x2]: 0x100 ─┴→ [0x100]: { value: 2 }
└──────┴────┘                         (둘 다 영향 받음)

 

1. 새로운 스택 메모리 생성 (0x2)
2. 스택 메모리 주소를 변수에 바인딩
3. 스택 메모리에는 같은 힙 메모리 주소 저장 (0x100)
4. 같은 객체를 참조하므로 서로 영향 받음 ✅

 

핵심 차이

값에 의한 전달

let x = 10;
let y = x;

x = 20;
console.log(y);  // 10 (독립적)

// 각각 다른 메모리에 값 복사
x → [메모리A]: 20
y → [메모리B]: 10

참조에 의한 전달

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

obj1.value = 20;
console.log(obj2.value);  // 20 (영향 받음)

// 같은 객체를 참조
obj1 → [스택A] → [힙X]: { value: 20 }
obj2 → [스택B] → [힙X]: (같은 객체)

전체 비교

// 원시값 - 값 복사
let num1 = 100;
let num2 = num1;

num1 = 200;
console.log(num1);  // 200
console.log(num2);  // 100 (독립적) ✅

// 객체 - 참조 복사
let obj1 = { count: 100 };
let obj2 = obj1;

obj1.count = 200;
console.log(obj1.count);  // 200
console.log(obj2.count);  // 200 (영향 받음) ✅

 

정확한 메모리 구조

원시값

값에 의한 전달:
let a = 10;
let b = a;

a → [메모리 0x1]: 10
b → [메모리 0x2]: 10 (복사본)

알맹이는 같지만 독립적 ✅

객체

참조에 의한 전달:
let obj1 = { value: 1 };
let obj2 = obj1;

obj1 → [스택 0x1]: 힙주소 0x100 ──┐
obj2 → [스택 0x2]: 힙주소 0x100 ──┴→ [힙 0x100]: { value: 1 }

스택은 다르지만 같은 힙을 참조 ✅

정리

✅ 값에 의한 전달: 새 메모리에 값 복사 → 독립적

✅ 참조에 의한 전달: 새 스택 메모리 생성 → 같은 힙 주소 참조

✅ 원시값: 수정해도 서로 영향 없음

✅ 객체: 한쪽 수정하면 다른쪽도 영향 받음👏