How to check an object is empty using JavaScript?

Method 1: Using the Object.keys(object) method: The required object could be passed to the Object.keys(object) method which will return the keys in the object. The length property is used to the result to check the number of keys. If the length property returns 0 keys, it means that the object is empty.

Syntax:

Object.keys(object).length === 0

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to check an object is 
        empty using JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to check an object is
        empty using JavaScript?
    </b>
      
    <p>
        Click on the button to check
        if the object is empty
    </p>
      
    <p>Output for empty object: 
        <span class="outputEmpty"></span>
    </p>
      
    <p>Output for non empty object: 
        <span class="outputNonEmpty"></span>
    </p>
  
    <button onclick="checkObject()">
        Click here
    </button>
      
    <!-- Script to check the object is empty or not -->
    <script type="text/javascript">
        function checkObject() {
              
            let emptyObj = {}
            let nonEmptyObj = {
                title: 'Title 1',
                info: 'Sample Info'
            }
  
            ans1 = (Object.keys(emptyObj).length === 0)
            document.querySelector('.outputEmpty').textContent
                    = ans1;
  
            ans2 = (Object.keys(nonEmptyObj).length === 0)
            document.querySelector('.outputNonEmpty').textContent
                    = ans2;
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    before-click
  • After clicking the button:
    after-click

Method 2: Looping through the object using object.hasOwnProperty(key): A function is created where the object is looped over and checked if it contains the ‘key’ property using the object.hasOwnProperty() method. This function would return true if it could find no keys in the loop, which means that the object is empty. If any key is encountered, the loop breaks and false is returned. This method also works for older browsers that may not support the first method.

Syntax:

function isEmptyObj(object) {
    for (var key in object) {
        if (object.hasOwnProperty(key)) {
            return false;
        }
    }
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to check an object is
        empty using JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to check an object is
        empty using JavaScript?
    </b>
      
    <p>
         on the button to check
         if the object is empty
    </p>
      
    <p>
        Output for empty object: 
        <span class="outputEmpty"></span>
    </p>
      
    <p>
        Output for non empty object: 
        <span class="outputNonEmpty"></span>
    </p>
   
    <button onclick="checkObject()">
        Click here
    </button>
      
    <script type="text/javascript">
   
        function checkObject() {
            let emptyObj = {}
            let nonEmptyObj = {
                title: 'Title 1',
                info: 'Sample Info'
            }
   
            ans1 = isEmptyObj(emptyObj);
            document.querySelector('.outputEmpty').textContent
                    = ans1;
   
            ans2 = isEmptyObj(nonEmptyObj);
            document.querySelector('.outputNonEmpty').textContent
                    = ans2;
        }
   
        function isEmptyObj(object) {
            for (var key in object) {
                if (object.hasOwnProperty(key)) {
                    return false;
                }
            }
   
            return true;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
    before-click2
  • After clicking the button:
    after-click2


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.