01. Types (형)

값의 특성과 메모리 동작을 구분하여 사용하는 습관이 중요하다.

🧩 Note

Airbnb 가이드가 말하는 Type 구분은 단순 분류가 아니라 메모리의 복사 vs 참조 동작을 이해하라는 메시지다. 즉, 값이 복사되는가?, 참조가 공유되는가?를 구분할 수 있어야 예상치 못한 버그를 방지할 수 있다.

React, Redux, Zustand 같은 상태 관리에서도 불변성(immutability) 개념은 여기서 비롯된다.
원시형은 새 값을 바로 복사하지만, 참조형은 얕은 복사(shallow copy)만으로는 완전한 독립이 불가능하다.
따라서 spread 연산자({ ...obj }, [...arr])나 structuredClone() 같은 도구로 안전한 복제를 수행해야 한다.

🧩 Related Concepts

1. Primitive Types (원시형)

원시형에 접근하면 값 자체를 복사하여 조작하게 된다.
즉, 새로운 변수에 대입해도 서로 독립적으로 존재한다.

string
number
boolean
null
undefined
symbol
bigint

js

const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // 1, 9

// `foo`의 값은 변하지 않는다. 원시형은 Stack 영역에 저장된 값 자체를 복사하기 때문.

⚠️ Symbol과 BigInt 주의

Symbol과 Bigint는 완전히 폴리필(polyfill)할 수 없는 타입이다.
언어 엔진 레벨에서 동작하기 때문에, 구형 브라우저(IE 등)에서는 완벽히 흉내 낼 수 없다.

따라서 Airbnb 가이드는 "Symbol, BigInt는 완전 폴리필 불가능하므로, 지원되지 않는 환경에서는 사용하지 말라"고 권장한다.

2. Reference Types (참조형)

참조형에 접근하면 메모리 주소(참조)를 통해 값에 접근한다.
즉, 같은 객체를 가리키는 두 변수는 서로 영향을 준다.

object
array
function

js

const foo = [1, 2];
const bar = foo;

bar[0] = 9;
console.log(foo[0], bar[0]); // 9, 9

// foo와 bar가 모두 같은 배열을 참조하기 때문에,
// 하나를 수정하면 다른 변수에서도 변경이 반영된다.