In this article, we will look at the foolproof way of checking if an array is empty or not, along with breaking it down and understanding why it is the recommended way. For all the examples in the article, let's consider the following array of strings:
const array = ['a', 'b', 'c'];
Check If Array Is Empty
The following if
statement is pretty much the sure-shot way in JavaScript for checking if an array is empty:
if (!Array.isArray(array) || !array.length) { // ... }
Check If Array Is Not Empty
Using else
, or quite simply, the inverse would check if the array is NOT empty:
if (Array.isArray(array) && array.length) { // ... }
Breaking it Down
Let's examine the two conditions in the if
statement:
Using Array.isArray
Method:
In the first part of the if
condition we check if the object is indeed an array to rule out all other types of values.
Following are a few examples of Array.isArray
truthy and falsy values:
Array.isArray
Truthy and Falsy Values:
The method returns true
for the following:
Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c')); Array.isArray(new Array(3)); Array.isArray(Array.prototype);
Array.prototype
itself is an array. Therefore, it returns true
when checked for an array.
On the flipside, the method returns false
for the following:
Array.isArray(); Array.isArray({}); Array.isArray(null); Array.isArray(undefined); Array.isArray(21); Array.isArray('Random String'); Array.isArray(true); Array.isArray(false); Array.isArray(new Uint8Array(32)); Array.isArray({ __proto__: Array.prototype });
Why Not Use typeof
Instead of Array.isArray
?
Simply because an array in JavaScript is an instance of the Array
object and typeof
would return the type object
for it. To illustrate this, consider for example:
// output: 'object' console.log(typeof array); // output: true console.log(array instanceof Array); // output: true console.log(array.constructor === Array);
Why Not Use instanceof
Instead of Array.isArray
?
While instanceof
can be used for most cases in place of Array.isArray
, bear in mind that Array.isArray
is actually preferred over instanceof
. This is because Array.isArray
works through multiple contexts (such as frames or windows) correctly whereas instanceof
does not. The reason for this is that, in JavaScript each window or frame has its own execution environment, thus having a different scope from each other. This means that they have different built-in objects (i.e. different global object, different constructors, etc.). This may lead to unexpected results when using instanceof
, for example, for scripts passing objects from one context to another via functions. To demonstrate this, consider the following examples:
const iframe = document.createElement('iframe'); document.body.appendChild(iframe); const iframeArrayObj = window.frames[window.frames.length-1].Array;
// Example #1 // output: false console.log([] instanceof iframeArrayObj);
// Example #2 const newArray = new iframeArrayObj('a', 'b', 'c'); // output: false console.log(newArray instanceof Array); // output: true console.log(Array.isArray(newArray));
From the examples above you can see that instanceof
returns false
when checking objects from different contexts. This happens because the instanceof
operator works by checking if Array.prototype
is on an object's [[Prototype]]
chain. And since, the Array
constructor used for creating the object instance is from a different environment to the one used for the test, instanceof
returns false
.
In reference to our example, this means that iframeArrayObj's prototype
is the Array.prototype
in the iframe
window, and not the Array.prototype
in the window where the code is run from; basically, Array.prototype !== window.frames[0].Array
.
Considering all that, it is best to simply use Array.isArray
, especially when creating a framework, library or a plugin, where the environment in which it will be used is not known in advance.
Using the length
Property:
In the second part of the if
statement we check if the array has any elements. Since, 0
is a falsy value in JavaScript, the if
condition will fail if the length
is zero. Conversely, if the length
is not zero the condition will succeed, because non-zero numbers in JavaScript are considered truthy.
Why Not Use Just the length
Property on Its Own?
The reason we don't use the length
property on its own is because length
can apply to different types of values in JavaScript and be valid. Therefore, it is import to rule out all values that are not an array first.
Browser Support
The Array.isArray
method is a part of ES5 specification, and has a very good browser support. However, if the browsers you're targeting lack the support, you can use a polyfill for it:
if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[object Array]'; }; }
The polyfill works with ES3 compatible browsers and works across frames.
Hope you found this post useful. It was published (and was last revised ). Please show your love and support by sharing this post.