Check if an array is empty or not in JavaScript - GeeksforGeeks

20 Jul, 2021
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:
<!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>                    
Output:
Before clicking the button:
After clicking the button:
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:
<!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>                    
Output:
Before clicking the button:
After clicking the button:
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
javascript-string
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?