How to check if object is empty in javascript

In this tutorial, you’ll be going to learn how to check if object is empty in javascript. As we do not have any isEmpty() kind of functionality or method in javascript. For that, we need to create a utility helper function or using a library.

As we know an object is a key-value pair storge where each data store at user-defined key rather than like array which stores data at numeric index.

As it is very easy to check an array is empty in javascript because you’ll have Array.isArray() to check the type of value and array.legnth to check the size of an array. As we have

You can also check :

  1. Phone Number Validation in HTML5
  2. How to convert PHP array to JavaScript array
  3. How To Get Multiple Elements By Id Using Javascript
  4. How to remove duplicates from javascript array
check if object is empty in javascript
Javascript: Check If Object Is Empty

There are multiple ways we can check if an object is empty in javascript which depends on the requirement and ease of use. But in my opinion Object.keys({}).length is the best approach to check the object is empty.

How to check if object is empty in javascript

Table of content :

  • Using Object.keys() and Array.length
  • Using Object.getOwnPropertyNames() and Array.length
  • Using for in and Object.hasOwnProperty()
  • By creating isEmpty as Object Prototype
  • Using jQuery.isEmptyObject()
  • Lodash Library
  • Underscore.js Library

Now let’s take each one of use case and discuss in detail.

1. Using Object.keys() and Array.length

Object.keys() is used to convert an object to an array by taking only keys from an object and stored in an array. So after getting all the keys of an object into an array. we check the length of the array.

Object.keys() available in ECMAScript 5

Let’s take an example

let object = {
  name : "codekila",
  key : "value"
}

// convert object keys to array and then check its length
Object.keys(object).length === 0 // false
// ["name", "key"].length === 0  => false

console.log(Object.keys(object).length)
// result => 2

object = {}

// convert object keys to array and then check its length
Object.keys(object).length === 0 // true
// [].length === 0  => true

console.log(Object.keys(object).length)
// result => 0

As you can see in the above example we create an object with two key-value pair. So Object.keys() gives as an array-like [“name”, “key”] and if we have array then it is very easy to check just by checking its length.

2. Using Object.getOwnPropertyNames() and Array.length

As we have Object.keys() which convert object keys to array. In the same manner Object.getOwnPropertyNames() works.

Let’s go through an example.

let object = {
  name : "codekila",
  key : "value"
}

// convert object keys to array and then check its length
Object.getOwnPropertyNames(object).length === 0 // false
// ["name", "key"].length === 0  => false

console.log(Object.getOwnPropertyNames(object).length)
// result => 2

object = {}

// convert object keys to array and then check its length
Object.getOwnPropertyNames(object).length === 0 // true
// [].length === 0  => true

console.log(Object.getOwnPropertyNames(object).length)
// result => 0

As you can see in the above example it also check the object is empty or not in javascript.

3. Using for in and Object.hasOwnProperty()

As we iterate an array, we can also iterate an object using for in keyword and then check for key exists in using the object method hasOwnProperty().

Let’s take an example so you’ll understand in a better way.


// creating a function to check object is empty
function isEmpty(obj) {
    for(var key in obj) {
        // checking key exist
        if(obj.hasOwnProperty(key)) 
        return false; // if key exist
    }
    return true; // if no key exist 
}

let object = {
  name : "codekila",
  key : "value"
}

isEmpty(object); // false

object = {}

isEmpty(object); // false

As we have created a function isEmpty() which checks the object is empty or not. Using for in, we are iterating and checking the key existence using hasOwnProperty.

4. By creating isEmpty as Object Prototype

In the above javascript method, we have created a function to check if the object is empty or not but we can also convert the above function into Object prototype.

Let see this in an example


// creating a object prototype to check object is empty
Object.prototype.isEmpty() = function() {
    for(var key in this) {
        // checking key exist
        if(obj.hasOwnProperty(key)) 
        return false; // if key exist
    }
    return true; // if no key exist 
}

let object = {
  name : "codekila",
  key : "value"
}

object.isEmpty(); // false

object = {}

object.isEmpty(); // false

As you can see, we can also achieve the same thing by converting function to Object prototype.

As we have seen a lot of examples to check if an object is empty in javascript but there are some library out there which is built in js but containing a lot of useful methods.

Let’s go through a library section also.

5. Using jQuery.isEmptyObject()

As the libraries are so some because they are rich in utility helper function because of it not only reduce the development time but also help to make the code clear and standard.

As we check if the object is empty in javascript using object prototype in the same jquery also have method name jquery.isEmptyObject()

Now we can see it in action.


let object = {
  name : "codekila",
  key : "value"
}


jQuery.isEmptyObject(object); // false

object = {}

jQuery.isEmptyObject(object); // false

As we see in the code, so just include a library in your HTML page in heading section inside a script tag and you’re good to go.

6. Using lodash library

You can also check if an object is empty using lodash, for this you need to include a library in your HTML file but if you’re using it in angular or node.js. Then you need to import it.

Lodash using _ (underscore) as their reference.

As lodash is so helpful and it is also rich in a helper function. Using lodash you can also remove duplicates from an array using a _.uniq function.

So let’s move to a code section where we can see lodash in an action.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>


let object = {
  name : "codekila",
  key : "value"
}


_.isEmpty(object); // false

object = {}

_.isEmpty(object); // false

As their also other libraries, which can do the same thing.

7. Using Underscore.js library

Underscore.js is also another good library available in the market which helps in multiple scenarios like the current one.

As underscore.js is so helpful and it is also rich in a helper function. Using underscore.js you can also remove duplicates from an array using a _.uniq function.

Underscore.js also use _ as their reference and using isEmpty() it check object is empty or not.

Now move on to the code.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"> 
     </script> 

let object = {
  name : "codekila",
  key : "value"
}


_.isEmpty(object); // false

object = {}

_.isEmpty(object); // false

As they are so many libraries and functionality available but what we show you are the frequently used one.

Conclusion :

As you can see there are many ways you can implement to check if object is empty in javascript

We have used only functions and functionality provide by JavaScript only like an Object.keys(),  Object.hasOwnProperty(), Object.getOwnPropertyNames() and more.

And we have also used a library like jquery, lodash and underscore to get the same result. But in my opinion, it’s not good to use a library for just a small check because you’re including a whole library. But if you are using multiple functionalities provided by the library then just good to go.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section and also let me know if you have any suggestion is also acceptable. Also, like our Facebook Page.

You can also check :

  1. Phone Number Validation in HTML5
  2. Convert PHP array to JavaScript array
  3. Get Multiple Elements By Id Using Javascript
  4. Remove duplicates from javascript array

Leave a Reply

Your email address will not be published. Required fields are marked *