🟨 1-3. 자료형 완전 정리 — String, Number, Boolean, Null, Undefined, Symbol

---

자바스크립트의 모든 데이터는 “자료형(Data Type)” 으로 구분된다.
자료형을 정확히 알아야 변수를 올바르게 선언하고,
비교·연산·함수 호출 시 예측 가능한 결과를 얻을 수 있다.

이번 글에서는 자바스크립트의 기본형(Primitive) 과 참조형(Reference) 을 완벽히 구분하고,
각 자료형의 동작 원리를 예제 중심으로 이해해보자.

---

💡 1. 자바스크립트 자료형의 두 가지 분류

분류 자료형 특징

🧱 기본형 (Primitive)	string, number, boolean, null, undefined, symbol, bigint	값 자체가 저장됨
📦 참조형 (Reference)	object, array, function 등	메모리 주소를 참조함

💬 기본형은 값 자체를 복사하고,
참조형은 주소(참조값)를 복사한다.

---

🔢 2. number (숫자형)

let age = 25; 
let price = 19.99; 
let infinity = Infinity; 
let notNumber = NaN; 

개념 설명

정수 / 실수 구분 없음	모두 number 타입
NaN	“Not a Number”, 숫자가 아닌 연산 결과
Infinity / -Infinity	무한대 표현

console.log(10 / 0); // Infinity 
console.log("abc" * 2); // NaN 

💡 typeof NaN은 "number" — 이건 자바스크립트의 오래된 설계 특징이다.

---

🧵 3. string (문자열형)

let name = "기범"; 
let message = `안녕하세요, ${name}님!`; 

✅ 작은따옴표(''), 큰따옴표(""), 백틱(``) 모두 가능
✅ 백틱(``)은 템플릿 리터럴로 문자열 안에서 변수 삽입 가능

let item = "책"; 
let price = 12000; 
console.log(`${item}의 가격은 ${price}원입니다.`); 

메서드 설명

length	문자열 길이
toUpperCase()	대문자로 변환
includes("문자")	포함 여부 확인
slice(start, end)	부분 추출

---

🔛 4. boolean (논리형)

let isActive = true; 
let isLogin = false; 

✅ true / false 두 가지 값만 존재
✅ 조건문, 비교문 등에서 자주 사용됨

if (isActive) { 
  console.log("활성화 상태입니다."); 
} 

💡 Falsy 값(거짓으로 취급되는 값)
false, 0, "", null, undefined, NaN

---

❌ 5. null (값이 없음)

let data = null; 

✅ 의도적으로 “값이 없음”을 명시할 때 사용
✅ 변수에는 존재하지만, 아직 데이터가 없는 상태

let user = null; // 사용자 정보가 아직 없음 

💡 typeof null 은 "object"
→ 초창기 자바스크립트 설계 오류지만, 호환성 때문에 그대로 유지됨.

---

🕳️ 6. undefined (정의되지 않음)

let count; 
console.log(count); // undefined 

✅ “변수는 선언되었지만, 아직 값이 할당되지 않은 상태”
✅ 시스템이 자동으로 부여하는 초기값

비교 의미

null	값이 비어있음을 의도적으로 표현
undefined	값이 설정되지 않음 (시스템 기본값)

---

🧬 7. symbol (유일한 값)

const key1 = Symbol("id"); 
const key2 = Symbol("id"); 
console.log(key1 === key2); // false 

✅ 매번 유일한 식별자를 생성
✅ 객체의 비공개 프로퍼티를 만들 때 유용

const user = { 
  [Symbol("id")]: 123, 
  name: "기범" 
}; 
console.log(user.name); // "기범" 

💡 Symbol로 만든 키는 반복문에도 나타나지 않는다.
→ 은닉(Private) 데이터 관리에 적합하다.

---

🧮 8. bigint (매우 큰 정수형)

const big = 123456789012345678901234567890n; 
console.log(big + 1n); 

✅ n을 붙여 표현 (ES2020부터 지원)
✅ Number.MAX_SAFE_INTEGER(≈ 9,007,199,254,740,991)를 초과하는 값 저장 가능

💡 단, Number와 혼합 연산은 불가능

console.log(big + 1); // ❌ TypeError 

---

⚙️ 9. typeof 연산자로 자료형 확인하기

console.log(typeof "hello"); // string 
console.log(typeof 123); // number 
console.log(typeof true); // boolean 
console.log(typeof undefined); // undefined 
console.log(typeof null); // object (주의) 
console.log(typeof Symbol()); // symbol 

✅ 자료형을 빠르게 검사할 수 있지만,
null은 항상 예외적으로 “object”를 반환한다.

---

🔄 10. 기본형 vs 참조형 차이 이해하기

let a = 10; 
let b = a; 
b = 20; 
console.log(a); // 10 

✅ 기본형은 값 자체를 복사 → 원본 영향 없음

let obj1 = { name: "기범" }; 
let obj2 = obj1; 
obj2.name = "철수"; 
console.log(obj1.name); // "철수" 

✅ 참조형은 주소를 복사 → 한쪽 변경 시 다른 쪽도 영향

---

🧠 11. 실무에서 자주 쓰는 자료형 변환

변환 코드 결과

문자열 → 숫자	Number("123")	123
숫자 → 문자열	String(123)	"123"
불리언 → 숫자	Number(true)	1
숫자 → 불리언	Boolean(0)	false
null / undefined → 숫자	Number(null) / Number(undefined)	0 / NaN

💡 자동 형변환(Type Coercion)이 많기 때문에,
항상 명시적 변환(Explicit Conversion) 을 권장한다.

---

🏁 12. 마무리 — “자료형을 이해하면 자바스크립트의 절반은 끝난다”

자료형은 모든 로직의 기초다.
타입을 정확히 이해하지 않으면, 비교 연산·조건문·함수 반환 등에서
의도치 않은 동작이 발생한다.

💬 “자바스크립트는 느슨한 타입 언어지만,
정확히 다뤄야 강력해진다.”

다음 편에서는
✅ 1-4. 연산자 총정리 — 산술, 비교, 논리, 삼항, typeof
로 이어서, 자료형을 기반으로 한 연산의 모든 원리를 다뤄보자.