C
JavaScript 목록
이전4 / 21다음
JavaScript/기초/Lesson 04

자료형 — *7가지 기본*

45분·theory
이 챕터
3/5

자료형 — *7가지 기본*

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ 원시 7개 (string·number·bigint·boolean·null·undefined·symbol)
  • ▸✅ 참조 타입과 == vs === 차이
  • ▸✅ Number 의 IEEE 754 함정 (0.1 + 0.2 ≠ 0.3)

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

JS 의 자료형

핵심 한 줄

JavaScript 의 자료형은 원시 (Primitive) 7가지 와 객체 (Object) 1가지 로 나뉩니다. 동적 타입이라 변수 선언 시 타입 지정 X — 값에 따라 알아서.

원시 (Primitive) 7가지

javascript
// 1. number — 정수·실수 구분 없음
const age = 28;
const pi = 3.14;
const inf = Infinity;
const nan = NaN;        // Not a Number

// 2. bigint — 매우 큰 정수 (number 한계 초과)
const huge = 9007199254740993n;    // 끝에 n

// 3. string — 따옴표 3종 다 OK
const s1 = "hello";
const s2 = 'world';
const s3 = `안녕, ${s1}!`;          // 템플릿 리터럴 (변수 삽입)

// 4. boolean
const isActive = true;

// 5. undefined — 선언만 (값 없음)
let x;
console.log(x);          // undefined

// 6. null — 의도적 비움
const empty = null;

// 7. symbol — 고유 식별자 (거의 안 씀)
const id = Symbol('id');

객체 (Object) — 나머지 모두

javascript
const obj  = { name: "홍" };
const arr  = [1, 2, 3];
const fn   = () => "hi";
const date = new Date();
const regex = /\d+/;

배열·함수·날짜·정규식 모두 내부적으로 객체. 그래서 메서드 호출 가능 (arr.map(), s.toUpperCase() 등).

undefined vs null

자주 혼동하는 둘:

  • ▸undefined — 자동 으로 부여 (선언만 했을 때, 함수 인자 없을 때)
  • ▸null — 개발자가 의도적 으로 부여 (값이 없음을 표시)
javascript
let x;              // undefined
const y = null;     // null

console.log(x == null);   // true (둘 다 "비어있음")
console.log(x === null);  // false (엄격 비교는 다름)

타입 확인

javascript
const fn = () => {};

console.log(typeof 42);          // 'number'
console.log(typeof 'hi');        // 'string'
console.log(typeof true);        // 'boolean'
console.log(typeof undefined);   // 'undefined'
console.log(typeof null);        // 'object'   ← ⚠️ 옛 버그, 못 고침
console.log(typeof {});          // 'object'
console.log(typeof []);          // 'object'   ← 배열도 객체
console.log(typeof fn);          // 'function'

// 🔍 배열인지 확인 — typeof 로는 구분 불가 → 전용 메서드 사용
console.log(Array.isArray([]));       // true
console.log(Array.isArray({}));       // false
console.log(Array.isArray('hi'));     // false

typeof null === 'object' 는 JS 의 유명한 버그. 호환성 때문에 못 고침. null 체크는 따로 해야.

타입 변환 — 암묵적 vs 명시적

javascript
// ⚠️ 암묵적 변환 (위험) — JS 가 멋대로 타입을 바꿈
console.log("5" + 1);     // "51"   ← + 는 문자열 연결을 우선 → 1 이 "1" 로 바뀜
console.log("5" - 1);     //   4    ← - 는 숫자만 가능 → "5" 가 5 로 바뀜
console.log("abc" - 1);   //  NaN   ← "abc" 는 숫자로 못 바꿈 → NaN

// ✅ 명시적 변환 (안전) — 개발자가 의도해서 바꿈
console.log(Number("5"));      // 5      ← 문자열 → 숫자
console.log(String(5));        // "5"    ← 숫자 → 문자열
console.log(Boolean(0));       // false  ← 0 은 falsy
console.log(Boolean(""));      // false  ← 빈 문자열 falsy
console.log(Boolean(null));    // false  ← null 도 falsy
console.log(Boolean("hi"));    // true   ← 비어있지 않은 문자열은 truthy

암묵적 변환은 예상 못 한 결과 양산. 항상 명시적 변환 권장.

한 번 정리

  • ▸원시 7가지 (number·bigint·string·boolean·undefined·null·symbol)
  • ▸객체 1가지 (배열·함수·날짜 등 모두 포함)
  • ▸typeof null === 'object' 는 버그 (외워두기)
  • ▸변환은 암묵적 X, 명시적 O

⚡ 직접 해보기 — typeof · Array.isArray

7가지 타입을 각각 typeof 로 확인하고, null·배열의 유명한 함정도 확인하세요.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

  • ▸"이 변수에 적절한 TypeScript 타입 어노테이션 붙여줘"
  • ▸"이 === 와 == 혼용을 === 로 통일하고 의도 명확히 해줘"
  • ▸"이 코드의 JSON.parse 결과에 unknown 타입 + 타입 가드 추가해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: 변수 (var, let, const)
다음 추천: 제어 흐름 — if · for · while · switch
이전목록다음
자료형 - JavaScript