Sentry Answers>JavaScript>

How do I Test for an Empty JavaScript Object?

How do I Test for an Empty JavaScript Object?

Matthew C.

The Problem

You want to check if an object, for example, an object returned from a fetch request, is empty. How do you do this?

The Solution

There are various ways to check if an object is empty. The method you choose to use depends on whether you know if the value to check will be an object. The methods also have different efficiencies in terms of operations per second, which could be important if you are checking many values.

Using Object.keys

If you know the value you are checking is an object, you can use Object.keys to return an array of a passed-in object’s property names. If the object is empty, the length of the returned array will be 0:

Click to Copy
Object.keys(value).length === 0;

Using a for...in Loop

You can use a for...in loop in a function to check if an object is empty. Pass in the value as an argument and loop through each property in the value:

Click to Copy
function isEmpty(value) { for (let prop in value) { if (value.hasOwnProperty(prop)) return false; } return true; }

For each property, check if the property exists. If there is a property, the function will return false. If there are no properties on the object, the function returns true. This method was used as an alternative to using Object.keys before it was added to JavaScript in the 2011 ECMAScript 5 specification and is widely supported by browsers.

Using JSON.stringify

You can use JSON.stringify() to convert the value to a JSON string to check if the value is an empty object. It will be equal to an empty object string if it is:

Click to Copy
JSON.stringify(value) === '{}'

This method is slower than the other methods.

Adding Extra Checks if You Don’t Know if the Value is an Object

If you don’t know if the value is an object, you’ll need to add some extra checks to determine whether it is. First, check if the value is null or undefined:

Click to Copy
value && Object.keys(value).length === 0;

If you don’t do this check, you’ll get the following error if the value of value is null or undefined:

Click to Copy
Cannot convert undefined or null to object

You can end up with false positives if the value is a JavaScript object constructor, such as new Date() or new RegExp():

Click to Copy
function isEmpty(value) { return value && Object.keys(value).length === 0; } console.log(new Date()); // Date Tue Nov 29 2022 18:18:10 GMT+0200 (South Africa Standard Time) console.log(isEmpty(new Date())); // true

To fix this, you can also check that the constructor of the value is an object:

Click to Copy
value.constructor === Object;

Further Reading

If you’re looking to get a deeper understanding of how JavaScript application monitoring works, take a look at the following articles:

  • YoutubeHow Sentry.io saved me from disaster
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark of Functional Software, Inc.