Checking for Empty or Non-Existent Arrays in JavaScript

Arrays are fundamental data structures in JavaScript. Before processing an array, it’s crucial to verify that it actually exists and, if it does, that it isn’t empty. This prevents common errors and ensures your code behaves predictably. This tutorial explores several reliable techniques for achieving this, ranging from robust, type-safe methods to more concise, pragmatic approaches.

Why Check for Empty or Non-Existent Arrays?

Attempting to access properties or methods of a non-existent array (i.e., a variable that is undefined or null) will result in a runtime error. Similarly, trying to iterate over an empty array might lead to unexpected behavior if your code expects at least one element. Defensive programming practices dictate that you should always check for these conditions before attempting to work with an array.

The Robust Approach: `Array.isArray()` and `length`

The most reliable method to determine if an array is empty or doesn’t exist involves two checks:

Array.isArray(array): This built-in function specifically verifies if a variable is an actual JavaScript array. This is important because other objects might have a length property, but aren’t arrays.
!array.length: If Array.isArray() confirms we’re dealing with an array, this checks if the length property is zero. A length of zero indicates an empty array.

Here’s how this approach looks in code:

function processArray(array) {
  if (!Array.isArray(array) || !array.length) {
    // array does not exist, is not an array, or is empty
    console.log("Array is empty or does not exist.");
    return; // Or take other appropriate action
  }

  // Now it's safe to process the array
  console.log("Processing array:", array);
}

processArray(undefined); // Output: Array is empty or does not exist.
processArray(null);      // Output: Array is empty or does not exist.
processArray([]);       // Output: Array is empty or does not exist.
processArray([1, 2, 3]); // Output: Processing array: [1, 2, 3]

This method is the most comprehensive and safest, especially in scenarios where you can’t guarantee the type of the variable being passed to your function. It explicitly checks that the variable is an array before accessing its length property.

The Pragmatic Approach: Truthiness and Falsiness

In many cases, especially within well-controlled codebases or when using type systems like TypeScript, you can rely on JavaScript’s truthiness and falsiness concepts for a more concise check.

JavaScript considers the following values falsy:

false
0 (zero)
"" (empty string)
null
undefined
NaN

Any other value is considered truthy.

Therefore, you can often use the following code to check for an empty or non-existent array:

function processArray(array) {
  if (!array || !array.length) {
    // array or array.length are falsy
    console.log("Array is empty or does not exist.");
    return;
  }

  console.log("Processing array:", array);
}

processArray(undefined); // Output: Array is empty or does not exist.
processArray([]);       // Output: Array is empty or does not exist.
processArray([1, 2, 3]); // Output: Processing array: [1, 2, 3]

This approach works because undefined and null are falsy, and an empty array has a length of 0, which is also falsy. However, be cautious when using this method if you’re dealing with data from external sources or if you need strict type checking.

Using Optional Chaining (ECMAScript 2020+)

ECMAScript 2020 introduced optional chaining (?.), providing an even more concise way to check for empty or non-existent arrays.

function processArray(array) {
  if (!array?.length) {
    // array or array.length are falsy
    console.log("Array is empty or does not exist.");
    return;
  }

  console.log("Processing array:", array);
}

processArray(undefined); // Output: Array is empty or does not exist.
processArray([]);       // Output: Array is empty or does not exist.
processArray([1, 2, 3]); // Output: Processing array: [1, 2, 3]

The ?. operator short-circuits if array is null or undefined, preventing an error. It only accesses array.length if array is a valid object. This approach provides a clean and readable way to handle potentially missing or empty arrays.

Choosing the Right Approach

For maximum safety and type correctness, use Array.isArray() and !array.length.
If you’re confident about the data source and type, the truthiness/falsiness check (!array || !array.length) is a concise option.
For the most modern and readable code, leverage optional chaining (!array?.length).

Consider the specific requirements of your application and the level of robustness you need when choosing the best approach for checking empty or non-existent arrays.