typeof 연산자

typeof 연산자는
피연산자의 데이터 타입을 문자열로 반환하는 연산자입니다.

JavaScript 
let a;
console.log(typeof a); // 출력: "undefined"

console.log(typeof true); // 출력: "boolean"
console.log(typeof 42); // 출력: "number"
console.log(typeof "Hello"); // 출력: "string"

typeof 연산자의 형식은 다음과 같습니다.

구문

JavaScript 
typeof operand // operand는 피연산자를 의미함

operand

데이터 타입을 판별하려는 변수나 값입니다.
좀 더 정확히 말하자면, 반환되는 데이터 타입을 확인하려는 객체나 기본(primitive) 데이터 값을 나타내는 표현식입니다.

이 표현식은 typeof 연산자의 오른쪽에 위치하며, typeof 연산자는 이 표현식을 평가하여 해당 값의 데이터 타입을 판별하고 그 결과를 문자열로 반환합니다. operand는 변수, 상수, 리터럴 값, 함수 호출 등이 될 수 있습니다.

간단한 예제를 통해 설명하겠습니다.

JavaScript 
let x = 42;
let y = "Hello";
let z = {key: "value"};

console.log(typeof x); // 출력: "number"
console.log(typeof y); // 출력: "string"
console.log(typeof z); // 출력: "object"

위 예제에서 x, y, z는 모두 다른 데이터 타입을 가진 변수입니다. typeof 연산자는 각각의 변수를 operand로 받아 해당 변수의 데이터 타입을 문자열로 반환합니다.

정리하면, operand는 typeof 연산자의 작동 대상이 되는 값 또는 표현식을 가리키며, 이 값의 데이터 타입을 확인하고 싶을 때 사용됩니다.

typeof 연산자로 확인할 수 있는 주요 데이터 타입과 결과

typeof 연산자로 확인할 수 있는 주요 데이터 타입과 결과
데이터 타입결과
undefined "undefined"
boolean "boolean"
number "number"
string "string"
object "object"
function "function"
symbol "symbol"
bigint "bigint"
JavaScript - 데이터 타입과 결과 예 
let a;
console.log(typeof a); // 출력: "undefined"

console.log(typeof true); // 출력: "boolean"

console.log(typeof 42); // 출력: "number"

console.log(typeof "Hello"); // 출력: "string"

console.log(typeof {}); // 출력: "object"

console.log(typeof [1, 2, 4]); // 출력: "object"

console.log(typeof new Date()); // 출력: "object"

console.log(typeof null); // 출력: "object"

console.log(typeof function() {}); // 출력: "function"

console.log(typeof class C {}); // 출력: "function"

console.log(typeof Math.sin); // 출력: "function"

console.log(typeof Symbol("foo")); // 출력: "symbol"

console.log(typeof 123n); // 출력: "bigint"

typeof 연산자로 확인 시 주의해야 할 점

null 타입

typeof 연산자는 null을 "object"로 반환합니다. 이는 실제 데이터 타입인 null과는 다른 점을 주의해야 합니다.

자바스크립트 null 값
JavaScript 
console.log(typeof null); // 출력: "object"

정규식 표현

typeof 연산자는 정규표현식을 "object"로 반환합니다. 이는 정규표현식이 내부적으로 객체로 처리되기 때문입니다.

JavaScript 
let regex = /[a-zA-Z]/;
console.log(typeof regex); // 출력: "object"

배열 확인

자바스크립트에서 변수나 값이 배열인지 확인해야 하는 경우가 많습니다.

배열은 데이터 타입이 객체입니다. 즉 typeof 연산자롤 배열의 타입을 확인하면 "object"를 반환하므로 typeof 연산자만으로는 배열인지 아닌지 확실히 알 수 없습니다.

자바스크립트에서 배열을 확인할 때는 Array.isArray() 메서드를 사용하는 것이 가장 정확합니다. Array.isArray() 메서는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환합니다.

JavaScript 
const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
자바스크립트 배열 타입 확인하기 – Array.isArray()

변수 자체가 선언되지 않았을 때 - "undefined"를 반환

변수 자체를 선언하지 않았을 때 typeof를 사용할 경우 예외를 발생시키지 않고 "undefined"를 반환합니다.

JavaScript 
// x를 선언한 적이 없음
console.log(typeof x); // "undefined"

데이터 타입이 undefined는 선언한 변수가 값이 할당되어 있지 않다는 의미의 값이지 변수가 선언되지 않았다는 의미가 아닙니다. 그럼에도 불구하고 "undefined"를 반환한다는 것입니다.

자바스크립트 undefined 값

이것은 매우 주의해야 할 점입니다.
변수가 선언되지 않았더라도 값이 할당되지 않았을 경우와 동일하게 평가합니다. 이것은 올바르지 않은 결과를 발생합니다.

변수가 선언되었는지 여부를 확인하는 좀 더 안전한 방법은 try...catch 문을 사용하는 것입니다.

JavaScript 다음은 try...catch 문을 사용한 예제입니다. 
/* 값이 할당되지 않은 변수 x */
let x;

if (x === undefined) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

/* 선언되지 않은 변수 y */
try {
    y; // 변수에 접근 시도
    console.log('변수가 선언되었습니다.');

} catch (error) {
    console.log('변수가 선언되지 않았습니다.'); 
}
// 출력: "변수가 선언되지 않았습니다."

명세서

typeof 연산자의 명세서 사양
명세서 사양
typeof ECMAScript Language Specification
#sec-typeof-operator

브라우저 호환성

typeof 연산자의 브라우저 호환성
연산자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
typeof 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

  • MDN - typeof
  • 모던 자바스크립트 Deep Dive(저자 이웅모) 2020 - 데이터 타입 - undefined 타입: 65~ 67쪽
  • 자바스크립트 완벽 가이드(저자 데이비드 플래너건) 2011 - 타입, 값, 변수 - null과 undefined: 51~25쪽

같이 보기