How to Check if an Object is Empty in JavaScript

There are multiple ways that you can use JavaScript to check if an object is empty or not. In this guide we are going to dive into a few of them, as well as creating a little application where we use some of the techniques that we are going to discuss.

Different ways to check if an object is empty

Before creating our application we will look at a few ways to see if an object contains any data.

1. Check if an object is empty by looking at all the keys

When you think of an object in JavaScript it will be a set of key value pairs. Perhaps the most obvious way to check if the object contains any data is to loop over all the keys of the object. If there are no keys then there can’t be any data either.

So for our first technique we will simply loop over the keys and check if the object has that property or not.

var someObject = ...

for(var key in someObject){
    if(someObject.hasOwnProperty(key)){
        return false;
    }
}

In the object above we simply loop over all the keys and check the property exists on the object. There are more ways you can check if an object contains a key which you can see in our post here.

We can turn the technique above into a function, where we pass the object as an argument and we get back either true or false based on if the object is empty or not.

function isObjectEmpty(myObject){
    for(var key in someObject){
        if(someObject.hasOwnProperty(key)){
            return false;
        }
    }

    return true;
}

You could also use this technique to check that all the keys or the values conform to some rules that you might have. Simply looping over all the keys and checking if the object has the property is one of the most obvious ways to check if the object is empty or not.

2. Using the Object.keys(…) function to check if an object is empty

This method may or may not work for you, it depends on the version of JavaScript you are using. This function is not as obvious perhaps as looking thorough all the keys because you have to know that the function exists.

The idea is that you pass the object that you want to check, which will return an array of all the keys in the object. We will then call the length function on the array, and if it is 0 then the object is empty as it has no keys.

Lets create a function that uses this technique.

function isObjectEmpty(myObject){
    return Object.keys(myObject).length == 0;
}

The function above is very simple. Simply get all the keys of the object and check if the length is zero. If it is then the object is empty.

3. Turn the object into a JSON string to see if it is empty

Another way that we can check if the object contains any data or not is to turn it into a JSON string. If the resulting string is just that of an empty object then the object is empty.

This technique is quite nice as you can also use it to compare objects. This assumes that the properties and values are always in the same order, but it is an easy way to compare two objects to see if they are literally the same in terms of values.

This function will simply convert the object into a JSON string and compare it to the value that an empty object would have.

function isObjectEmpty(myObject){
    return JSON.stringify(myObject) == "{}";
}

The example above is an easy way to check if an object is empty, but perhaps not the most obvious.

When Would You use any of These Techniques?

There are a lot of times when you might want to check to see if an object contains anything or not. For example, you could use an object in JS to store key value pairs where the key is the type of fruit and the value is the current price.

You also have obejcts in JavaScript where you dont initialize any properties until after the object is created. Here is an example.

var myBook = new Object();
myBook.numberOFPages = 1872;
myBook.numberOfChapters = 12;
myBook.title = "How to check if an object is empty or not using JS"

After we have created the book object is is empty. It is not until we start adding properties that it is not empty any more. Our application could wait with adding these properties until after we do something.

Application to check if an object is empty

We will now create a little application where we will use one of the techniques listed above. We are going to create a little program where we first create an object. We will also have a text box and a button, and when you click on the button it will add the “title” proper to the object with the value that you give it.

Here is the sample JS code.

var button = document.getElementById("myButton");

button.addEventListener("click", function(){
    var myBook = new Object();
    var label = document.getElementById("text");

    if(label.value.length != 0){
        myBook.title = label.value;
    }
    
    if(isObjectEmpty(myBook)){
        label.innerHtml = "Object is empty";
    }
    else {
        label.innerHtml = "Object is not empty";
    }
});

function isObjectEmpty(myObject){
    return Object.keys(myObject).length == 0;
}

Here is the sample HTML code

<input id="text"></input>
<button id="myButton"> Click me </button>
<label id="label"> Click button to see if I am empty</label>

Below is the application that we just created.

You can use any of the techniques presented in this guide and apply it to your own use case. If you want to read more JavaScript guides you can check them all out here.

Last Updated: by Ole