자바스크립트 타입 비교 함수 차이점 정리

자바스크립트는 동적 타입 언어로, 변수의 자료형이 실행 시간에 결정됩니다.
그렇기 때문에 타입 확인은 버그를 방지하고 로직의 안정성을 확보하는 데 매우 중요합니다.
이번 글에서는 자바스크립트에서 자주 사용되는 타입 판별 방법인 **typeof, instanceof, Array.isArray**의 차이점을 명확하게 비교해보겠습니다.

1. 자바스크립트에서 타입을 구분해야 하는 이유

타입이 잘못 판단되면 로직 오류나 예외 발생으로 이어질 수 있습니다.
예를 들어, null이 object로 판단되는 typeof의 한계나, 배열을 객체로 잘못 판단하는 사례는 매우 흔합니다.
정확한 타입 판별을 통해 조건문 처리, 데이터 검증, 디버깅 효율성을 높일 수 있습니다.

2. typeof: 기본형 타입 판별용

typeof는 자바스크립트에서 가장 기본적인 타입 확인 방법입니다.

typeof 123         // "number"
typeof 'hello'     // "string"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof {}          // "object"
typeof []          // "object" ← 주의
typeof null        // "object" ← 오래된 버그

문자열, 숫자, 불리언, 함수 등의 기본형(primitive type)에 유용
단, null과 array는 모두 "object"로 판단되므로 혼동 주의
배열이나 null은 별도의 방법으로 체크 필요

3. instanceof: 객체의 생성자 기반 판별

instanceof는 객체가 특정 생성자 함수로부터 만들어졌는지 판단합니다.

[] instanceof Array         // true
{} instanceof Object        // true
'abc' instanceof String     // false (리터럴은 객체가 아님)
new String('abc') instanceof String // true

원시 타입(리터럴)에 대해서는 동작하지 않음
객체의 상속 관계나 클래스 기반 타입 체크에 유리
크로스 프레임(iframe 간) 환경에서는 오작동할 수 있음

4. Array.isArray: 배열 판별 전용 함수

배열인지 정확하게 판별할 수 있는 가장 안전한 방법은 Array.isArray()입니다.

Array.isArray([]);              // true
Array.isArray({});              // false
Array.isArray('abc');           // false
Array.isArray(new Array());     // true

ECMAScript 5 이후 도입된 표준 함수
typeof나 instanceof보다 배열 판별에 특화
iframe이나 다른 execution context 간에도 정확히 동작

📌 TIP: 배열인지 확인할 때는 무조건 Array.isArray()를 사용하는 것이 가장 안전합니다.

5. 혼동하지 않기 위한 정리표

판별 방법	사용 대상	장점	단점
typeof	기본형	간단하고 빠름	null, array 구분 불가
instanceof	객체	클래스/생성자 기반 판별 가능	리터럴 타입 판단 불가
Array.isArray()	배열 전용	배열 여부 정확히 판단 가능	ECMAScript 5 이상만 지원

✅ 마무리

자바스크립트에서 타입을 정확히 비교하는 것은 안정적인 코드 작성의 핵심입니다.
각 함수의 목적과 동작 원리를 이해하면, 상황에 맞는 올바른 방법을 선택할 수 있습니다.
기본형은 typeof, 클래스 기반 객체는 instanceof, 배열은 Array.isArray()를 사용하는 습관을 들이세요.
이 세 가지 함수만 잘 이해해도 자바스크립트 타입 처리에서의 80% 이상은 커버할 수 있습니다.

기록기록