데이터 타입

작성자

익명

작성일

2026.07.27

조회수

버전

JavaScript 데이터 타입 원시 타입 객체 타입 동적 타이핑 메모리 구조 타입 변환 TypeScript 초급

📋 문서 버전

이 문서는 2개의 버전이 있습니다. 현재 최신 버전을 보고 있습니다.

JavaScript 데이터 타입

개요

JavaScript는 동적 타이핑(dynamically typed) 언어로, 변수의 데이터 타입이 실행 시점에 결정됩니다. 이 문서는 JavaScript의 기본 데이터 타입과 객체 타입을 체계적으로 설명하며, 각 타입의 특징과 사용법을 다룹니다. 프로그래밍 효율성을 높이기 위해 타입별 특성과 변환 규칙을 이해하는 것이 중요합니다.

데이터 타입 분류

JavaScript의 데이터 타입은 원시 타입(primitive type) 과 객체 타입(object type) 으로 구분됩니다.

원시 타입

7가지 원시 타입은 다음과 같습니다: - number: 숫자형 - string: 문자열 - boolean: 불리언 - null: 의도적으로 값이 없음을 나타냄 - undefined: 할당되지 않은 변수 - symbol: 고유한 식별자 - bigint: 큰 정수

객체 타입

모든 원시 타입을 제외한 나머지가 객체 타입입니다: - Object: 일반 객체 - Array: 배열 - Function: 함수 - Date, RegExp 등 내장 객체

원시 타입 상세 설명

1. 숫자형(Number)

JavaScript의 숫자형은 IEEE 754 64비트 부동소수점 형식을 따릅니다.

let age = 25;          // 정수
let price = 9.99;      // 실수
let infinity = 1 / 0;  // Infinity

특수 값 - NaN: Not-a-Number (예: 0 / 0) - Infinity, -Infinity

2. 문자열(String)

유니코드 기반의 텍스트 데이터입니다. 따옴표 종류에 따라 차이가 없습니다.

let name = "Alice";
let greeting = `Hello, ${name}`;  // 템플릿 리터럴

문자열 메서드

"Hello".toUpperCase()  // "HELLO"
"World".length         // 5

3. 불리언(Boolean)

참/거짓을 표현하는 2진 논리 타입입니다.

let isActive = true;
let isEmpty = false;

Falsy 값 - false, 0, "", null, undefined, NaN

4. null과 undefined

비교 항목	null	undefined
의미	의도적 공백	미정의 상태
typeof	"object"	"undefined"

let user = null;       // 의도적 초기화
let password;          // 암시적 undefined

5. 심볼(Symbol)

고유하고 변경 불가능한 기본 데이터 타입로, 객체 속성 키로 사용됩니다.

const id = Symbol("id");
let obj = {
  [id]: 123
};

6. BigInt

2^53 - 1을 초과하는 정수를 표현할 수 있는 타입입니다.

let bigNum = 9007199254740991n;

객체 타입 상세 설명

1. 객체(Object)

키-값 쌍의 집합입니다.

let user = {
  name: "Bob",
  age: 30
};

속성 접근

user.name      // "Bob"
user["age"]    // 30

2. 배열(Array)

순서가 있는 데이터 집합입니다.

let fruits = ["apple", "banana"];
fruits[0] = "orange";

배열 메서드

fruits.push("grape");
fruits.length  // 3

3. 함수(Function)

일급 객체로, 변수에 할당 가능하고 매개변수로 전달 가능합니다.

function greet(name) {
  return `Hello, ${name}`;
}

타입 검사와 변환

typeof 연산자

typeof 42            // "number"
typeof "JS"          // "string"
typeof Symbol()      // "symbol"

제한 사항 - null → "object" (역사적 오류) - 배열 → "object"

instanceof 연산자

객체의 프로토타입 체인을 확인합니다.

[] instanceof Array  // true

타입 변환

암시적 변환 예시

5 + "5"    // "55"
"5" - 2    // 3

명시적 변환

Number("123")    // 123
String(123)      // "123"
Boolean(0)       // false

메모리 구조와 전달 방식

원시 타입과 객체 타입의 가장 핵심적인 차이는 메모리에 저장되는 방식과 변수 간의 값 전달 방식에 있습니다.

값에 의한 전달 (Pass by Value)

원시 타입은 변수에 실제 값이 직접 저장됩니다. 변수를 다른 변수에 할당하면 값이 복사되어 서로 독립적인 메모리 공간을 가집니다.

참조에 의한 전달 (Pass by Reference)

객체 타입은 변수에 값이 아닌, 값이 저장된 메모리 주소(참조값)가 저장됩니다. 변수를 할당하면 주소값이 복사되므로, 두 변수가 동일한 객체를 가리키게 됩니다.

