정의 및 사용 방법

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 연산자가 주어진 값의 데이터 타입을 나타내는 문자열을 반환하는 방식을 보여줍니다. 반환되는 값은 항상 "undefined", "boolean", "number", "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 연산자로 확인할 수 있는 데이터 타입과 결과
데이터 타입결과
number "number"
string "string"
boolean "boolean"
undefined "undefined"
object "object"
function "function"
symbol "symbol"
bigint "bigint"
JavaScript - 데이터 타입과 결과 예 
/* Numbers */
typeof 24 === "number"
typeof 3.14 === "number"
typeof NaN === "number"

typeof parseInt("10px") === "number"
typeof Number("2") === "number"  
typeof Number("글자") === "number" 

/* Strings */
typeof "코딩" === "string"
typeof "" === "string"
typeof `template literal` === "string"
typeof "24" === "string"
typeof String(24) === "string"

/* Booleans */
typeof true === "boolean"
typeof false === "boolean"
typeof Boolean(24) === "boolean"

typeof !!24 === "boolean" // 부정(not)을 의미하는 !을 두 번 호출하면 Boolean()과 동일합니다.

/* Undefined */
var x;
typeof x === "undefined";
typeof undefined === "undefined";

typeof y === "undefined"; // 선언하지 않은 변수도 "undefined"를 반환

/* Objects */
typeof {param: 1} === "object";
typeof {} === "object";

typeof [1, 2, 3] === "object"; // 배열도 "object"를 반환
typeof [] === "object"; // 빈 배열도 "object"를 반환

typeof /regex/ === "object"; // 정규식 표현식도 "object"를 반환

typeof null === "object" // null도 "object"를 반환

/* Functions */
function $() {}
typeof $ === "function";

typeof function () {} === "function";
typeof class ClassName {} === "function";

/* Symbols */
typeof Symbol() === "symbol";
typeof Symbol("foo") === "symbol";

/* BigInts */
typeof 1n === "bigint";
typeof BigInt("1") === "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 연산자만으로는 배열인지 아닌지 확실히 알 수 없습니다.

JavaScript 
const arr = [1, 2, 3];
console.log(typeof arr); // 출력: "object"

자바스크립트에서 배열을 확인할 때는 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('변수가 선언되지 않았습니다.'); 
}
// 출력: "변수가 선언되지 않았습니다."

활용 예제

실제 개발 환경에서는 jQuery와 같은 외부 자바스크립트 라이브러리가 정상적으로 로드되었는지를 확인해야 하는 경우가 종종 있습니다.
정의되지 않은 전역 변수를 직접 접근하면 일반적으로 ReferenceError가 발생하지만, typeof 연산자를 사용하면 오류 없이 안전하게 검사할 수 있습니다.

아래 예제는 jQuery 라이브러리 코드가 페이지에 로드되었는지 확인하는 방법을 보여줍니다.

JavaScript 
if (typeof jQuery === "function") {
    console.log("jQuery가 로드되어 사용 가능합니다.");
} else {
    console.log("jQuery가 로드되지 않았습니다.");
}

설명

  • typeof jQuery === "function"는 jQuery라는 전역 변수가 존재하며, 타입이 함수인지 여부를 확인합니다.
  • jQuery가 정의되어 있지 않더라도 typeof는 "undefined"를 문자열로 반환하므로, 에러 없이 조건문을 실행할 수 있습니다.
  • jQuery 라이브러리가 올바르게 로드되었다면 typeof jQuery는 "function"을 반환합니다. jQuery는 기본적으로 함수 형태로 구현되어 있기 때문입니다.

이런 방식은 CDN을 통해 외부 라이브러리를 로드하거나, jQuery 라이브러리 코드가 필수가 아닌 환경에서 선택적으로 의존성을 확인할 때 매우 유용합니다.

명세서

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

브라우저 호환성

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

참고문헌

같이 보기