Javascript : 원시 타입 vs 객체 타입

다이어그램 참고 : 인프런(한입 크기로 잘라먹는 리액트(React.js : 기초부터 실전까지)

✔️ 원시 타입 (Primitive Type)

• 값 자체로써 변수에 저장되고 복사된다.
• 값의 변경이 불가능하다.
• 변수를 다른 변수에 할당하면 값 자체가 복사된다.

📃 원시 타입 종류

• String
• Number
• Boolean
• Null
• Undefined
• Bigint
• Symbol

✏️ 원시 타입 예제

let a = 10;
let b = a; // 값이 복사됨
b = 20;
console.log(a); // 10 (값이 변경되지 않음)

---

✔️ 객체 타입 (object Type)

• 참조(Reference) 형태로 저장된다
• 값의 변경이 가능하다.
• 변수를 다른 변수에 할당하면 참조값이 복사된다.

📃 객체 타입 종류

• Object
• Array
• Function

✏️ 객체 타입 예제

let obj1 = { name: "박철수" };
let obj2 = obj1; // 참조값이 복사됨
obj2.name = "김영희";
console.log(obj1.name); // "김영희" (원본도 변경됨)

✔️ 객체 타입 주의사항

1. 의도치 않게 값이 수정될 수 있다. (사이드 이펙트)

const user = {
  name: "김철수",
  age: 25
};

// 의도치 않게 값이 수정될 수 있음
function updateUser(obj) {
  obj.age = 26;
}

updateUser(user);
console.log(user.age);  // 26 (원본 객체 수정됨)

원본 값이 25 에서 26으로 수정되어 버린다.

// 스프레드 연산자 사용
const user = {
  name: "김철수",
  age: 25,
};

function updateUser(obj) {
  return { ...obj, age: 26 };
}

const updatedUser = updateUser(user);
console.log(user.age); // 25 (원본 객체는 변경되지 않음)
console.log(updatedUser.age); // 26 (새로운 객체 생성됨)

스프레드 연산자...를 사용하면 원본객체는 건드리지 않고 새로운 객체를 생성해 두 속성 모두 활용할 수 있다.

따라서 원본 객체가 의도치않게 변환하는것을 방지하기 위해선 깊은복사를 사용해야 한다.

---

2. 객체간의 비교는 기본적으로 참조값을 기준으로 이루어진다.

const obj1 = { name: "김철수", age: 25 };
const obj2 = obj1;
const obj3 = {...obj1};

// 객체 비교
console.log(obj1 === obj2);  // true (같은 참조를 가리킴)
console.log(obj1 === obj3);  // false (값은 같지만 참조가 다름)

obj1 과 obj2 는 같은 참조를 가리키고 있기 때문에 결과값이 true 이고,
obj1 과 obj3 은 값은 같지만 참조가 다르기 때문에 결과가 false 가 나온다.
참조값을 이해하기 힘들수도 있기에 참고 이미지를 첨부했다.
위의 이미지에 따르면 obj1 === obj3 의 결과가 true 가 나오기 위해선 JSON.stringify() 같은 내장 함수를 사용해 객체를 문자열로 변환한 뒤 비교해야한다.

console.log(JSON.stringify(obj1) === JSON.stringify(obj3)); 
// 객체를 문자열로 변환하면 obj1 과 obj3 의 결과가 같기 때문에 결과 : true 

---

📝 요약 정리

구분	원시 타입	객체 타입
저장 방식	값 자체 저장	참조값 저장
값 변경	불가능(새로운 값 생성)	가능(원본 데이터 변경)
복사 방식	값이 복사됨	참조값이 복사됨
예시	number, string, boolean	Object, Array, Function