메모리 구조 도식도

[ 원시 타입: Pass by Value ]          [ 객체 타입: Pass by Reference ]
Variable A  ──▶ [ Value: 10 ]        Variable A  ──▶ [ Address: 0x101 ] ──┐
                                                                         │
Variable B  ──▶ [ Value: 10 ]        Variable B  ──▶ [ Address: 0x101 ] ──┴─▶ [ Object { name: "Bob" } ]
(독립적 공간, 값 복사)                  (동일 주소 참조, 참조 복사)

원시 래퍼 객체(Primitive Wrapper Objects)

원시 타입은 객체가 아니므로 메서드를 가질 수 없지만, JavaScript는 원시 타입의 값에 접근하여 메서드를 호출할 때 일시적으로 래퍼 객체(Wrapper Object)를 생성합니다.

자동 박싱(Auto-boxing) 동작 원리

"hello".toUpperCase()와 같은 코드를 실행하면 엔진은 내부적으로 다음과 같은 과정을 거칩니다. 1. 원시 값 "hello"를 new String("hello") 객체로 변환 (박싱) 2. 생성된 객체의 toUpperCase() 메서드 실행 3. 결과값을 반환한 후 래퍼 객체는 즉시 소멸 (언박싱)

박싱과 언박싱 비교 예제

// 1. 자동 박싱 (일반적인 사용)
let str = "hello"; 
console.log(str.toUpperCase()); // "HELLO" (임시 객체 생성 후 즉시 소멸)

// 2. 명시적 박싱 (권장되지 않음)
let wrappedStr = new String("hello");
console.log(typeof wrappedStr); // "object"

// 3. 비교 차이
console.log(str == wrappedStr);  // true (값 비교)
console.log(str === wrappedStr); // false (타입이 다름: string vs object)

정밀한 타입 판별법

typeof와 instanceof의 한계를 극복하기 위해 더 정밀한 판별 방법이 사용됩니다. 특히 Object.prototype.toString.call()은 객체의 내부 슬롯([[Class]])을 확인하여 정확한 타입을 반환합니다.

타입 판별법별 결과값 비교 표

대상 값	`typeof`	`instanceof Array`	`Array.isArray()`	`Object.prototype.toString.call()`
`42`	`"number"`	`false`	`false`	`"[object Number]"`
`"JS"`	`"string"`	`false`	`false`	`"[object String]"`
`[]`	`"object"`	`true`	`true`	`"[object Array]"`
`{}`	`"object"`	`false`	`false`	`"[object Object]"`
`null`	`"object"`	`false`	`false`	`"[object Null]"`
`undefined`	`"undefined"`	`false`	`false`	`"[object Undefined]"`
`() => {}`	`"function"`	`false`	`false`	`"[object Function]"`

타입 시스템의 특성과 주의점

JavaScript의 동적 타이핑(Dynamic Typing)은 유연함을 제공하지만, 대규모 프로젝트에서는 런타임 오류의 주요 원인이 됩니다.

런타임 오류 가능성

변수의 타입이 고정되지 않아, 개발자가 예상치 못한 타입의 값이 전달될 때 오류가 발생합니다.

function calculateTotal(price, quantity) {
  return price * quantity;
}

calculateTotal(100, "2"); // 200 (암시적 형변환으로 작동)
calculateTotal(100, "abc"); // NaN (런타임에 논리적 오류 발생)

이러한 불안정성을 해결하기 위해 TypeScript와 같은 정적 타입 시스템이 도입되었습니다. - 컴파일 타임 체크: 코드를 실행하기 전, 빌드 단계에서 타입 불일치를 발견하여 버그를 사전에 방지합니다. - 코드 가독성 및 유지보수: 변수와 함수의 입력/출력 타입이 명시되어 문서화 효과를 얻으며, IDE의 자동 완성 기능을 극대화할 수 있습니다. - 안정성: undefined나 null 가능성을 타입 수준에서 강제(Strict Null Checks)하여 런타임 크래시를 획기적으로 줄입니다.

참고 자료

MDN JavaScript Data Types
ECMAScript 2023 명세서
"You Don't Know JS" 시리즈 - Kyle Simpson

이 문서는 ECMAScript 2023 기준으로 작성되었습니다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# JavaScript 데이터 타입

## 개요
JavaScript는 동적 타이핑(dynamically typed) 언어로, 변수의 데이터 타입이 실행 시점에 결정됩니다. 이 문서는 JavaScript의 기본 데이터 타입과 객체 타입을 체계적으로 설명하며, 각 타입의 특징과 사용법을 다룹니다. 프로그래밍 효율성을 높이기 위해 타입별 특성과 변환 규칙을 이해하는 것이 중요합니다.

