자바스크립트 데이터 타입 완벽 가이드 typeof와 기본형/참조형 구분의 모든 것

안녕하세요, 코딩하는곰입니다! 오늘은 자바스크립트 개발자라면 반드시 이해해야 할 데이터 타입에 대해 깊이 있게 알아보겠습니다. 자바스크립트의 데이터 타입은 다른 언어와 달리 동적 타입 시스템을 가지고 있어서, 때로는 예상치 못한 동작을 보여주기도 합니다. 특히 typeof 연산자의 동작 방식과 기본형/참조형의 차이점을 명확히 이해하는 것은 버그를 예방하고 효율적인 코드를 작성하는 데 필수적입니다. 이 글을 통해 여러분의 자바스크립트 실력을 한 단계 업그레이드해 보세요.

자바스크립트 데이터 타입의 기본 개념

자바스크립트의 데이터 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 나뉩니다. 이 구분은 메모리 관리 방식, 변수 할당 방식, 비교 연산 등에서 근본적인 차이를 만들어냅니다.

기본형(Primitive Type)의 특징

기본형 데이터는 불변성(immutable)을 가지며, 실제 값이 메모리에 직접 저장됩니다. 자바스크립트에는 7가지 기본형 데이터 타입이 있습니다:

1. undefined: 값이 정의되지 않은 변수의 기본값
2. null: 의도적으로 빈 값을 나타낼 때 사용
3. boolean: true 또는 false 값
4. number: 정수, 실수 등 모든 숫자 타입
5. string: 텍스트 데이터
6. symbol: ES6에서 추가된 고유하고 변경 불가능한 값
7. bigint: ES2020에서 추가된 매우 큰 정수를 다루기 위한 타입

// 기본형 데이터 예제
let undefinedVar;          // undefined
let nullVar = null;        // null
let booleanVar = true;     // boolean
let numberVar = 42;        // number
let stringVar = "Hello";   // string
let symbolVar = Symbol('id'); // symbol
let bigintVar = 123n;      // bigint

기본형 데이터의 가장 큰 특징은 값에 의한 전달(pass by value) 방식으로 동작한다는 점입니다. 변수에 기본형 값을 할당하면, 실제 값이 복사되어 새로운 메모리 공간에 저장됩니다.

let a = 10;
let b = a;  // 값의 복사 발생
b = 20;
console.log(a); // 10 (원본 값 변경되지 않음)
console.log(b); // 20

💡 개발 프로젝트 아이디어가 필요하다면, Vue.js Props 검증 완벽 가이드 Type, Required, Default로 컴포넌트 안정성 높이기를 참고해보세요.

참조형(Reference Type)의 깊은 이해

참조형 데이터는 메모리 힙(heap)에 저장되며, 변수에는 이 메모리 위치를 가리키는 참조(주소)가 저장됩니다. 대표적인 참조형 데이터로는 객체(Object), 배열(Array), 함수(Function) 등이 있습니다.

참조형의 주요 특징

• 참조에 의한 전달(pass by reference): 변수 간 할당 시 실제 데이터가 아닌 메모리 참조가 복사됩니다
• 가변성(mutable): 생성 후에도 내용을 변경할 수 있습니다
• 동적 프로퍼티: 실행 시간에 프로퍼티를 추가, 수정, 삭제할 수 있습니다

// 참조형 데이터 예제
let obj1 = { name: "곰", age: 30 };
let arr1 = [1, 2, 3, 4, 5];
let func1 = function() { return "Hello"; };
let obj2 = obj1;  // 참조 복사
obj2.name = "베어";
console.log(obj1.name); // "베어" (원본 객체도 변경됨)
console.log(obj2.name); // "베어"

참조형 데이터의 함정과 해결책

참조형 데이터를 다룰 때 가장 흔히 발생하는 문제는 의도치 않은 객체 공유입니다. 이를 방지하기 위해 깊은 복사(deep copy)를 사용해야 합니다.

