Introduction
As a web developer, it's likely that you'll be interacting with arrays in JavaScript. This could be anything from an array that you've returned from your server to your frontend application, an array you've received from an external API, or an array that you've created yourself.
Anyone who knows me will know that JavaScript is not my strong point. I'm much more comfortable with PHP and Laravel. So I often find myself having to search for the best way to do something in JavaScript - yes, even simple things like checking if an array is empty!
My strategy is to usually try and interact with the JavaScript array as if it was a PHP array. Then when that inevitably doesn't work, I'll search for the correct way to do it. So I've written this Quickfire blog post as a quick point of reference for myself that I can refer back to when my memory fails me about how to check if a JavaScript array is empty.
Towards the end of the article, we also take a look at a gotcha that catches me out everytime I try to check if a JavaScript array is empty.
I've also published two other articles that show different ways to check if a PHP array is empty or check if a Laravel Collection is empty.
1. Using the length property with the === operator
The easiest way to check if a JavaScript array is empty is to use the length property with the === operator. The length property returns the number of items in the array as an integer. So if the array is empty, the length property will return 0. We can then check against this integer to determine whether the array is empty or not.
If the array is empty, the expression will return true like so:
1const names = [];2 3const isEmpty = names.length === 0; // true
If the array is not empty, the expression will return false like so:
1const names = ['Ash', 'Allen'];2 3const isEmpty = names.length === 0; // false
There are some caveats to using this approach, and we'll cover them further down in this article.
2. Using the length property with the ! operator
A similar approach to the previous one is to use the length property with the ! operator. The ! operator is the logical NOT operator, and since in JavaScript 0 is a falsy value, we can use the ! operator to inverse the length property and see if the inversed property is truthy.
If the array is empty, the length property will return 0 (which is falsy), so the expression will return true like so:
1const names = [];2 3const isEmpty = !names.length; // true
If the array is not empty, the length property will return an integer greater than 0 (which is truthy), so the expression will return false like so:
1const names = ['Ash', 'Allen'];2 3const isEmpty = !names.length; // false
Similar to the previous approach, there are some caveats to using this approach, and we'll cover them next.
Using the Array.isArray() method
Although we can use the length property to check if a JavaScript array is empty, it might not always be the most reliable approach to use on its own. This is because the length property exists on other JavaScript objects so we might attempt to read the length property on an object that isn't an array.
However, this isn't really a problem with using the length property, but more with the design of our code. We should always be sure that we're interacting with an array before we attempt to read the length property. If you're using TypeScript, this shouldn't be a problem since you'll be able to define the type of the variable you're interacting with. However, if you're using vanilla JavaScript, you'll need to be a bit more careful and explicitly check that you're reading an array.
One way to do this is to use the Array.isArray method in conjunction with your length property check. This method returns a boolean value indicating whether the variable passed to it is an array or not.
You can use it in your code like so:
1const names = [];2 3Array.isArray(names) && names.length === 0; // true
By using the Array.isArray method it can help to give us extra confidence that we're interacting with an array. For example, let's take this JavaScript object that has a length property:
1const names = {2 length: 0,3};
If we try to check if this object is empty using the length property, the expression will return true like so:
1const names = {2 length: 0,3};4 5names.length === 0; // true
Since JavaScript doesn't natively support return types and type hints like PHP does, we've got to be more careful about how we interact with our variables. Of course, this issue can still happen in PHP, but with the correct use of return types and type hints, the chances of it happening are massively reduced. So if we try to check if this object is empty using the Array.isArray method, the expression will return false like so:
1const names = {2 length: 0,3};4 5Array.isArray(names) && names.length === 0; // false
A bonus of using the Array.isArray method is that it can help to filter out any array-like objects such as the arguments object and the NodeList object. For example, let's take this code:
1// Assume that there aren't any divs on the page2const nodes = document.querySelectorAll('div');3 4Array.isArray(nodes) && nodes.length === 0; // false
As we can see in the code above, the Array.isArray method correctly returns false because the nodes variable is not an array.
So as I mentioned, the Array.isArray method doesn't directly help us to check if a JavaScript array is empty, but it does help us to check if a variable is an array or not which can be useful for extra confidence in our check.
Gotcha: Using the === [] syntax
A common problem that I run into when checking if a JavaScript array is empty is attempting to use === [] like I would when checking if a PHP array is empty.
However, this doesn't work in JavaScript and will always return false.
If you try to check if an array with some items is empty using === [], the expression will correctly return false like so:
1const names = ['Ash', 'Allen'];2 3names === []; // false
But if you try to check if an empty array is empty using === [], the expression will still return false like so:
1const names = [];2 3names === []; // false
I might be wrong, but to my knowledge, I think this is because arrays in JavaScript are actually objects. This means that when we're comparing them using something like === [], we're comparing the identity of them rather than their values. For example, let's take a look at the following code:
1const names = ['Ash', 'Allen'];2 3names === names; // true
In the code above, we're comparing the identity of the names array to itself. Since it's the same array, the expression returns true.
Now let's take a look at the following code:
1const names = ['Ash', 'Allen'];2 3names === ['Ash', 'Allen']; // false
Although you might expect the expression to return true since the values of the arrays are the same, it actually returns false.
So this is definitely something to watch it out for. It has caught me out more times than I'd like to admit!
Conclusion
Hopefully, this article has given you a quick insight into how you can check whether a JavaScript array is empty. It should have also highlighted the gotcha of using === [] to check if a JavaScript array is empty. If you're interested in advancing your front end developer career, understanding these nuances can be quite beneficial.
If you enjoyed reading this post, I'd love to hear about it. Likewise, if you have any feedback to improve the future ones, I'd also love to hear that too.
You might also be interested in checking out my 220+ page ebook "Battle Ready Laravel" which covers similar topics in more depth.
Or, you might want to check out my other 440+ ebook "Consuming APIs in Laravel" which teaches you how to use Laravel to consume APIs from other services.
If you're interested in getting updated each time I publish a new post, feel free to sign up for my newsletter below.
Keep on building awesome stuff! 🚀