Knowing how to check for an empty array is an important coding skill which can often come in handy. It can be helpful in a situation where you have to show or hide something on a web page depending on whether the array is empty or not.
Similarly, there are many other places where you will find this skill helpful. The purpose of this post is to explain the code, the concept behind the code and the most common use cases of checking for empty arrays in JavaScript code. So let’s get started
How to check for an empty array
Checking for an empty array in JavaScript code is very simple, javaScript provides a simple length() method which helps to know the total number of elements of an array. If the length() method returns 0 then that means that an array is empty:
varemptyArray = [];
if (emptyArray.length === 0) {
console.log(‘The array is empty.’);
}
else
{
console.log(‘The array has at least one or more elements.’);
}
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/word-image-186.png" data-lazy- height="115" src="data:image/svg xml,” width=”690″>
If we fill the array with elements then:
varnotAnEmptyArray = [1, 2, 3, 4, 5];
if (notAnEmptyArray.length === 0) {
console.log(‘The array is empty.’);
}
else
{
console.log(‘The array has at least one or more elements.’);
}
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/word-image-187.png" data-lazy- height="140" src="data:image/svg xml,” width=”692″>
The thing about the .length method is that it can work with data types other than arrays:
varnotAnArray = ‘This is not an array.’;
if (notAnArray.length === 0) {
console.log(‘The array is empty.’);
}
else
{
console.log(‘The array has at least one or more elements.’);
}
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/word-image-188.png" data-lazy- height="146" src="data:image/svg xml,” width=”692″>
As you can see in the example above, the code was interpreted by the browser without any errors even though there was no array present in the code. So if we are unsure about the data type of our variable, we might first want to check whether it’s an array or some other variable. For this purpose we will not use typeof operator as arrays in JavaScript are instances of objects and their data types are objects. Rather we will use the Array.isArray() method:
varnotAnArray = ‘This is not an array.’;
if (Array.isArray(notAnArray)) {
if (notAnArray.length === 0) {
console.log(‘The array is empty.’);
}
else
{
console.log(‘The array has at least one or more elements.’);
}
}
else
{
console.log(‘The given variable type is not array.’)
}
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/word-image-189.png" data-lazy- height="152" src="data:image/svg xml,” width=”694″>
If we change the variable to an empty array:
varnotAnArray = [];
if (Array.isArray(notAnArray)) {
if (notAnArray.length === 0) {
console.log(‘The array is empty.’);
}
else
{
console.log(‘The array has at least one or more elements.’);
}
}
else
{
console.log(‘The given variable type is not array.’)
}
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/word-image-190.png" data-lazy- height="126" src="data:image/svg xml,” width=”694″>
Conclusion
Checking whether an array is empty or not is a kind of a coding problem that can often be asked in quizzes and exams. In this post we learned to use the length() method to know if an array is empty or not.
The process of checking whether an array is empty generally consists of two steps. The first step is to know if the variable’s type is array type or not. The second step is to know the total number of array elements using the length() method; if the length is equal to 0 then the array is empty; otherwise if it is greater than 0 then the array has some elements in it.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg616b577fc2a9c.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
