20.detect-data-type-in-JavaScript.md

20. Detect data type in JavaScript

Problem

https://bigfrontend.dev/problem/detect-data-type-in-JavaScript

Problem Description

This is an easy problem.

For all the basic data types in JavaScript, how could you write a function to detect the type of arbitrary data?

Besides basic types, you need to also handle also commonly used complex data type including Array, ArrayBuffer, Map, Set, Date and Function

The goal is not to list up all the data types but to show us how to solve the problem when we need to.

The type should be lowercase

detectType(1); // 'number'
detectType(new Map()); // 'map'
detectType([]); // 'array'
detectType(null); // 'null'

// more in judging step

Solution

const dataTypes = new Map([
  [Number, 'number'],
  [String, 'string'],
  [Boolean, 'boolean'],
  [Array, 'array'],
  [ArrayBuffer, 'arraybuffer'],
  [Date, 'date'],
  [Map, 'map'],
  [Set, 'set'],
]);

/**
 * @param {any} data
 * @return {string}
 */
function detectType(data) {
  if (typeof data !== 'object') {
    return typeof data;
  }

  if (data === null) {
    return 'null';
  }

  for (const [type, name] of dataTypes.entries()) {
    if (data instanceof type) {
      return name;
    }
  }

  return 'object';
}

Usage

console.log(detectType("hello")); // string
console.log(detectType(1)); // number
console.log(detectType(true)); // boolean
console.log(detectType({})); // object
console.log(detectType([])); // array
console.log(detectType(null)); // null
console.log(detectType(undefined)); // undefined
console.log(detectType(() => {})); // function
console.log(detectType(new Date())); // date
console.log(detectType(new Map())); // map
console.log(detectType(new Set())); // set

Explanation

Let's break down the detectType function and its usage:

1. Map Definition: The dataTypes map is defined with JavaScript built-in types as keys and their corresponding string names as values.

2. Function Definition: The detectType function is defined to take one argument, data, and return a string representing its type.

3. Non-object Types: If data is not an object (i.e., it's a number, string, boolean, undefined, or function), it returns the result of typeof data, which will be a string representing its type.

4. Null Type: If data is null, it returns the string "null". This is necessary because typeof null incorrectly returns "object" in JavaScript.

5. Object Types: If data is an object, it iterates over the entries of dataTypes. If data is an instance of the current type, it returns the corresponding name. This covers array, arraybuffer, date, map, and set types.

6. Default Type: If data is an object but not an instance of any type in dataTypes, it returns the string "object". This covers plain objects and any other kinds of objects not covered by dataTypes.

7. Usage: The function is then called with various types of data, and the results are logged to the console. The output matches the comments after each call, demonstrating that the function correctly identifies the type of each piece of data.

This detectType function provides a more accurate way to determine the type of a piece of data in JavaScript than the built-in typeof operator, especially for different kinds of objects.