자바스크립트 데이터 타입: 원시 타입과 참조 타입의 차이

 

자바스크립트에서 변수에 값을 할당할 때, 그 값이 무엇이냐에 따라 메모리에 저장되는 방식과 동작 원리가 완전히 달라집니다. 이를 제대로 이해하지 못하면 예상치 못한 버그를 마주하기 쉽습니다. 오늘은 **원시 타입(Primitive Type)**과 **참조 타입(Reference Type)**의 결정적인 차이점을 풍부한 예제와 함께 알아보겠습니다.

1. 원시 타입 (Primitive Type)

원시 타입은 단일 데이터를 담고 있으며, 값 자체가 메모리에 저장됩니다. 또한, 한 번 생성된 원시 값은 변경할 수 없는 **불변성(Immutability)**을 가집니다.

종류

• String, Number, Boolean, Null, Undefined, Symbol, BigInt

특징: 값의 복사

원시 타입을 다른 변수에 할당하면 값 자체가 복사됩니다. 따라서 복사본을 수정해도 원본에는 아무런 영향이 없습니다.

예제 1: 원시 타입의 복사 동작

let score1 = 100;
let score2 = score1; // 값(100)이 그대로 복사됨

score2 = 80; // score2의 값을 변경

console.log(score1); // 100 (원본 유지)
console.log(score2); // 80 (복사본만 변경)

위 예제에서 score1과 score2는 메모리 상에서 서로 독립적인 공간을 차지합니다. score2의 값을 바꾼다고 해서 score1의 위치에 있는 값이 변하지 않습니다.

2. 참조 타입 (Reference Type)

참조 타입은 여러 데이터를 묶은 집합체로, 변수에는 실제 값이 아닌 **값이 저장된 메모리의 주소(참조값)**가 저장됩니다. 실제 데이터는 메모리의 '힙(Heap)'이라는 영역에 저장됩니다.

종류

• Object, Array, Function, Date, RegExp 등

특징: 참조의 복사

참조 타입을 다른 변수에 할당하면 주소값이 복사됩니다. 즉, 두 변수가 동일한 객체를 가리키게 됩니다.

예제 2: 참조 타입의 복사 동작

let user1 = { name: "Kim" };
let user2 = user1; // 주소값이 복사됨 (동일한 객체를 공유)

user2.name = "Lee"; // 복사본을 통해 내부 속성 변경

console.log(user1.name); // "Lee" (원본도 변경됨!)
console.log(user2.name); // "Lee"

user1과 user2는 같은 주소를 바라보고 있기 때문에, 한쪽에서 객체를 수정하면 공유하고 있는 실제 데이터가 변경되어 양쪽 모두에게 영향을 미칩니다.

3. 주요 차이점 비교

구분원시 타입 (Primitive)참조 타입 (Reference)

저장 위치	콜 스택(Stack)에 값 직접 저장	힙(Heap)에 저장 후 스택에는 주소 저장
복사 방식	값 자체가 복사됨 (Deep Copy와 유사)	주소값이 복사됨 (Shallow Copy)
불변성	불변(Immutable)	가변(Mutable)
비교	값을 비교함	참조(주소)를 비교함

비교 연산의 차이

원시 타입은 값이 같으면 true를 반환하지만, 참조 타입은 가리키는 주소가 같아야만 true를 반환합니다.

예제 3: 비교 연산자 동작

// 원시 타입 비교
let a = 10;
let b = 10;
console.log(a === b); // true (값이 같음)

// 참조 타입 비교
let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
console.log(arr1 === arr2); // false (데이터는 같지만 메모리 주소가 다름)

let arr3 = arr1;
console.log(arr1 === arr3); // true (동일한 주소를 공유함)

4. 참조 타입에서 원본을 지키는 방법: 깊은 복사(Deep Copy)

참조 타입의 부수 효과(Side Effect)를 방지하기 위해서는 주소만 복사하는 것이 아니라, 아예 새로운 객체를 만들어 내용을 채워야 합니다.

방법 1: 전개 연산자 (Spread Operator) - 얕은 복사

1단계 수준의 복사는 가능하지만, 중첩된 객체는 여전히 참조로 연결됩니다.

let original = { a: 1, b: { c: 2 } };
let copy = { ...original };

copy.a = 100;
console.log(original.a); // 1 (원본 보존)

copy.b.c = 999;
console.log(original.b.c); // 999 (중첩된 객체는 원본도 변경됨)

방법 2: JSON을 이용한 깊은 복사

가장 간단하게 깊은 복사를 구현하는 방법입니다. (단, 함수나 심볼은 복사되지 않는 제약이 있습니다.)

let original = { a: 1, b: { c: 2 } };
let deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 50;
console.log(original.b.c); // 2 (완벽하게 독립된 복사본)

요약

자바스크립트의 변수는 단순히 값을 담는 상자가 아닙니다. 원시 타입은 값 그 자체를 들고 있고, 참조 타입은 실제 데이터가 있는 지도를 들고 있는 것과 같습니다. 이 원리를 이해하면 의도치 않게 원본 데이터가 바뀌는 실수를 줄일 수 있습니다.