Javascript - 타입을 판별 할 수 있는 typeof 연산자 사용법

자바스크립트에서 typeof란 판별하려고 하는 대상의 값이 기본 타입인지 아니면 함수인지 혹은 객체인지 구체적으로 값을 식별하는 연산자입니다. 이전에도 typeof 연산자에 대해 이야기를 한 적이 있는데요. 오늘은 이전 내용을 조금 더 보충하기 위해 이 글을 작성하였습니다.

그림으로 보는 typeof 연산자 - 타입 연산자

typeof의 사용방법

 typeof를 이용해서 판별할 수 있는 값의 타입은 숫자, 참 혹은 거짓, 문자열, 함수, 객체입니다. typeof 연산자로는 null을 구분할 수 없기 때문에 데이터의 타입을 식별하기 위해서는 먼저 "==" 연산자를 이용하는 게 좋습니다. 그런 이유로 앞서 정의한 순서도에서도 값을 구분하기 전에 식별하는 값의 null 여부를 판별합니다.

 

 값이 null도 아니고 undefined도 아니라면 typeof가 반환하는 문자 값을 사용해 값을 구분합니다. 이때 구분으로 사용할 수 있는 문자 값으로는 "number", "boolean", "string", "function", "object"이 있습니다. 추가로 ES2015부터는 Symbol이라는 새로운 원시 타입의 값이 추가되었습니다.

 

 typeof 연산자를 이용하면 변수가 기본 타입(primitive type)인지 함수인지 아니면 객체인지 확인할 수 있습니다. 다만 typeof의 경우 구체적인 객체의 타입을 반환하지 않기 때문에 명확한 타입을 구분하기 위해서 instanceof 연산자를 사용합니다.

예제 코드로 알아보는 typeof

// Undefined
typeof undefined === 'undefined';
typeof undeclaredVariable === 'undefined';

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'

// Booleans
typeof true === 'boolean';

// Strings
typeof "" === 'string';
typeof "abc" === 'string';

// Symbols
typeof Symbol() === 'symbol'
typeof Symbol.iterator === 'symbol'

// Functions
typeof function(){} === 'function';
typeof class C {} === 'function';
typeof Math.sin === 'function';

// Objects
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object';
typeof new Date() === 'object';

typeof로 null 여부를 판별하면 안 된다.

 간단하지만 의외로 잘 모르고 사용하는 연산자 중에 하나가 typeof입니다. 일반적으로 typeof는 값을 식별하기 위해 사용하지만 간혹 null 여부를 판별하기 위해 사용합니다. 사실 이는 잘못된 방법입니다. 앞서 이야기한 것처럼 typeof는 null을 구분할 수 없을 뿐만 아니라 빈 값을 판별할 수 없기 때문입니다.

 

 그래서 null이나 빈 값을 확인하기 위해서는 아래와 같이 별도의 함수를 정의해서 사용해야 합니다. null과 undefined에 대한 차이를 다루는 글에서 예시로 빈 값을 확인하는 코드입니다.

const isEmpty = (value) => {
    if (value == null) {
        return true;
    }

    if (value.length) {
        return value.length === 0;
    }

    return Object.keys(value).length === 0;
}

 

참조 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof

https://262.ecma-international.org/6.0/#sec-typeof-operator