notes

11장. 원시 값과 객체의 비교

2025-08-09수정 2026-09-267 min read

모던 JS Deep Dive — 원시 값과 객체의 저장·복사·비교 차이 정리.

Kim mr.

프론트엔드 · 기술 블로그

참고: 이웅모 《모던 자바스크립트 Deep Dive》 11장 · [MDN Primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) / [Equality comparisons](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)

const a = b가 객체일 때 “복사가 아니라 같은 상자”라는 걸 늦게 알았다. 원시는 값 자체, 객체는 참조. 이 한 줄이 불변성·버그·복사 전략의 출발점이다.

flowchart LR
  PRIM[원시] -->|복사| PRIM2[다른 값]
  OBJ[객체] -->|할당| REF[같은 참조]
  REF --> MUT[한쪽 변이 = 양쪽 관찰]

11.1 원시 값

변경 불가능한 값

숫자·문자열·불리언·null·undefined·symbol·bigint. 값을 “고치는” 게 아니라 새 값을 만든다.

문자열 불변성

let s = 'hi';
s[0] = 'H'; // 무시/엄격 모드 에러
s = 'Hi'; // 재할당

값에 의한 전달

함수에 넘기면 값이 복사되어 전달(원시).

function bump(n) { n += 1; }
let x = 1;
bump(x);
console.log(x); // 1

11.2 객체

변경 가능한 값

프로퍼티를 바꿀 수 있다. const여도 내용 변경 가능.

참조에 의한 전달

변수엔 참조가 담긴다. 함수에 객체를 넘기면 같은 대상을 만진다.

function touch(o) { o.x = 1; }
const obj = { x: 0 };
touch(obj);
console.log(obj.x); // 1

예제 — 얕은 복사

const a = { x: 1, nest: { y: 2 } };
const b = { ...a };
b.x = 9;
b.nest.y = 8;
console.log(a.x, a.nest.y); // 1, 8 — nest는 공유

깊은 복사: structuredClone / 라이브러리.

헷갈리던 장면 / 함정

const = 불변 객체
배열/객체 비교 ===는 참조
실수로 공유 상태 변이
JSON 직렬화로 “복사” 시 undefined/함수/Date 손실

표

질문 → 자답

Q. 불변 업데이트? A. 스프레드로 새 객체/배열. 중첩은 경로마다 새 참조.

Q. Object.freeze? A. 얕은 동결(16). 중첩은 별도.

웹 보강 메모

MDN Equality. Immer 같은 불변 헬퍼와 언제 쓸지.

실무로 바로

상태 업데이트는 새 참조
함수 인자 변이 금지(또는 명시)
비교는 id/값 단위

여기서 잠깐 💁‍♂️

12장 함수 — 값으로 전달되는 행동. 원시/참조와 함께 읽힌다.

연습·복습 체크리스트

[ ] 이 장 핵심 표를 백지에 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 관련 페이지 북마크
[ ] 실무 코드에서 같은 패턴 검색·리팩터 후보 표시
[ ] 앞뒤 장과 한 줄로 연결해 보기

일기 보강

처음엔 용어가 추상적으로 들렸다. 책을 덮고 한 줄 정의를 내 말로 다시 쓰고, 예제를 최소 세 개 쳐 보니 문제 유형이 보이기 시작했다. “외운 문장”이 아니라 “다시 설명 가능한 문장”이 남을 때까지 표를 줄였다 늘렸다. 원문 복붙 없이 왜 이렇게 동작하나만 남겼다.