## 데이터 타입 분류
JavaScript의 데이터 타입은 **원시 타입(primitive type)** 과 **객체 타입(object type)** 으로 구분됩니다.

### 원시 타입
7가지 원시 타입은 다음과 같습니다:
- `number`: 숫자형
- `string`: 문자열
- `boolean`: 불리언
- `null`: 의도적으로 값이 없음을 나타냄
- `undefined`: 할당되지 않은 변수
- `symbol`: 고유한 식별자
- `bigint`: 큰 정수

### 객체 타입
모든 원시 타입을 제외한 나머지가 객체 타입입니다:
- `Object`: 일반 객체
- `Array`: 배열
- `Function`: 함수
- `Date`, `RegExp` 등 내장 객체

---

## 원시 타입 상세 설명

### 1. 숫자형(Number)
JavaScript의 숫자형은 IEEE 754 64비트 부동소수점 형식을 따릅니다.

```javascript
let age = 25;          // 정수
let price = 9.99;      // 실수
let infinity = 1 / 0;  // Infinity
```

**특수 값**
- `NaN`: Not-a-Number (예: `0 / 0`)
- `Infinity`, `-Infinity`

### 2. 문자열(String)
유니코드 기반의 텍스트 데이터입니다. 따옴표 종류에 따라 차이가 없습니다.

```javascript
let name = "Alice";
let greeting = `Hello, ${name}`;  // 템플릿 리터럴
```

**문자열 메서드**
```javascript
"Hello".toUpperCase()  // "HELLO"
"World".length         // 5
```

### 3. 불리언(Boolean)
참/거짓을 표현하는 2진 논리 타입입니다.

```javascript
let isActive = true;
let isEmpty = false;
```

**Falsy 값**
- `false`, `0`, `""`, `null`, `undefined`, `NaN`

### 4. null과 undefined
| 비교 항목 | null         | undefined     |
|----------|--------------|---------------|
| 의미     | 의도적 공백  | 미정의 상태   |
| typeof   | "object"     | "undefined"   |

```javascript
let user = null;       // 의도적 초기화
let password;          // 암시적 undefined
```

### 5. 심볼(Symbol)
고유하고 변경 불가능한 기본 데이터 타입로, 객체 속성 키로 사용됩니다.

```javascript
const id = Symbol("id");
let obj = {
  [id]: 123
};
```

### 6. BigInt
2^53 - 1을 초과하는 정수를 표현할 수 있는 타입입니다.

```javascript
let bigNum = 9007199254740991n;
```

---

## 객체 타입 상세 설명

### 1. 객체(Object)
키-값 쌍의 집합입니다.

```javascript
let user = {
  name: "Bob",
  age: 30
};
```

**속성 접근**
```javascript
user.name      // "Bob"
user["age"]    // 30
```

### 2. 배열(Array)
순서가 있는 데이터 집합입니다.

```javascript
let fruits = ["apple", "banana"];
fruits[0] = "orange";
```

**배열 메서드**
```javascript
fruits.push("grape");
fruits.length  // 3
```

### 3. 함수(Function)
일급 객체로, 변수에 할당 가능하고 매개변수로 전달 가능합니다.

```javascript
function greet(name) {
  return `Hello, ${name}`;
}
```

---

## 타입 검사와 변환

### typeof 연산자
```javascript
typeof 42            // "number"
typeof "JS"          // "string"
typeof Symbol()      // "symbol"
```

**제한 사항**
- `null` → "object" (역사적 오류)
- 배열 → "object"

### instanceof 연산자
객체의 프로토타입 체인을 확인합니다.

```javascript
[] instanceof Array  // true
```

### 타입 변환
**암시적 변환 예시**
```javascript
5 + "5"    // "55"
"5" - 2    // 3
```

**명시적 변환**
```javascript
Number("123")    // 123
String(123)      // "123"
Boolean(0)       // false
```

---

## 최신 타입 관련 기능
### 옵셔널 체이닝(Optional Chaining)
```javascript
user?.address?.city  // undefined 반환
```

### Null 병합 연산자(Nullish Coalescing)
```javascript
let name = null ?? "Guest";  // "Guest"
```

---

## 메모리 구조와 전달 방식
원시 타입과 객체 타입의 가장 핵심적인 차이는 메모리에 저장되는 방식과 변수 간의 값 전달 방식에 있습니다.

### 값에 의한 전달 (Pass by Value)
원시 타입은 변수에 **실제 값**이 직접 저장됩니다. 변수를 다른 변수에 할당하면 값이 복사되어 서로 독립적인 메모리 공간을 가집니다.

### 참조에 의한 전달 (Pass by Reference)
객체 타입은 변수에 값이 아닌, 값이 저장된 **메모리 주소(참조값)**가 저장됩니다. 변수를 할당하면 주소값이 복사되므로, 두 변수가 동일한 객체를 가리키게 됩니다.

