value를 인자로 받아 해당하는 타입 이름(소문자)을 반환하는 getType 함수. 프로젝트 공통 유틸리티 파일에 추가해두고 사용하면 유용하게 쓸 수 있다.

const getType = (value: any) => {
  if (value === undefined) return 'undefined';
  if (value === null) return 'null';
  return value.constructor.name.toLowerCase();
};

getType(8); // 'number'
getType([8]); // 'array'
getType(() => {}); // 'function'
getType('8'); // 'string'
getType({ id: 8 }); // 'object'
getType(new Set()); // 'set'
getType(new Map()); // 'map'
getType(true); // 'boolean'

<aside> 💡 배열, 객체, 숫자, 문자열 등 모두 생성자 함수를 통해 생성된 인스턴스라고 볼 수 있다. 이러한 인스턴스는 자신의 프로토타입 객체에 있는 constructor 프로퍼티에 접근할 수 있다.

</aside>

타입 이름을 가져오는 원리는 간단하다. Array Number String 등 각 타입의 생성자 함수는 name 프로퍼티를 가지는데 이를 소문자로 변환해서 반환하는 것(typeof 연산자도 소문자를 반환한다). undefined와 null은 생성자 함수가 없으므로 별도 조건문으로 처리해야 한다.

const num = 10
console.log(num.constructor === Number) // true
console.dir(Number) // 아래 이미지 참고

console.log(Number.name) // 'Number'
console.log(Array.name) // 'Array'
console.log(Object.name) // 'Object'
console.log(Function.name) // 'Function'
console.log(Error.name) // 'Error'
console.log(Date.name) // 'Date'
// ...

각 타입의 생성자 함수는 name 프로퍼티를 가진다

참고로 null, 배열, 객체를 typeof 연산자로 검사해보면 모두 'object'를 반환한다

typeof null // 'object'
typeof {} // 'object'
typeof [] // 'object'

typeof undefined // 'undefined'
typeof NaN // 'number'