notes

06장. 데이터 타입

2025-08-05수정 2026-09-268 min read

모던 JS Deep Dive — 데이터 타입별 값·변환·동작 특성 핵심 정리.

Kim mr.

프론트엔드 · 기술 블로그

참고: 이웅모 《모던 자바스크립트 Deep Dive》 06장 · [MDN Data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)

typeof를 치며 “숫자인데 소수/정수 구분이 없네”에 놀랐다. JS 타입은 원시(number/string/boolean/undefined/null/symbol/bigint)와 객체로 나뉜다. 이 장이 그 목록이다.

flowchart TB
  T[타입] --> P[원시]
  T --> O[객체]
  P --> N[number]
  P --> S[string]
  P --> B[boolean]
  P --> U[undefined]
  P --> NL[null]
  P --> SY[symbol]
  P --> BI[bigint]

6.1 숫자

IEEE 754 배정밀도. NaN, Infinity. 정수 리터럴·소수·지수·bigint는 별타입.

console.log(0.1 + 0.2);
console.log(Number.MAX_SAFE_INTEGER);

6.2 문자열

유니코드. 불변. ', ", 템플릿 ` ``.

6.3 템플릿 리터럴

멀티라인·${expr} 삽입·태그드 템플릿.

const name = '민섭';
console.log(`hi ${name}`);

6.4 불리언

true/false. 조건 문맥의 truthy/falsy는 9장.

6.5 undefined

선언 후 미할당, 없는 프로퍼티, 반환 없는 함수. 의도로 undefined 할당은 비추.

6.6 null

의도적 빈 값. typeof null === 'object' 함정.

6.7 심벌

유일한 값. Symbol('desc'). 객체 키로 충돌 방지(33).

6.8 객체 타입

원시 제외 전부 — 배열·함수·날짜·정규식·일반 객체.

6.9 타입이 필요한 이유

메모리 해석·연산 가능 여부·엔진 최적화. 동적 타입이지만 값의 종류는 여전히 있다.

console.log(typeof 1, typeof 'a', typeof null, typeof []);

예제

function abs(n) {
  if (typeof n !== 'number' || Number.isNaN(n)) throw new TypeError('number required');
  return Math.abs(n);
}

헷갈리던 장면 / 함정

typeof null
typeof 배열 = object
NaN은 number
문자열 불변인데 += 되는 것처럼 보이는 이유(새 문자열)

표

질문 → 자답

Q. 정적 타입 없이 어떻게? A. 관례·JSDoc·TypeScript·런타임 가드.

Q. bigint는 언제? A. 안전 정수 밖. JSON 주의.

웹 보강 메모

MDN Data structures. Object.prototype.toString.call로 더 정밀한 태그 확인.

실무로 바로

입력 가드 typeof + isFinite
null vs undefined 팀 규칙
표시 문자열은 템플릿

여기서 잠깐 💁‍♂️

7장 연산자 — 타입 위에서 값을 결합한다.

연습·복습 체크리스트

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

일기 보강

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