[JavaScript] 자바스크립트 | 기초 복습 변수 primitive 타입과 object의 차이점

자료형 구분

자바스크립트에서 변수는 다음 두 가지 방식 중 하나로 값을 저장합니다.

• 원시 타입 (Primitive Type)
  • 숫자(number), 문자열(string), 불리언(boolean), null, undefined
• 참조 타입 (Reference Type)
  • 객체(object), 배열(array), 함수(function) 등

이 둘은 변수에 값이 직접 저장되느냐, 아니면 주소만 저장되느냐에 따라 동작 방식이 다릅니다.

---

원시 타입

원시 타입은 값 자체가 변수에 직접 저장되는 구조입니다.
메모리에는 그 값이 그대로 들어가며, 변수 간의 값 복사는 단순 복사일 뿐 서로 영향을 주지 않습니다.

let number = 2;
let number2 = number;
console.log(number);   // 2
console.log(number2);  // 2

number2 = 3;

console.log(number);   // 2
console.log(number2);  // 3

• number에는 숫자 2가 저장됩니다.
• let number2 = number;는 number에 들어 있는 값을 그대로 복사해 number2에 저장합니다.
• 이후 number2의 값을 변경해도, number에는 아무런 영향이 없습니다.

메모리 구조 예시

number   ─▶ 2
number2  ─▶ 2 (복사된 값)

즉, 값이 작고 단순하기 때문에 그대로 저장되며, 별도의 메모리 공간을 사용합니다.

---

참조 타입

객체는 복잡한 구조를 가지므로, 변수에는 값이 아닌 주소(reference) 가 저장됩니다.
이 주소는 객체가 위치한 메모리의 위치를 가리키며, 여러 변수가 같은 주소를 공유할 수 있습니다.

let obj = {
    name: 'ellie',
    age: 5,
};

let obj2 = obj;

console.log(obj.name);   // ellie
console.log(obj2.name);  // ellie

• obj는 객체를 생성하고, 이 객체는 메모리 어딘가(예: 주소 0x123)에 저장됩니다.
• obj 변수에는 이 주소(0x123)가 들어가며, 실제 데이터는 그 주소를 통해 접근합니다.
• let obj2 = obj;는 그 주소(0x123)를 그대로 복사해 obj2에 저장합니다.
• 따라서 obj2로 객체 내용을 수정하면, obj에서도 동일한 값이 반영됩니다.

메모리 구조 예시

obj   ─▶ 📦 (주소: 0x123) ─ { name: 'ellie', age: 5 }
obj2  ─▶ 동일한 0x123 주소 참조

---

let과 const 차이

자바스크립트에서는 변수를 선언할 때 let이나 const를 사용합니다.
이 둘은 값의 재할당 가능 여부에 따라 구분됩니다.

let a = 2;
a = 5; // 재할당 가능

const num = 2;
num = 4; // ❌ 오류 발생 – const는 재할당 불가

객체와 const

const obj = {
    name: 'ellie',
    age: 5,
};

obj.name = 'James'; // ✅ 가능
obj = {};           // ❌ 오류

• const로 선언한 변수는 다른 값을 재할당할 수 없습니다.
• 하지만 객체 내부의 속성은 변경 가능합니다.
• 이는 변수에 저장된 것이 객체 자체가 아닌 객체의 주소(reference) 이기 때문입니다.

구분	저장 방식	변수 변경 시 영향 여부
원시 타입	값 자체를 저장	없음
참조 타입	메모리 주소(참조값)를 저장	있음

---

마무리

원시 타입과 참조 타입의 차이를 정확히 이해하면, 자바스크립트의 변수 선언, 복사, 객체 조작을 보다 확실하게 다룰 수 있습니다.
특히 React에서는 상태(state)를 변경할 때 얕은 복사, 깊은 복사 등의 개념이 자주 등장하므로, 이 기본 개념을 정확히 익혀두는 것이 중요합니다.