How to Check If an Object is Empty in JavaScript?
Overview
In JavaScript, objects are another data type that is really useful for storing various keyed collections and complex entities. Often, we are required to check whether an object is empty. For example, we need to check for the empty object if we receive a JSON response from the server before processing it. Several JavaScript libraries are often used in the projects to provide a built-in function to check if an object is empty.
How to Check if an Object is Empty in JavaScript
Let us see, the different techniques and built-in methods available in the popular JavaScript library to help us check whether an object is empty.
The Modern Way (ES5+)
In this section, we will see different methods that we can use in modern browsers that have support for the ES5 edition to check if an object in JavaScipt is empty.
1. The Object.keys() Method
The Object.keys() method in JavaScript returns an array of enumerable property names of the object passed to the method as a parameter. If the method returns an empty array, then it means the given object is empty as it has no keys. This way we can check if object is empty javascript. Let's have a look at the following code snippet to understand this case better.
Output
Here, you can observe from the output that the first object emptyObject when passed to the function isObjEmpty returns true because the Object.keys() method returns an empty array for the object emptyObject. But, the object object has the property foo attached to it, and thus the method Object.keys() will return an array of lengths greater than one.
Also, be careful not to pass null or undefined values to the function isObjEmpty. They would result in the function throwing an exception as shown in the example mentioned below.
2. Using the Object.values() Method
Just like the .keys() method, if an object has no values associated with it (including undefined and null), means the object is empty. We can use the .values() method of objects to identify and determine if an object is empty or not.
Output
3. The Object.getOwnPropertyNames() Method
The method Object.getOwnPropertNames() returns an array of all properties of an object passed to the function. The difference between Object.getOwnPropertNames() and Object.values() is that the method Object.getOwnPropertNames() method also considers the non-enumerable properties of the object, while the method Object.values() considers only the enumerable properties. The difference comes when the object contains a non-enumerable property.
Let's look at the following example.
Output
Here, as you can see, testing if an object is empty works similar when using both Object.getOwnPropertNames() and Object.values(). The difference comes when we use objects they have non-enumerable properties, for example RegExp.
Note: Both the methods Object.getOwnPropertNames() and Object.values() fails in case of null or undefined.
4. Loop Over Object Properties With for…in
If the browser is old and does not support object methods like keys(), values() or entries, we can use for loops to iterate on their object properties and determine if the object is empty or not. Take a look at the example below to understand how we can use for loops to check if object is empty javascript.
Output
Here, we are iterating on object properties by explicitly looping through the object properties and returning true if no property is found, and false if we find an object property.
5. JSON.stringify
JSON.strigify function converts a JavaScript object to a JSON string. We can use this method to convert an object to a string and compare it with a string computed by converting an empty object to a string i.e., {}. Taka a look at the following example.
Output
One thing to note here is, that JSON.stringify will not throw an exception in case of null input. Instead, it returns false, which might not be the result we would expect from our function.
6. Object.entries()
The Object.entries() method in JavaScript returns an array of arrays, where each element is a key-value pair of properties of an object. For example, if we have an object
The value returned from the method call Object.entries(obj) will be
Output
We can use Object.entries() similar to how we used methods Object.getOwnPropertNames() and Object.values() to evaluate whether an object is empty. Take a look at the example mentioned below.
Output
This method also throws an exception in the case of null or undefined input.
The Pre-ES5 Way
1. The jQuery Way
jQuery is a popular library of JavaScript and is used in many projects around the world. Due to its lightweight features that extend the features of JavaScript's built-in capabilities. jQuery provides a built-in function to check if an object in JavaScript is empty. You can check if an object is empty using isEmptyObject(emptyObject). Take a look at the following code snippet to understand how we can use jQuery to check if an object is empty.
Output
2. lodash
Lodash is a JavaScript library that makes working with an array, objects, numbers, strings etc. easier. It provides various in-built methods and uses a functional programming approach that makes working with JavaScript easier and prevents writing repetitive functions. Lodash provides a built-in method to check whether an object is empty. The _isEmpty(object) method checks if an object is an empty object (objects are considered empty if they don't have any enumerable keyed property). The method returns true if the object is empty.
Output
3. Underscore
Underscore is a JavaScript library that provides utility functions for common programming tasks. Underscore provides a similar function to lodash to check if an object is empty. Look at the following example to understand how we can use Underscore to check if an object is empty.
Output
Underscore, first finds out the length of the passed argument and decides if the object is empty if it has a length equal to zero.
4. Hoek
Hoek is a part of the hapi ecosystem and is built to work with the Hapi web framework. If you are using the hoek library in your project, you can determine if an object is empty using the following method.
This method compared our object with an empty object and returns true if they both are equal (empty in our case), else the method returns false.
5. ExtJS
ExtJS is a JavaScript application framework for building cross-platform web applications using technologies like Ajax and DOM scripting. It provides flexibility to be used as a simple component framework and as a full framework to build a single-page application. ExtJS provides a method isEmpty() to check if an object is empty or not. The syntax for the function is
The function returns a boolean value indicating whether the passed object is empty.
6. Ramda
In Ramda, the function to determine if an object is empty is
This method in R returns true if an object obj is empty, else the function returns false.
Don't just learn JavaScript; get certified in it! Enroll in our JavaScript course and validate your expertise in this essential programming language.
Conclusion
- JavaScript provides object data type for storing various keyed collections and complex entities. There is no built-in method to determine if an object in JavaScript is empty.
- In this article we discussed several different methods we can use to determine whether a JavaScript object is empty or not using plain JavaScript or using external libraries.
- We can use object methods like .keys(), .values(), or .getOwnPropertyNames() to determine whether an object is empty or not.
- External libraries like jQuery, Ramda, lodash, etc. provide built-in methods to check if a JavaScript object is empty.
- It is easier to check if an object is empty using external JavaScript than using plain JavaScript.