4장. 데이터 타입

4장. 데이터 타입

데이터 타입이란?

데이터 타입(Data Type)은 변수에 저장할 수 있는 값의 종류를 나타냅니다. 자바스크립트는 동적 타입 언어이므로 변수를 선언할 때 타입을 명시하지 않지만, 값에는 타입이 있습니다.

---

자바스크립트 데이터 타입 분류

자바스크립트의 데이터 타입은 크게 두 가지로 나뉩니다:

1. 원시 타입 (Primitive Types): 불변 값
2. 참조 타입 (Reference Types): 객체

---

원시 타입 (Primitive Types)

1. Number (숫자)

정수와 실수를 모두 포함합니다.

let integer = 10;           // 정수
let float = 3.14;           // 실수
let negative = -5;          // 음수
let scientific = 1.5e10;    // 과학적 표기법 (1.5 × 10¹⁰)
let hex = 0xFF;             // 16진수 (255)
let octal = 0o10;           // 8진수 (8)
let binary = 0b1010;        // 2진수 (10)

특수한 숫자 값

let infinity = Infinity;   // 무한대
let notANumber = NaN;       // 숫자가 아님 (Not a Number)

console.log(typeof infinity);  // "number"
console.log(typeof notANumber); // "number"

숫자 연산

let a = 10;
let b = 3;

console.log(a + b);  // 13 (덧셈)
console.log(a - b);  // 7 (뺄셈)
console.log(a * b);  // 30 (곱셈)
console.log(a / b);  // 3.333... (나눗셈)
console.log(a % b);  // 1 (나머지)
console.log(a ** b); // 1000 (거듭제곱)

---

2. String (문자열)

텍스트 데이터를 나타냅니다. 작은따옴표, 큰따옴표, 백틱으로 감쌉니다.

let single = '작은따옴표';
let double = "큰따옴표";
let backtick = `백틱`;  // 템플릿 리터럴 (ES6+)

// 모두 같은 문자열 타입
console.log(typeof single);   // "string"
console.log(typeof double);    // "string"
console.log(typeof backtick);  // "string"

템플릿 리터럴 (Template Literal)

