원시 타입 VS 참조 타입

자바스크립트 자료형(데이터)은 크게 원시 타입(Primitive Type)과 참조 타입(Reference Type)으로 나눌 수 있다고 했다.

둘 다 변수를 선언하고 데이터를 변수에 할당할 수 있는데 무엇이 다른 것일까?

 

각각 특징을 알아보면 다음과 같다.

원시 타입 - 값을 그대로 저장
참조 타입 - 값을 주소로 저장하고, 출력시 주소와 일치하는 값을 출력

보다시피, 값의 저장형태가 다른데, 이는 변수에 할당하는 과정에서 차이가 발생한다.

어떠한 차이가 있는지 알아보자.

---

🖋 원시 타입(Primitive Type)

선언(declaration)
let a;
let b;

핟당(assignment)
a = 1;
b = 1;

재할당
b = 2;
console.log(b) // 2

처음 a, b에 1이라는 원시 타입(숫자)을 할당
이때 1이라는 원시 타입은 1의 값을 가진 어떠한 저장공간을 새로 만든다.

그리고 이 자체를 a, b에 넣은 것이다.

b에 2라는 값을 재할당 시, 1이라는 값을 2로 수정하는 것이 아니다.

새로운 2라는 데이터가 담긴 어떠한 별개의 저장공간을 새로 만들고,

b라는 변수에 바꿔준 것(새로 할당)이다.
(헷갈릴 수도 있는데, 어떠한 저장공간이란 1 , 2 각각 그 자체라고 생각하면 될 것 같다.)

 

 

---

🖋 참조 타입(Reference Type)

let a = [1, 2];
let b = ['a', 'b', 'c'];

 

참조 타입 데이터는 크기가 정해져 있지 않다.

변수에 할당될 때 값이 직접 해당 변수에 저장되는 것이 아니다.

변수에는 데이터에 대한 참조(주소)만 저장된다.

참조는 참조 타입 데이터의 주소이지 해당 데이터의 값이 아니다.

이때 heap을 가지기에 Reference Type은 동적인 저장공간을 차지할 수 있다.

변수에 할당된 주소(address)를 따라가보면 이 heap이라는 데이터 보관함에 각 주소마다 여러개의 데이터들을 보관할 수 있는 것을 알 수 있다.

 

 

 

 

 

---

✅ 변수 복사 후 변경을 한다면?

지금까지 말로만 나왔던 값 그 자체, 값의 주소를 할당 이 차이점이 무엇인지 알아보자.

원시 타입

let num1 = 1;
let num2 = num1;
num2 = 2;

console.log(num1) // 1
console.log(num2) // 2

참조 타입

let arr1 = [1, 2];
let arr2 = arr1;
arr2.push(3); // [1, 2, 3]

console.log(arr1) // [1, 2, 3]
console.log(arr2) // [1, 2, 3]

원시 타입의 경우

다른 변수에 복사 후 변경해도 기존 변수의 값엔 영향이 없다.
이유는 num2에 num1을 복사할 때, 값 그 자체를 복사한 것이기 때문에 num1, num2 각각 본인들만의 데이터를 새로? 가졌다고 생각하면 될 것 같다.

참조 타입의 경우

다른 변수에 복사 후 변경했을 때, 기존 변수의 값엔 영향이 생겼다.
이유는 참조 타입은 값의 주소를 복사하기 때문이다.
즉 num2에 num1을 복사 할 때, num1이 가지고 있는 데이터의 주소를 복사했고,
num2를 변경 시 이 주소를 따라가서 그 안의 데이터들을 변경하기 때문이다.

이 비유가 올바른 비유는 아닌 것 같지만 쉽게 생각해보자면

 

원시 타입의 복사

나랑 친구랑 똑같은 만원을 가지고 있는 상태에서 친구가 만원을 어떻게 쓰든 내가 사용하지 않으면 내가 가진 만원은 불변(immutable) 한 것이다.

참조 타입의 복사

우리 집 키를 복사해서 친구에게 줬다고 생각해도 될까..? 어쨋든, 같은 집을 공유하니까 친구가 집을 어지르면 나도 영향을 받는다!

---

🤸 마무리

	원시 타입(Primitive Type)	참조 타입(Reference Type)
값의 저장 방법	하나의 데이터만 가진다.	heap에 데이터'들'을 저장 후, 주소를 가진다.
변수에 할당 시	값(value)	주소(reference)