To accurately check if a value is an object in JavaScript

Posted: 01-10-2024 | Views: 13
To accurately check if a value is an object in JavaScript

To accurately check if a value is an object in JavaScript, the method Object.getPrototypeOf() can provide a more reliable approach. Here's why it matters and how to use it effectively.

Why typeof is Not Enough

Traditionally, developers use typeof to check if a value is an object:

console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof null); // "object" (which is misleading)

While typeof works for most basic checks, it has some shortcomings:

  • It returns "object" for null, which is not actually an object.
  • It doesn't differentiate between various types of objects (plain objects, arrays, etc.).

Using Object.getPrototypeOf() for More Accurate Checks

The Object.getPrototypeOf() method returns the prototype (or [[Prototype]]) of the specified object. This allows for more precise object detection and differentiation between object types.

Basic Usage:

const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true

Check if a Value is a Plain Object:

A "plain object" is an object created using object literal {} or new Object(). To check if a value is a plain object:

function isPlainObject(value) {
  return Object.getPrototypeOf(value) === Object.prototype;
}

console.log(isPlainObject({})); // true
console.log(isPlainObject(new Object())); // true
console.log(isPlainObject([])); // false
console.log(isPlainObject(null)); // false

Differentiating Between Arrays, Functions, and Other Objects:

Using Object.getPrototypeOf(), you can also distinguish between different object types:

console.log(Object.getPrototypeOf([]) === Array.prototype); // true (array)
console.log(Object.getPrototypeOf(() => {}) === Function.prototype); // true (function)

Advantages of Object.getPrototypeOf():

  • Accurate Object Checking: It allows you to check whether a value is a plain object, array, or function without ambiguity.
  • Improved Readability: Using Object.getPrototypeOf() makes it clearer what type of object you're working with.

Example: Full Object Type Check

Here’s a utility function that checks whether a value is an object and whether it’s a specific type of object:

function getTypeOfObject(value) {
  if (value === null || typeof value !== 'object') return typeof value;

  const prototype = Object.getPrototypeOf(value);
  if (prototype === Object.prototype) return 'Plain Object';
  if (prototype === Array.prototype) return 'Array';
  if (prototype === Function.prototype) return 'Function';
  return 'Other Object';
}

console.log(getTypeOfObject({})); // "Plain Object"
console.log(getTypeOfObject([])); // "Array"
console.log(getTypeOfObject(() => {})); // "Function"
console.log(getTypeOfObject(null)); // "null"

Conclusion:

Using Object.getPrototypeOf() provides a more robust and precise way to check if a value is an object, making it ideal for advanced type checking in JavaScript.

Add comment