**메모리 구조 도식도**
```text
[ 원시 타입: Pass by Value ]          [ 객체 타입: Pass by Reference ]
Variable A  ──▶ [ Value: 10 ]        Variable A  ──▶ [ Address: 0x101 ] ──┐
                                                                         │
Variable B  ──▶ [ Value: 10 ]        Variable B  ──▶ [ Address: 0x101 ] ──┴─▶ [ Object { name: "Bob" } ]
(독립적 공간, 값 복사)                  (동일 주소 참조, 참조 복사)
```

---

## 원시 래퍼 객체(Primitive Wrapper Objects)
원시 타입은 객체가 아니므로 메서드를 가질 수 없지만, JavaScript는 원시 타입의 값에 접근하여 메서드를 호출할 때 일시적으로 **래퍼 객체(Wrapper Object)**를 생성합니다.

### 자동 박싱(Auto-boxing) 동작 원리
`"hello".toUpperCase()`와 같은 코드를 실행하면 엔진은 내부적으로 다음과 같은 과정을 거칩니다.
1. 원시 값 `"hello"`를 `new String("hello")` 객체로 변환 (**박싱**)
2. 생성된 객체의 `toUpperCase()` 메서드 실행
3. 결과값을 반환한 후 래퍼 객체는 즉시 소멸 (**언박싱**)

**박싱과 언박싱 비교 예제**
```javascript
// 1. 자동 박싱 (일반적인 사용)
let str = "hello"; 
console.log(str.toUpperCase()); // "HELLO" (임시 객체 생성 후 즉시 소멸)

// 2. 명시적 박싱 (권장되지 않음)
let wrappedStr = new String("hello");
console.log(typeof wrappedStr); // "object"

// 3. 비교 차이
console.log(str == wrappedStr);  // true (값 비교)
console.log(str === wrappedStr); // false (타입이 다름: string vs object)
```

---

## 정밀한 타입 판별법
`typeof`와 `instanceof`의 한계를 극복하기 위해 더 정밀한 판별 방법이 사용됩니다. 특히 `Object.prototype.toString.call()`은 객체의 내부 슬롯(`[[Class]]`)을 확인하여 정확한 타입을 반환합니다.

**타입 판별법별 결과값 비교 표**

| 대상 값 | `typeof` | `instanceof Array` | `Array.isArray()` | `Object.prototype.toString.call()` |
| :--- | :--- | :--- | :--- | :--- |
| `42` | `"number"` | `false` | `false` | `"[object Number]"` |
| `"JS"` | `"string"` | `false` | `false` | `"[object String]"` |
| `[]` | `"object"` | `true` | `true` | `"[object Array]"` |
| `{}` | `"object"` | `false` | `false` | `"[object Object]"` |
| `null` | `"object"` | `false` | `false` | `"[object Null]"` |
| `undefined` | `"undefined"` | `false` | `false` | `"[object Undefined]"` |
| `() => {}` | `"function"` | `false` | `false` | `"[object Function]"` |

---

## 타입 시스템의 특성과 주의점
JavaScript의 **동적 타이핑(Dynamic Typing)**은 유연함을 제공하지만, 대규모 프로젝트에서는 런타임 오류의 주요 원인이 됩니다.

### 런타임 오류 가능성
변수의 타입이 고정되지 않아, 개발자가 예상치 못한 타입의 값이 전달될 때 오류가 발생합니다.
```javascript
function calculateTotal(price, quantity) {
  return price * quantity;
}

calculateTotal(100, "2"); // 200 (암시적 형변환으로 작동)
calculateTotal(100, "abc"); // NaN (런타임에 논리적 오류 발생)
```

### 정적 타입 시스템(TypeScript)의 등장 배경
이러한 불안정성을 해결하기 위해 **TypeScript**와 같은 정적 타입 시스템이 도입되었습니다.
- **컴파일 타임 체크**: 코드를 실행하기 전, 빌드 단계에서 타입 불일치를 발견하여 버그를 사전에 방지합니다.
- **코드 가독성 및 유지보수**: 변수와 함수의 입력/출력 타입이 명시되어 문서화 효과를 얻으며, IDE의 자동 완성 기능을 극대화할 수 있습니다.
- **안정성**: `undefined`나 `null` 가능성을 타입 수준에서 강제(`Strict Null Checks`)하여 런타임 크래시를 획기적으로 줄입니다.

## 참고 자료
1. [MDN JavaScript Data Types](https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures)
2. [ECMAScript 2023 명세서](https://tc39.es/ecma262/)
3. "You Don't Know JS" 시리즈 - Kyle Simpson

> 이 문서는 ECMAScript 2023 기준으로 작성되었습니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나