What Is The Best Way To Check If An Array Is Empty Or Not In JavaScript?

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:

1. Using Array.isArray Method
2. Using The length Property

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.

Did you find the article useful? Or do you have something else to add? Please do let us know in the comments section.