feat: implement type-of under the hood

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

@@ -0,0 +1,108 @@
+# 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](https://javascript.info/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
+
+```js
+detectType(1); // 'number'
+detectType(new Map()); // 'map'
+detectType([]); // 'array'
+detectType(null); // 'null'
+
+// more in judging step
+```
+
+#
+
+### Solution
+
+```js
+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
+
+```js
+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.