// 얕은 복사 문제점
let original = { a: 1, b: { c: 2 } };
let shallowCopy = { ...original };  // 얕은 복사
shallowCopy.b.c = 999;
console.log(original.b.c); // 999 (의도치 않은 원본 변경)
// 깊은 복사 솔루션
let deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 888;
console.log(original.b.c); // 999 (원본 유지)
console.log(deepCopy.b.c); // 888

홍보용 전단이나 SNS 콘텐츠에 맞춤형 QR 코드를 넣고 싶을 때는 컬러 커스터마이징이 가능한 QR 생성기를 사용해보세요.

typeof 연산자의 모든 것

typeof 연산자는 변수의 데이터 타입을 문자열로 반환합니다. 하지만 몇 가지 주의해야 할 특이한 동작들이 있습니다.

typeof의 기본 사용법

console.log(typeof undefined);           // "undefined"
console.log(typeof true);               // "boolean"
console.log(typeof 42);                 // "number"
console.log(typeof "Hello");            // "string"
console.log(typeof Symbol('id'));       // "symbol"
console.log(typeof 123n);               // "bigint"
console.log(typeof function() {});      // "function"
console.log(typeof {});                 // "object"
console.log(typeof []);                 // "object" (주의!)
console.log(typeof null);               // "object" (유명한 버그)

typeof의 함정과 해결방법

가장 유명한 typeof의 함정은 null을 “object”로 반환하는 것입니다. 이는 자바스크립트 초기 구현의 버그로, 호환성 문제로 수정되지 않고 있습니다.

// null 체크의 올바른 방법
let value = null;
// 잘못된 방법
if (typeof value === 'object') {
    console.log('객체입니다'); // null도 여기에 해당됨!
}
// 올바른 방법
if (value === null) {
    console.log('null입니다');
} else if (typeof value === 'object' && value !== null) {
    console.log('객체입니다');
}
// 배열 타입 체크
let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
console.log(arr instanceof Array); // true

심화: 사용자 정의 타입 체크 함수

실제 프로젝트에서는 더 정확한 타입 체크가 필요할 수 있습니다.

function getType(value) {
    // null 체크
    if (value === null) {
        return 'null';
    }
    
    // 기본형 타입
    const baseType = typeof value;
    if (baseType !== 'object') {
        return baseType;
    }
    
    // 참조형 타입 상세 체크
    const toString = Object.prototype.toString;
    const typeString = toString.call(value);
    
    const typeMap = {
        '[object Array]': 'array',
        '[object Date]': 'date',
        '[object RegExp]': 'regexp',
        '[object Object]': 'object',
        '[object Error]': 'error',
        '[object Map]': 'map',
        '[object Set]': 'set',
        '[object WeakMap]': 'weakmap',
        '[object WeakSet]': 'weakset'
    };
    
    return typeMap[typeString] || 'object';
}
// 테스트
console.log(getType(null));        // "null"
console.log(getType([]));          // "array"
console.log(getType(/abc/));       // "regexp"
console.log(getType(new Date()));  // "date"
console.log(getType(new Map()));   // "map"

AI가 분석한 로또 번호 추천을 받고 싶다면, QR코드 스캔과 통계 기능을 제공하는 지니로또AI 앱이 도움이 될 것입니다.

자바스크립트의 데이터 타입과 typeof 연산자는 처음에는 단순해 보이지만, 실제로는 많은 뉘앙스와 함정들이 숨어 있습니다. 기본형과 참조형의 차이를 이해하는 것은 메모리 관리, 성능 최적화, 버그 방지에 있어 매우 중요합니다. typeof의 특이한 동작들을 이해하고 적절한 타입 체크 방법을 사용한다면, 더 견고하고 예측 가능한 코드를 작성할 수 있을 것입니다. 이 글이 자바스크립트의 데이터 타입에 대한 여러분의 이해를 깊게 하는 데 도움이 되었기를 바랍니다. 코딩하는곰은 앞으로도 자바스크립트의 깊은 내용들을 다루는 유용한 글들로 여러분을 찾아뵙겠습니다. 함께 성장하는 자바스크립트 개발자가 되어 봅시다!

무거운 앱 대신 가볍게 작동하는 웹 기반 실시간 계산기로 손쉽게 숫자를 처리할 수 있습니다.