How to Check if an Object Is Empty in JavaScript
In this quick article, I’ll show you how you can check if an object is empty in JavaScript.
In your day-to-day JavaScript development, you might need to check if an object is empty or not. And if you’ve had to do this, you probably know that there’s no single direct solution. However, there are different techniques that you can use to create a custom solution for your own use case. Apart from that, if you’re using a JavaScript utility library in your project, there’s a chance that it already provides a built-in method to check if an object is empty.
The Modern Way (ES5+)
In this section, we’ll discuss the different methods that you could use in modern browsers that support the ES5 edition.
1. The Object.keys()
Method
The Object.keys()
method returns an array of enumerable property names of a given object. And thus, we can use it to check if an object has any properties by counting the length of this array.
Let’s have a look at the following example.
1 |
function isEmptyObject(obj) { |
2 |
return Object.keys(obj).length === 0; |
3 |
}
|
4 |
|
5 |
console.log(isEmptyObject({})); // output: true |
6 |
|
7 |
var bar = {"foo": "1"}; |
8 |
console.log(Object.keys(bar).length); // output: 1 |
9 |
console.log(isEmptyObject(bar)); // output: false |
As you can see in the above example, the bar
object has the foo
property attached to it, and thus the bar.keys(obj).length
expression would return a value greater than zero. So the isEmptyObject
function would return false
in this case.
Go ahead and test the isEmptyObject
function with different values.
Note that the Object.keys()
method can return some surprising results for special types. For example, isEmptyObject
will return true for a Date
or RegExp
object.
1 |
console.log(isEmptyObject(Date.now())); //output: true |
2 |
console.log(isEmptyObject(new RegExp())); //output: true |
Also, be careful because calling this method with a null
or undefined
value. They would result in an exception. Later on, we'll create a bullet-proof solution that won't fail on a null input.
1 |
console.log(isEmptyObject(null)); //throws Uncaught TypeError: Cannot convert undefined or null to object |
2. The Object.getOwnPropertyNames()
Method
The Object.getOwnPropertyNames()
method returns an array of all the properties of a given object. Although it may look identical to the Object.keys()
method, there’s a difference. The Object.getOwnPropertyNames()
method also considers the non-enumerable properties, while the Object.keys()
only considers enumerable properties. Most of the time, these will be equivalent, but there is a risk that Object.keys()
will miss certain properties that have been declared not to be enumerable.
Let’s go through the following example.
1 |
function isEmptyObject(obj) { |
2 |
return Object.getOwnPropertyNames(obj).length === 0; |
3 |
}
|
4 |
|
5 |
console.log(isEmptyObject({})); // output: true |
6 |
|
7 |
var bar = {"foo": "1"}; |
8 |
console.log(Object.getOwnPropertyNames(bar).length); // output: 1 |
9 |
console.log(isEmptyObject(bar)); // output: false |
As you can see, testing emptiness with Object.getOwnPropertyNames()
works similarly to using Object.keys()
.
The edge cases are a bit different, though—the Object.getOwnPropertyNames()
method will still return true for a Date
, but will return false for a RegExp
.
1 |
console.log(isEmptyObject(Date.now())); //output: true |
2 |
console.log(isEmptyObject(new RegExp()); //output: false |
Once again, this method will fail on a null
or undefined
input.
3. JSON.stringify
The JSON.stringify
method is used to convert a JavaScript object to a JSON string. So we can use it to convert an object to a string, and we can compare the result with {}
to check if the given object is empty.
Let’s go through the following example.
1 |
function isEmptyObject(obj){ |
2 |
return JSON.stringify(obj) === '{}'; |
3 |
}
|
4 |
|
5 |
console.log(isEmptyObject({})); // output: true |
6 |
|
7 |
var bar = {"foo":"1"}; |
8 |
console.log(JSON.stringify(bar)); // output: {"foo":"1"} |
9 |
console.log(isEmptyObject(bar)); // output: false |
Once again, the edge cases are a bit different. JSON.stringify
will return a numeric string like "1651283138454"
for a Date
, but will return an empty object for a RegExp
. So using the JSON.stringify
method gives exactly the opposite results for these classes to the Object.getOwnPropertyNames
method!
1 |
console.log(isEmptyObject(Date.now())); //output: false |
2 |
console.log(isEmptyObject(new RegExp()); //output: true |
Another twist is that the JSON.stringify
method won't throw an exception on a null input. Instead, it will return false
, which might not be what you would expect.
1 |
console.log(isEmptyObject(null)); //output: false |
4. Object.entries()
The Object.entries()
method returns an array of arrays, with each element being an array of key-value pairs of an object’s property.
Let’s go through the following example to understand how it works exactly.
1 |
function isEmptyObject(obj) { |
2 |
return Object.entries(obj).length === 0; |
3 |
}
|
4 |
|
5 |
console.log(isEmptyObject({})); // output: true |
6 |
|
7 |
var bar = {"foo":"1"}; |
8 |
console.log(Object.entries(bar)); // output: [['foo', '1']] |
9 |
console.log(Object.entries(bar).length); // output: 1 |
10 |
console.log(isEmptyObject(bar)); // output: false |
As you can see, the Object.entries()
method converts an object into an array, and we can count the length of that array to check if the object in question is empty.
This is very similar to the Object.keys()
method and will give the same results on our edge case examples of Date
and RegExp
objects. It will also throw an exception for a null
or undefined
input.
1 |
console.log(isEmptyObject(Date.now())); //output: true |
2 |
console.log(isEmptyObject(new RegExp())); //output: true |
A Bullet-Proof Solution
A problem with the simple solutions above is that they give inconsistent results for edge cases: special objects like RegExp
or Date
, null
or undefined
values, or primitives like integers. Here's a simple but more bullet-proof solution.
1 |
function isEmptyObject(value) { |
2 |
const type = typeof value |
3 |
const isObject = value != null && type === 'object' |
4 |
return isObject && Object.keys(value).length === 0; |
5 |
}
|
This method does exactly what it says: it returns true exactly if the input value is both an object and is empty. It will work with null and undefined values—returning false because these are not objects. For special objects like Date
and RegExp
, it will return true because they don't have any special keys defined. It will also return true for an empty array and false for a non-empty array.
The Pre-ES5 Way
In this section, we’ll discuss a solution which would work even with older browsers. This was used frequently until the JavaScript ES5 era, when there were no built-in methods available to check if an object is empty.
Let’s go through the following example.
1 |
function isEmptyObject(obj) { |
2 |
for (var property in obj) { |
3 |
if (obj.hasOwnProperty(property)) { |
4 |
return false; |
5 |
}
|
6 |
}
|
7 |
|
8 |
return true; |
9 |
}
|
10 |
|
11 |
console.log(isEmptyObject({})); // output: true |
12 |
console.log(isEmptyObject({"foo":"1"})); // output: false |
In the above example, we’ve built a custom function which you can call to check if an object is empty. It takes a single argument, and you need to pass an object which you want to test. In the isEmptyObject
function, we try to iterate over the object properties. If the object has any properties, we’ll return FALSE
, otherwise we’ll return TRUE
.
You can go ahead and test the isEmptyObject
function with different values. As shown in the above example, we’ve called it with different values and logged the output with the console.log
function.
So that’s how you can check if an object is empty in browsers that don’t support the ES5 edition. In the next section, we’ll discuss it in the context of modern browsers.
The jQuery Way
If you’re already using the jQuery library in your project, it’s really easy to check if an object is empty, since the jQuery library already provides the isEmptyObject
method, which allows you to check if an object is empty.
Let’s quickly go through the following example.
1 |
jQuery.isEmptyObject({}); // true |
2 |
jQuery.isEmptyObject({"foo":"1"}); // false |
As you can see, it’s fairly straightforward to use the isEmptyObject
method with jQuery.
Similarly, the Lodash and Underscore.js libraries have _.isEmpty()
.
Conclusion
In this article, we discussed a number of different ways to check if an object is empty or not in JavaScript. Check out some of our other tutorials about JavaScript programming!
- 19 Best HTML5 and JavaScript Game Engines and TemplatesFranc Lucas28 Jan 2023
- 15 Best HTML5 and JavaScript Video Players (+5 Best Free Players)Daniel Strongin19 Oct 2021
- How to Use Map, Filter, and Reduce in JavaScriptPeleke Sengstacke16 Oct 2021
- How to Create a JavaScript PDF ViewerAshraff Hathibelagal16 Aug 2021
- How to Create a JavaScript PDF ViewerAshraff Hathibelagal16 Aug 2021
This post has been updated with contributions from Neema Muganga.