6

How to Check if an Object is Empty in JavaScript

 3 years ago
source link: https://code.tutsplus.com/tutorials/how-to-check-if-an-object-is-empty-in-javascript--cms-37053
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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, might need check if an object is empty or not. And if you’ve had to do this, you would 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 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.

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 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 ES5+ Ways

In this section, we’ll discuss the different ways that you could use in modern browsers that support the ES5 edition.

1. Object.keys()

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.

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 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.

2. Object.getOwnPropertyNames()

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 as well, 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 in that have been declared to not be enumerable.

Let’s go through 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, testing emptiness with Object.getOwnPropertyNames() works similarly to using Object.keys().

Advertisement

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.

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

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.

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, 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.

Go ahead and test the isEmptyObject function with different values.

The jQuery Way

If you’re already using the jQuery library in your project, it’s really easy for you 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.

jQuery.isEmptyObject({}); // true
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().

Advertisement

Conclusion

In this article, we discussed a number of different ways that you could use to check if an object is empty or not in JavaScript. 

Check out some of our other tutorials about JavaScript programming!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK