How to check if an array is empty or does not exist?

Is it an array, and is it non-empty?

Before answering, "Is the array empty?" let's ask, "Is it truly an array?" Here's how we do that:

if (!Array.isArray(arr) || !arr.length) {
  // Is it a bird? 🐦 Is it a plane? ✈️ No, it's not an array! 😖  
}


The Array.isArray(arr) function ensures arr is indeed an array in disguise, preventing imposters (aka array-like objects) from passing the check.

If pragmatism is your mantra

There's an even more idiomatic and readable approach that uses optional chaining (invented, by the way, when JavaScript decided to simplify our lives with ECMAScript 2020):

if (!arr?.length) {
  // Either the array is playing Hide and Seek, or it's playing Solitaire! 🧐
}


Watch your step, undefined lurking!

This code snippet is the equivalent of "seeing the sign and not stepping on the banana peel." It prevents unforeseen accidents, such as TypeErrors.

if (arr !== undefined && !arr.length) {
  // Safety first! Always check for undefined! 😉

}


Are you an equal(equal)ist?

For clarity and precision, use strict equality checks:

if (Array.isArray(arr) && arr.length !== 0) {
  // Array exists and it's not on a diet! ✨
}


Strict equalities (===, !==), unlike abstract friends (==, !=), don't coerce types and hence are safer to use.

The art of choosing foolproof vs. pragmatic

Use a tighter, foolproof method for critical code sections. Otherwise, for falsy values implying emptiness, the more relaxed pragmatic method does the job well.

Array-like objects in disguise

Array.isArray() does a great job, but remember it doesn't unmask array-like objects:

function isTrulyArray(arr) {
  return Array.isArray(arr) || (arr && typeof arr === 'object' && typeof arr.length === 'number');
}


This vigilant function will prevent false positives and ensure only bona fide arrays (and object behaving like arrays) get past.

TypeScript's defensive stance

With TypeScript, no more cold nights worrying about potentially undefined variables:

function isEmptyArray(arr?: Array<any>): boolean {
  return !arr || arr.length === 0;
}


In this TypeScript function, arr? implies that arr is optional and will be cared for as an array if provided.

Embrace the new age JavaScript

Finally, embracing new ECMAScript can result in cleaner and more intuitive syntax:

const isEmptyArray = arr => !arr?.length;


The arrow function with optional chaining makes the code Robocop sleek and efficient.

Deep dive: potential pitfalls and solutions

Let's be prepared for unpredictabilities that arrays might throw at you!

Sparse arrays: The missing elements

Sparse arrays are like Swiss cheese: They have "empty slots." Like this:

const sparseArray = [1,,3]; // Index 1 is "empty", like ghost town! 👻
console.log(sparseArray.length); // Output: 3


To handle sparse arrays, check for actual data presence:

if (!sparseArray.some(element => element !== undefined)) {
  // Array is missing some elements, just like your favorite socks 😋
}


Falsy values: A legitimate lie

Arrays can contain falsy values (0, null, "", etc.), which are still valid elements. Like this tricky fellow:

const falsyValuesArray = [0, '', false, null]; // Tricky, isn't it? 


Our emptiness checks will rightfully consider this array non-empty. But depending on your context, you might need to treat falsy values specially.

Performance: Speed matters

Although these checks work fast, avoid redundancy. If you're checking array's emptiness in a loop, consider storing it in a variable:

const isEmpty = !arr?.length;
for(/*...*/) { 
    if(!isEmpty) {
        // Bust that myth, arrays can be Fast & Furious too! 🏎️
    }
}


Use utility functions: Because DRY

To avoid repetition, use utility functions for frequent checks:

function isArrayNonEmpty(arr) {
  return Array.isArray(arr) && arr.length > 0; // Reusability for the win! 🚀
}
