JavaScript includes built-in methods to determine if an array is empty. Below are the techniques provided by JavaScript for checking an empty array:
- length
- isArray(array)
The function Array.isArray is utilized to determine whether the provided argument is of the array type. Additionally, the property array.length is used to ascertain the number of elements within the array. Consequently, this allows for a straightforward identification of an empty array. Both of these can be employed independently or in conjunction with one another.
At this point, we will explore these techniques comprehensively, accompanied by illustrative examples:
.length property
The length property provides the size of the array, enabling you to ascertain if the array is devoid of elements. This property is utilized directly with the array's name, appended with the dot (.) operator, for instance, arr1.length.
Syntax
array.length
If the value provided by this property is 0, it indicates that the array is devoid of elements. Conversely, if it returns a value greater than zero, this signifies that the array contains elements.
How to use?
It is utilized directly with an array defined by the user and linked through the dot (.) operator. To gain a clearer understanding of this property, refer to the example provided below.
Copy Code
<script>
var arr1 = [15, 78, 24, 89, 23];
var arr2 = [];
//check second array (arr2) length
if(arr1.length == 0)
document.write("arr1 is empty <br>");
else
document.write("arr1 is not empty <br>");
//check second array (arr2) length
if(arr2.length == 0)
document.write("arr2 is empty <br>");
else
document.write("arr2 is not empty <br>");
</script>
Output
In the output presented below, it is evident that the initial array, referred to as arr1, contains five elements, indicating that it is not empty. In contrast, the subsequent array, designated as arr2, is devoid of any elements, thus making it an empty array.
arr1 is not empty
arr2 is empty
Array.isArray
In JavaScript, arrays are technically not classified as arrays; they are considered objects. Therefore, when you utilize the typeof operator to determine the type of an array, it will yield the result as an object. However, we now have the Array.isArray method available, which can be employed to verify if a variable is an array. This method can also be used in conjunction with the .length property to ascertain whether an array is empty.
This technique assists in ascertaining whether the value supplied to this function is an array. We can assert that it distinguishes between an array type and a standard data type variable. Additionally, it is capable of identifying arrays that are either undefined or null.
Syntax
Array.isArray(arr1)
It returns a Boolean value, either true or false.
Return values
True - If this evaluates to true, the provided value is indeed an array.
False - If the function yields a false result, it indicates that the input provided is not of the array type.
How to use?
This method can be utilized alongside the name of an array, such as in Array.isArray(arr1). In this context, we will apply this method in conjunction with the .length property to determine whether the array is empty. To gain a clearer understanding, let's examine the implementation of this method through a JavaScript example.
Example
Copy Code
<script>
var arr1 = new Array('Happy', 'New', 'Year');
//check the first variable (arr1) type and empty
if(Array.isArray(arr1)) {
document.write("arr1 is an array");
if (arr1.length == 0)
document.write(" and it is empty <br>");
else
document.write(" but it is not empty. <br>");
}
else
document.write("arr1 is not an array. <br>");
</script>
Output
In the output shown below, you will observe that the value we examined with the Array.isArray method is indeed an array; however, this array contains elements and is not empty.
arr1 is an array but it is not empty.
Example 2
In this illustration, we will verify an array to determine if it is empty, while also examining another variable to ensure it does not hold an array value. Refer to the code provided below:
<script>
var arr1 = [];
var arr2 = "notAnArray";
//check the first variable (arr1) type and empty
if(Array.isArray(arr1) == true){
document.write("arr1 is an array");
if (arr1.length <= 0)
document.write(" and it is empty <br>");
else
document.write(" and it is not empty. <br>");
}
else
document.write("arr1 is not an array. <br>");
//check the second variable (arr2) type and empty
if(Array.isArray(arr2) == true){
document.write("arr2 is an array");
if (arr2.length <= 0)
document.write(" and it is empty as well. <br>");
else
document.write(" and it is not empty. <br>");
}
else
document.write("arr2 is not an array. <br>");
</script>
Output
In the output provided below, it is evident that the initial variable, referred to as arr1, is indeed an array; however, it is currently empty since it contains no elements. In contrast, the second variable designated as arr2 does not represent an array.
arr1 is an array and it is empty as well.
arr2 is not an array.
isArray and .length property together
The length property and the Array.isArray function can be utilized in conjunction within an if-condition, linked by the logical AND (&&) operator.
Syntax
Below is the syntax for the isArray method alongside the length property and how they are utilized in conjunction:
Array.isArray(arr1) && arr1.length
Utilize the aforementioned syntax along with an if-else statement to verify the type of the array as well as to determine if the array is empty.
How to use it?
Examine the following illustration to grasp how the two functions collaborate to verify whether an array is empty in JavaScript.
Check if array is Empty
You can utilize the OR (||) operator to evaluate both conditions when determining if the array is empty.
if(Array.isArray(arr1) || arr1.length) {
//
}
Check if array is not Empty
The inverse approach can be utilized to verify that an array is not devoid of elements. To achieve this, employ the AND (&&) operator to combine the conditions necessary for confirming that the array contains elements.
if(Array.isArray(arr1) && arr1.length) {
//
}
Example 1
At this point, we will apply this function in a practical example to gain a clearer understanding. In this scenario, we are evaluating two variables to determine whether they are of the array type.
Copy Code
<script>
var arr1 = [];
var arr2 = [15, 78, 24, 89, 23];
//check the first variable (arr1) type and empty
if(Array.isArray(arr1) == true && arr1.length <= 0)
document.write("arr1 is an array and it is empty <br><br>");
else
document.write("Either arr1 is not an array or it is not empty <br><br>");
//check the second variable (arr2) type and empty
if(Array.isArray(arr2) == true && arr2.length <= 0)
document.write("arr2 is an array and it is empty <br>");
else
document.write("Either arr2 is not an array or it is not empty </br>");
</script>
Output
In the following output, it is evident that arr1 is an empty array, while err2 is either not an array or contains elements.
arr1 is an array and it is empty.
Either arr2 is not an array or it is not empty.
Note: It is a complex and less clear way to get the exact result.
Array.isArray vs .length
The .length attribute can be utilized with various data types, such as strings, to determine their length. In contrast, the Array.isArray function is exclusively applied to array data, serving the purpose of confirming whether a given entity is indeed an array.
The Array.isArray function can be somewhat verbose as it requires an initial check to ascertain if the variable in question is indeed of the array type. Following that, it necessitates the use of the .length property to ascertain whether the array is empty.
Therefore, we recommend utilizing the .length property to directly assess the size of the array variable for minor computations and ascertain whether it is devoid of elements or not.