Javascript - 타입을 판별 할 수 있는 typeof 연산자 사용법
- 프로그래밍/자바스크립트
- 2021. 12. 28.
자바스크립트에서 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
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
Javascript - 만들면서 배우는 filter 함수의 정의와 사용 방법 (0) | 2022.01.25 |
---|---|
Javascript - 객체지향 프로그래밍과 함수형 프로그래밍의 차이 (2) | 2022.01.24 |
Javascript - 실시간으로 위치를 확인하는 Geolocation의 사용 방법을 알아보자 (2) | 2021.12.17 |
Javascript - 스크립트 코드를 실행시키는 eval() 사용 방법을 알아보자 (0) | 2021.12.15 |
Javascript - 자바스크립트를 통해 배우는 순수 함수의 개념 (0) | 2021.11.02 |