Check if an array is empty or not in JavaScript

Method 1: Using Array.isArray() method and array.length property: The array can be check if it is actually an array and it exists by the Array.isArray() method. This method returns true if the Object passed as a parameter is an array. It also checks for the case if the array is undefined or null.

The array can be checked if it is empty by using the array.length property. This property returns the number of elements in the array. If the number is greater than 0, it evaluates to true.
This method and property can be both used together with the AND(&&) operator to determine whether the array exists and is not empty.

Syntax:



Array.isArray(emptyArray) && emptyArray.length

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Check if an array is empty or exists
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Check if an array is empty or exists
    </b>
      
    <p>
        Click on the button to check if 
        array exists and is not empty
    </p>
      
    <p>emptyArray = []</p>
    <p>nonExistantArray = undefined</p>
    <p>fineArray = [1, 2, 3, 4, 5]</p>
      
    <p>
        Output for emptyArray: 
        <span class="output-empty"></span>
    </p>
      
    <p>
        Output for nonExistantArray: 
        <span class="output-non"></span>
    </p>
      
    <p>
        Output for fineArray: 
        <span class="output-ok"></span>
    </p>
  
    <button onclick="checkArray()">
        Check Array
    </button>
      
    <script type="text/javascript">
  
        function checkArray() {
            let emptyArray = [];
            let nonExistantArray = undefined;
            let fineArray = [1, 2, 3, 4, 5];
  
            if (Array.isArray(emptyArray) && emptyArray.length)
                output = true;
            else
                output = false;
  
            document.querySelector('.output-empty').textContent = output;
  
            if (Array.isArray(nonExistantArray) && nonExistantArray.length)
                output = true;
            else
                output = false;
  
            document.querySelector('.output-non').textContent = output;
  
            if (Array.isArray(fineArray) && fineArray.length)
                output = true;
            else
                output = false;
  
            document.querySelector('.output-ok').textContent = output;
        }
    </script>
</body>
  
</html>                    

chevron_right






                        filter_none








Output:


    

  • Before clicking the button:
    
es6-before

    • 

  • After clicking the button:
    
es6-after

    • 



Method 2: Checking the type and length of the array: The array can be checked if it exists by checking if the type of the array is ‘undefined’ with the typeof operator. The array is also checked if it is ‘null’. These two things verify that the array exists.


The array can be checked if it is empty by using the array.length property. By checking if the property exists, it can make sure that it is an array, and by checking if the length returned is greater than 0, it can be made sure that the array is not empty. 


These properties can then be used together with the AND(&&) operator to determine whether the array exists and is not empty.


Syntax:


typeof emptyArray != "undefined" && emptyArray != null && emptyArray.length != null
&& emptyArray.length > 0


Example:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


      


<head> 


    <title> 


        Check if an array is 


        empty or exists 


    </title> 


</head> 


  


<body> 


    <h1 style="color: green"> 


        GeeksforGeeks 


    </h1> 


      


    <b> 


        Check if an array is 


        empty or exists 


    </b> 


      


    <p> 


        Click on the button to check if  


        array exists and is not empty 


    </p> 


      


    <p>emptyArray = []</p> 


    <p>nonExistantArray = undefined</p> 


    <p>fineArray = [1, 2, 3, 4, 5]</p> 


      


    <p>Output for emptyArray:  


    <span class="output-empty"></span> 


    </p> 


      


    <p> 


        Output for nonExistantArray:  


        <span class="output-non"></span> 


    </p> 


      


    <p> 


        Output for fineArray:  


        <span class="output-ok"></span> 


    </p> 


  


    <button onclick="checkArray()"> 


        Check Array 


    </button> 


      


    <script type="text/javascript"> 


  


        function checkArray() { 


            let emptyArray = []; 


            let nonExistantArray = undefined; 


            let fineArray = [1, 2, 3, 4, 5]; 


  


            if (typeof emptyArray != "undefined"  


                        && emptyArray != null  


                        && emptyArray.length != null  


                        && emptyArray.length > 0) 


                output = true; 


            else 


                output = false; 


  


            document.querySelector('.output-empty').textContent 


                    = output; 


  


            if (typeof nonExistantArray != "undefined"  


                        && nonExistantArray != null  


                        && nonExistantArray.length != null  


                        && nonExistantArray.length > 0) 


                output = true; 


            else 


                output = false; 


  


            document.querySelector('.output-non').textContent 


                    = output; 


  


            if (typeof fineArray != "undefined"  


                        && fineArray != null  


                        && fineArray.length != null  


                        && fineArray.length > 0) 


                output = true; 


            else 


                output = false; 


  


            document.querySelector('.output-ok').textContent 


                    = output; 


        } 


    </script> 


</body> 


  


</html>                     



















                        chevron_right







                        filter_none








Output:


    

  • Before clicking the button:
    
old-method-before

    • 

  • After clicking the button:
    
old-method-after

    • 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Image
sayantanm19
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.