[JavaScript] 원시 타입과 참조 타입

자바스크립트를 제대로 이해하고 활용하기 위해서 데이터 타입을 알아야 한다. 코드의 동작 방식, 예측 가능한 결과, 오류 방지와 깊은 관련이 있기 때문이다.

---

💡 자바스크립트의 동작 방식

자바스크립트는 동적 타입 언어이다. 이는 변수의 데이터 타입이 고정되지 않고, 실행 중에 변경될 수 있음 을 의미한다.

let value = 5; // 숫자
value = "hello"; // 문자열
value = true; // 불리언

이러한 유연성은 자바스크립트의 장점이 될 수 있지만, 데이터 타입을 잘못 이해하면 의도하지 않은 동작이 발생할 수 있다.

console.log(5 + "5"); // "55" (숫자가 문자열로 변환되어 연결)
console.log(5 - "2"); // 3 (문자열이 숫자로 변환되어 연산)

데이터 타입을 정확히 이해하면 이러한 예기치 못한 결과를 방지할 수 있습니다.

---

그렇다면 데이터 타입에는 어떤 종류가 있을까?

💡 데이터 타입 종류

자바스크립트의 데이터 타입은 크게 원시 타입(Primitive Type) 과 참조 타입(Reference Type) 으로 나뉜다.

---

🔍 원시 타입(Primitive Type)

원시 타입은 값이 불변하며, 데이터 자체를 변수에 저장하는 특징이 있다. 자바스크립트에는 7가지 원시 타입이 존재하며, 이를 기본형이라고도 부른다.

✅ 데이터 타입

1. string

• 텍스트 데이터를 표현하는 타입이다.

2. number

• 정수와 실수를 모두 표현하며, 특별한 값인 Infinity, -Infinity, NaN도 포함된다.

3. bigint

• 안전한 정수 범위를 넘어가는 큰 정수를 처리하기 위한 타입이다. 숫자 뒤에 n을 붙여 생성한다.

const bigNumber = 1234567890123456789012345678901234567890n;

4. boolean

• 논리값을 표현하며, 주로 조건문에서 사용된다.

5. undefined

• 값이 할당되지 않은 변수를 나타낸다. 초기화하지 않은 변수는 기본적으로 undefined 값을 가진다.

6. null

• 값이 없음을 의도적으로 나타낼 때 사용한다.

7. symbol

• 고유하고 변경 불가능한 값을 생성하며, 객체의 속성 키로 주로 사용된다.

const uniqueKey = Symbol("key");
const obj = { [uniqueKey]: "value" };

✅ 주요 특징

1. 값 자체를 저장

• 변수에 값 자체를 저장하며, 복사 시 값만 복제된다.
• 각 변수는 독립적인 메모리 공간을 가진다.

2. 불변성(Immutability)

• 기본형 데이터는 생성된 값을 절대로 변경할 수 없다.
• 새로운 값을 할당하면 새로운 메모리 공간이 생성되고, 변수는 이를 참조한다.

3. 메모리 재활용

• 동일한 값이 여러 변수에 할당될 경우, 메모리 공간을 공유할 수 있다.

4. 고정된 크기

• 기본형 데이터는 크기가 고정되어 있어, 메모리에 바로 저장된다.(Stack 영역)
  
  

---

🔍 참조 타입(Reference Type)

참조 타입은 객체 형태의 데이터를 가리키며, 변수는 실제 데이터를 저장하는 것이 아니라 메모리 주소(참조값) 가 저장된다.

✅ 데이터 타입

1. object
   키-값 쌍으로 데이터를 저장하며, 배열, 함수, 날짜 등 다양한 형태를 포함한다.

2. array
   순서가 있는 데이터의 집합으로, 요소는 어떤 데이터 타입이든 가능하다.

3. function
   함수도 객체의 한 종류로 취급된다.

4. date
   날짜와 시간을 다루기 위한 객체이다.

const now = new Date();

5. 기타 객체
   다양한 내장 객체(Map, Set, WeakMap, WeakSet)와 사용자 정의 객체를 지원한다.

const map = new Map();
map.set("key", "value");

✅ 주요 특징

1. 참조를 저장

• 변수에는 데이터 자체가 아닌 데이터가 저장된 메모리 주소(참조)를 저장한다.
• 복사 시, 참조 주소를 복사하므로 동일한 데이터를 공유한다.

let obj1 = { name: "Alice" };
let obj2 = obj1; // obj1의 참조 주소를 복사
obj2.name = "Bob"; // obj1.name도 "Bob"으로 변경

2. 가변성 (Mutability)

• 참조형 데이터는 내용(프로퍼티 또는 요소)을 변경할 수 있다.
  다만, 변경 불가능한 객체를 생성하려면 Object.freeze 또는 외부 라이브러리를 사용할 수 있습니다.

let arr = [1, 2, 3];
arr.push(4); // 기존 배열에 4를 추가, 메모리 주소는 동일

3. 동적 크기

• 참조형 데이터는 크기가 고정되지 않으며, 필요에 따라 메모리가 동적으로 할당된다(Heap 영역).

4. 공유와 부작용

• 여러 변수가 동일한 참조 주소를 가리킬 경우, 한 변수가 데이터를 변경하면 다른 변수에도 동일한 영향을 미친다.

let obj1 = { key: "value" };
let obj2 = obj1;
obj2.key = "new value"; // obj1.key도 "new value"로 변경

---

💡 기본형과 참조형의 핵심 정리

자바스크립트의 데이터 타입은 기본형과 참조형으로 나뉘며, 두 타입의 저장 방식과 동작 원리는 명확히 구분된다.

저장 방식

• 기본형: 값 자체가 저장되며, 변수에 값이 직접 할당된다.

• 참조형: 변수에는 값 자체가 아닌 메모리 주소(참조값)가 저장된다.

복사와 동작

• 기본형: 값을 복사하면 값 자체가 독립적으로 복제된다.

let a = 10;
let b = a; // b는 a와 독립적으로 값 10을 가짐
b = 20;
console.log(a); // 10

• 참조형: 참조값을 복사하므로 동일한 메모리 주소를 참조한다.

let obj1 = { key: "value" };
let obj2 = obj1; // obj2는 obj1의 참조값을 복사
obj2.key = "new value";
console.log(obj1.key); // "new value"

참조형 데이터의 특징

참조형 데이터는 객체의 변수 영역이 별도로 존재한다는 특징이 있다.

• 데이터 영역: 실제 값이 저장된 기존의 메모리 공간을 그대로 활용하며, 이 값은 불변성을 가진다.

• 변수 영역: 객체가 별도로 할당한 공간으로, 이 영역에서 다른 값을 대입하거나 참조를 변경할 수 있다.

따라서 참조형 데이터는 데이터를 직접 수정하지 않아도 변수 영역에서 다른 값을 가리킬 수 있어 흔히 가변값이라고 불린다.

let obj = { key: "value" };
obj.key = "new value"; // 기존 데이터를 수정
obj = { key: "another value" }; // 새로운 객체를 참조

불변성과 가변성

• 기본형: 값이 불변하며, 수정 시 새로운 메모리 공간이 할당된다.

• 참조형: 변수 영역에서 참조를 변경하거나 데이터 자체를 수정할 수 있어 가변적이다.