원시 타입 — 값 자체가 복사되는 것들

숫자·문자열·불리언처럼 변수에 값이 그대로 담기는 7가지 타입. 복사하면 서로 영향을 주지 않는다.

Seobway · · 6분

변수를 복사했는데 왜 어떤 건 같이 바뀌고 어떤 건 안 바뀌는가

아래 두 코드는 똑같이 "복사"했는데 결과가 반대다.

let a = 1;
let b = a;
b = 2;
console.log(a);        // 1     ← 안 바뀐다

let x = { n: 1 };
let y = x;
y.n = 2;
console.log(x.n);      // 2     ← 같이 바뀐다

이 차이를 만드는 것이 원시 타입이냐 아니냐다.

원시 타입은 무엇인가

원시 타입은 변수에 값 자체가 저장되는 타입이다. 자바스크립트에 7가지가 있다.

타입 예 비고
string "안녕"
number 42, 3.14, NaN 정수·실수 구분 없음
boolean true, false
undefined undefined 값을 아직 안 넣음
null null 값이 없음을 의도적으로 표시
bigint 9007199254740993n number 로 표현 못 하는 큰 정수
symbol Symbol("id") 겹치지 않는 고유 키

이 7가지가 아닌 것은 전부 참조 타입이다 — 객체·배열·함수.

원시 타입의 값을 다른 변수에 넣으면 값이 통째로 복사된다. 두 변수는 각자 자기 값을
들고 있어서 한쪽을 바꿔도 다른 쪽은 그대로다.

인터랙티브 다이어그램: 원시 타입은 값이 복사된다 (단계별로 재생할 수 있다)

  1. let a = 1 — a 라는 상자에 값 1 이 들어간다.
  2. let b = a — a 의 값을 읽어 b 상자에 새로 넣는다. 상자가 두 개다.
  3. b = 2 — b 의 상자만 바뀐다.
  4. a 는 그대로다. 서로 다른 상자이기 때문이다.

원시 타입은 바꿀 수 없다

원시 값 자체는 불변(immutable) 이다. 문자열의 글자 하나를 바꾸려 해도 무시된다.

let s = "hello";
s[0] = "H";
console.log(s);            // "hello"   ← 안 바뀐다

s = "Hello";               // 이건 된다 — 새 값으로 "교체"한 것

s[0] = "H" 는 문자열을 고치는 게 아니라 없는 속성에 값을 넣으려는 시도라 조용히 무시된다.
toUpperCase() 같은 메서드도 원본을 고치지 않고 새 문자열을 만들어 돌려준다.

직접 확인

typeof 로 각 값의 타입을 찍어 보고, 값 복사가 독립적인지 확인해라.

const values = [
  "문자열", 42, true, undefined, null,
  9007199254740993n, Symbol("id"),
  {}, [], function () {},
];

for (const v of values) {
  console.log(String(typeof v).padEnd(10), "|", typeof v === "object" || typeof v === "function" ? "참조 타입" : "원시 타입");
}

// 값 복사는 독립적이다
let a = 10;
let b = a;
b += 5;
console.log("a =", a, "/ b =", b);

typeof null 이 "object" 로 나오는 것에 주목해라. 다음 절에서 다룬다.

흔한 실수

한 줄 정리

원시 타입은 변수에 값 자체가 저장되는 7가지 타입(string · number · boolean ·
undefined · null · bigint · symbol)이고, 대입하면 값이 복사되어 서로 독립적이다.
값 자체는 바꿀 수 없고 교체만 된다.

참고

  1. [1] Primitive — MDN Web Docs 용어 사전
  2. [2] JavaScript data types and data structures — MDN Web Docs
  3. [3] ECMAScript Language Types — ECMAScript 사양

관련 글