How to Check if an Object Is Empty in JavaScript

This article will quickly explain how to check if an object is empty in JavaScript.

In daily JavaScript development, you may need to check if the object is empty. If you've ever done this, you probably know there is no single direct solution. However, you can use different techniques to create custom solutions that suit your own use cases. In addition, if you are using a JavaScript utility library in your project, the library may already provide a built-in way to check if the object is empty.

Modern Method (ES5)

In this section, we will discuss different methods you can use in modern browsers that support ES5 versions.

1. Object.keys() method returns an array of enumeration attribute names of the given object. Therefore, we can check if the object has any properties by calculating the length of this array.

Let's look at the following example.

 function isEmptyObject(obj) {
    return Object.keys(obj).length === 0;
}

console.log(isEmptyObject({})); // Output: true

var bar = {"foo": "1"};
console.log(Object.keys(bar).length); // Output: 1
console.log(isEmptyObject(bar)); // Output: false

As shown in the above example, the foo attribute is attached, so isEmptyObject function will return the isEmptyObject function with different values.

Note that isEmptyObject will return true for the RegExp object.

 console.log(isEmptyObject(Date.now())); //Output: true
console.log(isEmptyObject(new RegExp())); //Output: true

Also, be careful because this method is called with undefined values. They can cause exceptions. Later, we will create a bulletproof solution that does not fail on empty input.

 console.log(isEmptyObject(null)); //Throw Uncaught TypeError: Cannot convert undefined or null to object

2. Object.getOwnPropertyNames() method returns an array of all properties of the given object. Although it may look the same as Object.keys() method, Object.getOwnPropertyNames() method also considers non-enumerable properties, while Object.keys() misses some properties declared non-enumerable.

Let's look at the following example.

 function isEmptyObject(obj) {
    return Object.getOwnPropertyNames(obj).length === 0;
}

console.log(isEmptyObject({})); // Output: true

var bar = {"foo": "1"};
console.log(Object.getOwnPropertyNames(bar).length); // Output: 1
console.log(isEmptyObject(bar)); // Output: false

As you can see, use Object.keys() to test for null values.

However, the edge case is slightly different - Date , but for null or JSON.stringify will return false .

Use {} to check if the given object is empty.

Let's look at the following example.

 function isEmptyObject(obj){
    return JSON.stringify(obj) === '{}';
}

console.log(isEmptyObject({})); // Output: true

var bar = {"foo":"1"};
console.log(JSON.stringify(bar)); // Output: {"foo":"1"}
console.log(isEmptyObject(bar)); // Output: false

Again, the edge situation is slightly different. "1651283138454" is used in RegExp. So use the Object.getOwnPropertyNames method!

 console.log(isEmptyObject(Date.now())); //Output: false
console.log(isEmptyObject(new RegExp())); //Output: true

Another change is false , which may not be what you expect.

 console.log(isEmptyObject(null)); //Output: false

4. Object.entries() method returns an array of arrays, each element is an array of key-value pairs of object properties.

Let's look at the following example to understand how it works exactly.

 function isEmptyObject(obj) {
    return Object.entries(obj).length === 0;
}

console.log(isEmptyObject({})); // Output: true

var bar = {"foo":"1"};
console.log(Object.entries(bar)); // Output: [['foo', '1']]
console.log(Object.entries(bar).length); // Output: 1
console.log(isEmptyObject(bar)); // Output: false

As you can see, Object.keys() method will give the same result for our RegExp object edge case example. For undefined inputs, it also throws an exception.

 console.log(isEmptyObject(Date.now())); //Output: true
console.log(isEmptyObject(new RegExp())); //Output: true

Bulletproof Solutions

One problem with the simple solutions mentioned above is that they give inconsistent results for edge cases: special objects (such as Date), undefined values, or primitives (such as integers). This is a simple but more reliable solution.

 function isEmptyObject(value) {
  const type = typeof value
  const isObject = value != null && type === 'object'
  return isObject && Object.keys(value).length === 0;
}

This method is performed exactly by its name: it returns true if and only if the input value is both an object and an empty object. It will work with null and undefined values ​​- return false because they are not objects. For special objects like RegExp, it will return true because they do not define any special keys. It also returns true for empty arrays and false for non-empty arrays.

ES5 previous plan

In this section, we will discuss a solution that works even in older browsers. This method was often used before the JavaScript ES5 era, when there was no built-in method to check if an object was empty.

Let's look at the following example.

 function isEmptyObject(obj) {
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            return false;
        }
    }

    return true;
}

console.log(isEmptyObject({})); // Output: true
console.log(isEmptyObject({"foo":"1"})); // Output: false

In the example above, we built a custom function that you can call to check if the object is empty. It accepts a parameter, and you need to pass the object to test. In FALSE, otherwise we will return the isEmptyObject function with a different value. As shown in the above example, we call it with a different value and record the output using the isEmptyObject method, which allows you to check if the object is empty.

Let's take a quick look at the example below.

 jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({"foo":"1"}); // false

As you can see, using _.isEmpty() is very simple.

in conclusion

In this article, we discuss several different ways to check if an object is empty in JavaScript. Check out our other tutorials on JavaScript programming!

This post has been updated with Neema Muganga’s contributions.

The above is the detailed content of How to Check if an Object Is Empty in JavaScript. For more information, please follow other related articles on the PHP Chinese website!