[JS] 원시 타입(Primitive Type) & 참조 타입(Reference Type)

👀 원시 타입 (Primitive Type)

원시 타입에 속하는 데이터 타입에는 숫자(Number & Bigint), 문자열(String), 논리형(Boolean), null, undefined, 심볼(Symbol)이 있다. 

데이터를 저장하기 위한 별도의 데이터 공간을 확보해 값을 저장하고, 그 공간을 변수 영역에 저장한다.

이렇게 할당된 값은 불변성(immutable)을 갖는다.
즉 메모리에 할당된 원시 타입의 값은 그 자체가 변경될 수 없다.

 

🌿 원시 타입의 값 복사하기 

var str1 = "hello";
var str2 = str1;

str1 = "world";

console.log(str1); // world
console.log(str2); // hello

 

원본 변수에 값을 재 할당해도 복사본의 값은 변하지 않았습니다. 

원시 타입의 값은 한 번 만들면 바꿀 수 없습니다. 

 

👀 참조 타입 (Reference Type)

자바스크립트에서 원시 타입을 제외한 나머지는 참조 타입(객체, Object)이라 할 수 있습니다.
객체의 하위 분류에 속하는 데이터 타입에는 배열(Array), 함수(Function), 날짜(Date), 정규표현식(RegExp) 등이 있습니다.

 

🌿 참조 타입의 값 복사하기

let obj = {
  a: 1,
  b: 2,
  c: 3
}

let newObj = obj;
newObj.a = 100; // 참조된 값 중 a의 값에 100을 재할당

console.log(obj.a); // 100
// 해당 주소를 참조한 newObj의 a값을 바꾸었기 때문에 두 객체 모두 반환하는 a 값이 변경됨.

 

[참고] 리액트에서도 이와같은 이유로 state가 배열/객체라면 독립적으로 카피본을 만들어서 수정해야 됩니다. 

별개의 복사본 즉 deep copy를 위해 let y = [...x]; 처럼 전개방식으로 변경 후 값을 수정해야 합니다.