백틱(`)을 사용하여 문자열 내에 변수를 삽입할 수 있습니다.

let name = '홍길동';
let age = 25;

// 일반 문자열 연결
let message1 = '이름: ' + name + ', 나이: ' + age;

// 템플릿 리터럴 (권장)
let message2 = `이름: ${name}, 나이: ${age}`;

console.log(message1);  // "이름: 홍길동, 나이: 25"
console.log(message2);  // "이름: 홍길동, 나이: 25"

여러 줄 문자열

// 일반 문자열 (이스케이프 시퀀스 사용)
let multi1 = '첫 번째 줄\n두 번째 줄\n세 번째 줄';

// 템플릿 리터럴 (자연스러운 여러 줄)
let multi2 = `첫 번째 줄
두 번째 줄
세 번째 줄`;

console.log(multi1);
console.log(multi2);

문자열 연산

let str1 = 'Hello';
let str2 = 'World';

console.log(str1 + ' ' + str2);  // "Hello World" (연결)
console.log(str1 + 123);         // "Hello123" (자동 변환)
console.log('10' + 5);           // "105" (문자열 연결)
console.log('10' - 5);           // 5 (숫자 연산)

---

3. Boolean (불린)

true 또는 false 값만 가집니다.

let isTrue = true;
let isFalse = false;

console.log(typeof isTrue);   // "boolean"
console.log(typeof isFalse);  // "boolean"

불린 값 생성

// 비교 연산 결과
let result1 = 10 > 5;        // true
let result2 = 10 < 5;        // false
let result3 = 10 === 10;     // true

// 논리 연산
let andResult = true && false;  // false
let orResult = true || false;   // true
let notResult = !true;          // false

// 값의 존재 여부
let hasValue = !!'hello';       // true
let isEmpty = !!'';             // false

---

4. undefined

변수가 선언되었지만 값이 할당되지 않았을 때의 값입니다.

let x;
console.log(x);           // undefined
console.log(typeof x);    // "undefined"

// 명시적으로 undefined 할당 (권장하지 않음)
let y = undefined;

---

5. null

의도적으로 값이 없음을 나타냅니다.

let value = null;
console.log(value);        // null
console.log(typeof value);  // "object" (주의: 버그)

// null 체크
if (value === null) {
    console.log('값이 없습니다');
}

undefined vs null

// undefined: 값이 할당되지 않음
let a;
console.log(a);  // undefined

// null: 의도적으로 값 없음
let b = null;
console.log(b);  // null

// 비교
console.log(a === b);  // false
console.log(a == b);   // true (느슨한 비교)

---

6. Symbol (ES6+)

고유한 값을 나타내는 원시 타입입니다.

let sym1 = Symbol('description');
let sym2 = Symbol('description');

console.log(sym1 === sym2);  // false (항상 고유함)
console.log(typeof sym1);    // "symbol"

사용 예시:

// 객체의 고유한 키로 사용
let id = Symbol('id');
let user = {
    [id]: 123,
    name: '홍길동'
};

console.log(user[id]);  // 123

---

참조 타입 (Reference Types)

7. Object (객체)

여러 값을 하나의 단위로 묶어 저장합니다.

let user = {
    name: '홍길동',
    age: 25,
    isActive: true
};

console.log(typeof user);  // "object"
console.log(user.name);    // "홍길동"
console.log(user.age);     // 25

8. Array (배열)

여러 값을 순서대로 저장합니다.

let fruits = ['사과', '바나나', '포도'];

console.log(typeof fruits);  // "object" (배열도 객체)
console.log(Array.isArray(fruits));  // true (배열 확인)
console.log(fruits[0]);  // "사과"

9. Function (함수)

함수도 객체의 일종입니다.

function greet() {
    return 'Hello';
}

console.log(typeof greet);  // "function"

---

타입 확인하기

typeof 연산자

console.log(typeof 10);              // "number"
console.log(typeof 'hello');         // "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 function(){});    // "function"

타입 확인 헬퍼 함수

// null 체크
function isNull(value) {
    return value === null;
}

// 배열 확인
function isArray(value) {
    return Array.isArray(value);
}

// 숫자 확인 (NaN 제외)
function isNumber(value) {
    return typeof value === 'number' && !isNaN(value);
}

// 사용 예시
console.log(isNull(null));        // true
console.log(isArray([1, 2, 3]));  // true
console.log(isNumber(10));        // true
console.log(isNumber(NaN));       // false

---

타입 변환 (Type Conversion)

암시적 타입 변환 (Implicit Conversion)

자바스크립트가 자동으로 타입을 변환합니다.

// 문자열로 변환
console.log('10' + 5);        // "105" (문자열 연결)
console.log('10' + '5');      // "105"

// 숫자로 변환
console.log('10' - 5);        // 5
console.log('10' * 5);        // 50
console.log('10' / 5);        // 2

// 불린으로 변환
console.log(!!1);             // true
console.log(!!0);             // false
console.log(!!'');            // false
console.log(!!'hello');       // true

명시적 타입 변환 (Explicit Conversion)

개발자가 직접 타입을 변환합니다.

// 문자열로 변환
let num = 10;
console.log(String(num));     // "10"
console.log(num.toString());  // "10"
console.log(num + '');        // "10"

// 숫자로 변환
let str = '10';
console.log(Number(str));     // 10
console.log(parseInt(str));   // 10 (정수)
console.log(parseFloat('3.14')); // 3.14 (실수)
console.log(+str);            // 10 (단항 연산자)

// 불린으로 변환
console.log(Boolean(1));      // true
console.log(Boolean(0));      // false
console.log(Boolean(''));     // false
console.log(Boolean('hello')); // true

---

데이터 타입 종합 예제

// Number
let score = 90;
let price = 99.99;

// String
let name = '홍길동';
let message = `안녕하세요, ${name}님!`;

// Boolean
let isPass = true;
let result = score >= 60;

// undefined
let undefinedVar;

// null
let emptyValue = null;

// Object
let user = {
    name: '홍길동',
    age: 25
};

// Array
let fruits = ['사과', '바나나', '포도'];

// 타입 확인
console.log(typeof score);        // "number"
console.log(typeof name);         // "string"
console.log(typeof isPass);       // "boolean"
console.log(typeof undefinedVar); // "undefined"
console.log(typeof emptyValue);   // "object"
console.log(typeof user);         // "object"
console.log(typeof fruits);       // "object"
console.log(Array.isArray(fruits)); // true

---

주의사항

1. NaN (Not a Number)

let result = 'hello' - 5;
console.log(result);        // NaN
console.log(typeof result); // "number" (주의!)

// NaN 체크
console.log(isNaN(result));        // true
console.log(Number.isNaN(result)); // true (권장)

2. null의 타입

console.log(typeof null);  // "object" (버그이지만 수정되지 않음)

// null 체크는 === 사용
if (value === null) {
    // null 처리
}

3. 배열의 타입

console.log(typeof []);  // "object"

// 배열 확인은 Array.isArray() 사용
console.log(Array.isArray([]));  // true

4. 타입 변환 주의

// 문자열 연결
console.log('10' + 5);    // "105" (문자열)
console.log(10 + '5');    // "105" (문자열)

// 숫자 연산
console.log('10' - 5);    // 5 (숫자)
console.log('10' * 5);    // 50 (숫자)
console.log('10' / 5);    // 2 (숫자)

---

연습 문제

1. 타입 확인
   • 다음 값들의 타입을 확인하세요:
     • 10
     • 'hello'
     • true
     • undefined
     • null
     • []
     • {}
2. 타입 변환
   • 숫자 123을 문자열로 변환하세요.
   • 문자열 '456'을 숫자로 변환하세요.
   • 불린 값 true를 숫자로 변환하세요.
3. 템플릿 리터럴
   • 이름과 나이를 변수에 저장하고, 템플릿 리터럴을 사용하여 "안녕하세요, [이름]님! 나이는 [나이]세입니다."를 출력하세요.
4. 타입 확인 함수
   • 값이 숫자인지 확인하는 함수를 작성하세요 (NaN 제외).

---

다음 장 예고

다음 장에서는 연산자(산술, 비교, 논리 연산자 등)에 대해 학습합니다.