What Is the Best Way to Check if an Array Is Empty or Not in JavaScript?

The best way to check if an array is empty in JavaScript is by using the Array.isArray() method (ES5+) and array's length property together like so:

// ES5+
if (!Array.isArray(array) || !array.length) {
    // ...
}

Similarly, using else, or the inverse would check if the array is not empty. For example:

// ES5+
if (Array.isArray(array) && array.length) {
    // ...
}

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.

To understand why ther's a need to use both Array.isArray() and array.length, let's examine the two in detail:

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 variable value is indeed an array to rule out all other types of values. Array.isArray() 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);

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 the following example:

console.log(typeof array); // output: 'object'

console.log(array instanceof Array); // output: true

console.log(array.constructor === Array); // output: true

Why Not Use instanceof Instead of Array.isArray()?

Array.isArray() is preferred over instanceof because it works through multiple contexts (such as frames or windows) correctly whereas instanceof does not. The reason for this is the fact that in JavaScript each window or frame has its own execution environment and a different scope. This means, for example, if a script passes an object from one context to another via functions, it may lead to unexpected results. To demonstrate this, let's consider the following examples:

const iframe = document.createElement('iframe');
document.body.appendChild(iframe);

const iframeArrayObj = window.frames[window.frames.length-1].Array;

// Example #1
console.log([] instanceof iframeArrayObj); // output: false

// Example #2
const newArray = new iframeArrayObj('a', 'b', 'c');

console.log(newArray instanceof Array); // output: false

console.log(Array.isArray(newArray)); // output: true

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. Since, the Array constructor used for creating the object instance is from a different environment compared to the one used for the test, instanceof returns false.

In the context of 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 Just Use the length Property on Its Own?

The reason the length property is not used on its own is because length can apply to different types of values in JavaScript and be valid. Therefore, it is important to rule out all values that are not an array first.