[JAVASCRIPT] data type 확인하기

자바스크립트에는 다양한 종류의 data type이 존재합니다.
입문자가 아니고서야 이들이 어떤 타입인지는 한눈에 보면 알 수 있습니다.

 true // boolean
 "howoo" // string
 123 // number
 undefined // undefined
 Symbol() // symbol
 function () {} // function
 {} // object
 [] // array
 null // null

그런데 만약 변수에 담겨있는 값의 data type을 알고 싶은 경우, 그리고 해당 데이터를 직접 볼 수 없는 경우 어떻게 할까요? console.log로 확인하면 됩니다!

지금부터 이러한 경우 data type을 확인할 수 있는 방법들에 대해 소개하고자 합니다.

1. typeof

가장 흔히 사용하는 방법은 typeof 연산자 입니다.
그러나 이 방법에는 치명적인 단점이 존재하는데요.

console.log(typeof true); // boolean
console.log(typeof "howoo"); // string
console.log(typeof 123); // number
console.log(typeof undefined); // undefined
console.log(typeof function () {}); // function
console.log(typeof Symbol()); // symbol

console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof null); // object

객체와 배열 그리고 null이 모두 "object"를 return 한다는 점입니다.
판독기가 있는데 서로 다른 물체를 같다고 판단한다면 그 판독기는 쓸모가 없습니다.
따라서 typeof는 사용이 간편하나 data type 판독기로써의 역할은 불완전하다고 볼 수 있습니다.

2. .constructor

다음은 constructor로 확인하는 방법입니다.

console.log(true.constructor); // ƒ Boolean() { [native code] }
console.log("howoo".constructor); // ƒ String() { [native code] }
console.log((123).constructor); // ƒ Number() { [native code] }
console.log(function () {}.constructor); // ƒ Function() { [native code] }
console.log(Symbol().constructor); // ƒ Symbol() { [native code] }
console.log({}.constructor); // ƒ Object() { [native code] }
console.log([].constructor); // ƒ Array() { [native code] }

console.log(undefined.constructor); 
// Uncaught TypeError: Cannot read properties of undefined (reading 'constructor')
console.log(null.constructor); 
// Uncaught TypeError: Cannot read properties of null (reading 'constructor')

하지만 이 역시 불완전한데요.
null과 undefined에서는 constructor가 없기 때문에 에러가 발생합니다.

3. typeof와 .constructor 섞어서 사용

typeof는 객체, 배열, null을 구분하지 못하고
.constructor는 null과 undefined를 구분하지 못하므로 이 둘을 혼합하여 조건문을 사용하면 완벽한 data type 판독기를 제작할 수 있습니다.

function checkTypeV1(data) {
// typeof를 "object"로 return 하는 자료형(객체, 배열, null)을 구분
  if (typeof data === "object") {
    if (data?.constructor === Object) {
      return "object";
    } else if (data?.constructor === Array) {
      return "array";
    } else {
// null은 옵셔널체이닝(null?.constructor)에 의해 undefined가 된다
      return "null";
    }
  }
  return typeof data;
}

console.log(checkTypeV1(true)); // boolean
console.log(checkTypeV1("howoo")); // string
console.log(checkTypeV1(123)); // number
console.log(checkTypeV1(undefined)); // undefined
console.log(checkTypeV1(Symbol())); // symbol
console.log(checkTypeV1(() => {})); // function
console.log(checkTypeV1({})); // object
console.log(checkTypeV1([])); // array
console.log(checkTypeV1(null)); // null

위 방법은 완전하기는 하지만 조건문을 적어야 하고 코드가 길다는 단점이 있습니다.

4. Object.prototype.toString.call(data).slice(8, -1)

조건문을 사용하지 않아도 되는 방법이 있습니다. 물론 식이 좀 복잡합니다.

console.log(Object.prototype.toString.call("howoo")); // [object String]
console.log(Object.prototype.toString.call("howoo").slice(8, -1)); // String

Object객체의 prototype에 있는 .toString 메소드를 "howoo"라는 문자열이 사용하고 반환되는 문자열의 8번째의 문자부터 마지막 문자를 제외한 문자열을 return하는 식입니다.

함수를 만들어보면 다음과 같습니다.

function checkType2(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

console.log(checkType2(true)); // Boolean
console.log(checkType2("howoo")); // String
console.log(checkType2(123)); // Number
console.log(checkType2(undefined)); // Undefined
console.log(checkType2(Symbol())); // Symbol
console.log(checkType2(() => {})); // Function
console.log(checkType2({})); // Object
console.log(checkType2([])); // Array
console.log(checkType2(null)); // Null

가장 짧은 코드이긴 하나 slice(8,-1)이라는 부분이 깔끔하지 않은 느낌을 줍니다.

Wrap up

사실 지금까지 실제로 코딩을 하면서 data type을 알기 위해 이러한 식들을 사용해본 경험은 거의 없습니다. 그러나 이러한 식들을 어떻게 적용하고 서로의 장단점을 분석해보는 과정은 의미가 있다고 생각합니다.