정의 및 사용 방법
typeof
연산자는
피연산자의 데이터 타입을 문자열로 반환합니다.
이 연산자는 변수나 값의 데이터 타입을 체크하는데 사용됩니다.
기본 예제
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
연산자의 형식은 다음과 같습니다.
구문
typeof operand // operand는 피연산자를 의미함
operand
데이터 타입을 판별하려는 변수나 값입니다.
좀 더 정확히 말하자면, 반환되는 데이터 타입을 확인하려는 객체나 기본(primitive) 데이터 값을 나타내는 표현식입니다.
이 표현식은 typeof
연산자의 오른쪽에 위치하며, typeof
연산자는 이 표현식을 평가하여 해당 값의 데이터 타입을 판별하고 그 결과를 문자열로 반환합니다. operand
는 변수, 상수, 리터럴 값, 함수 호출 등이 될 수 있습니다.
간단한 예제를 통해 설명하겠습니다.
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
연산자로 확인할 수 있는 데이터 타입과 결과
데이터 타입 | 결과 |
---|---|
number | "number" |
string | "string" |
boolean | "boolean" |
undefined | "undefined" |
object | "object" |
function | "function" |
symbol | "symbol" |
bigint | "bigint" |
/* 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
과는 다른 점을 주의해야 합니다.
console.log(typeof null); // 출력: "object"
정규식 표현
typeof
연산자는 정규표현식을 "object"
로 반환합니다. 이는 정규표현식이 내부적으로 객체로 처리되기 때문입니다.
let regex = /[a-zA-Z]/;
console.log(typeof regex); // 출력: "object"
배열 확인
자바스크립트에서 변수나 값이 배열인지 확인해야 하는 경우가 많습니다.
배열은 데이터 타입이 객체입니다. 즉 typeof
연산자롤 배열의 타입을 확인하면 "object"
를 반환하므로 typeof
연산자만으로는 배열인지 아닌지 확실히 알 수 없습니다.
const arr = [1, 2, 3];
console.log(typeof arr); // 출력: "object"
자바스크립트에서 배열을 확인할 때는 Array.isArray()
메서드를 사용하는 것이 가장 정확합니다. Array.isArray()
메서는
전달된 인수가 배열이면 true
, 배열이 아니면 false
를 반환합니다.
const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
변수 자체가 선언되지 않았을 때 - "undefined"
를 반환
변수 자체를 선언하지 않았을 때 typeof
를 사용할 경우 예외를 발생시키지 않고 "undefined"
를 반환합니다.
// x를 선언한 적이 없음
console.log(typeof x); // "undefined"
데이터 타입이 undefined
는 선언한 변수가 값이 할당되어 있지 않다는 의미의 값이지 변수가 선언되지 않았다는 의미가 아닙니다. 그럼에도 불구하고 "undefined"
를 반환한다는 것입니다.
이것은 매우 주의해야 할 점입니다.
변수가 선언되지 않았더라도 값이 할당되지 않았을 경우와 동일하게 평가합니다. 이것은 올바르지 않은 결과를 발생합니다.
변수가 선언되었는지 여부를 확인하는 좀 더 안전한 방법은 try...catch
문을 사용하는 것입니다.
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 라이브러리 코드가 페이지에 로드되었는지 확인하는 방법을 보여줍니다.
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
|
ECMAScript Language Specification #sec-typeof-operator |
브라우저 호환성
연산자 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
typeof
|
1 | 12 | 1 | 1 |