787

What's the best way to check if an array is empty or does not exist?

Something like this?

if(array.length < 1 || array == undefined){
    //empty
}
3
  • 21
    You can simply do this by if(array && array.length){//do stuff} it's a more compact way Commented Nov 10, 2017 at 8:15
  • 3
    The related question how to ensure an array is created, which is distinct from this question, which asks how to tell if an array either doesn't exist or is empty. Commented Nov 27, 2018 at 19:24
  • @EdwardBrey yes, but that doesn't help me, I don't want to create it and maybe I'm unsure how to remove the create it part from those answers... Commented Mar 15, 2019 at 11:49

1 Answer 1

1550

You want to do the check for undefined first. If you do it the other way round, it will generate an error if the array is undefined.

if (array === undefined || array.length == 0) {
    // array does not exist or is empty
}

Update

This answer is getting a fair amount of attention, so I'd like to point out that my original answer, more than anything else, addressed the wrong order of the conditions being evaluated in the question. In this sense, it fails to address several scenarios, such as null values, other types of objects with a length property, etc. It is also not very idiomatic JavaScript.

The foolproof approach
Taking some inspiration from the comments, below is what I currently consider to be the foolproof way to check whether an array is empty or does not exist. It also takes into account that the variable might not refer to an array, but to some other type of object with a length property.

if (!Array.isArray(array) || !array.length) {
  // array does not exist, is not an array, or is empty
  // ⇒ do not attempt to process array
}

To break it down:

  1. Array.isArray(), unsurprisingly, checks whether its argument is an array. This weeds out values like null, undefined and anything else that is not an array.
    Note that this will also eliminate array-like objects, such as the arguments object and DOM NodeList objects. Depending on your situation, this might not be the behavior you're after.

  2. The array.length condition checks whether the variable's length property evaluates to a truthy value. Because the previous condition already established that we are indeed dealing with an array, more strict comparisons like array.length != 0 or array.length !== 0 are not required here.

The pragmatic approach
In a lot of cases, the above might seem like overkill. Maybe you're using a higher order language like TypeScript that does most of the type-checking for you at compile-time, or you really don't care whether the object is actually an array, or just array-like.

In those cases, I tend to go for the following, more idiomatic JavaScript:

if (!array || !array.length) {
    // array or array.length are falsy
    // ⇒ do not attempt to process array
}

Or, more frequently, its inverse:

if (array && array.length) {
    // array and array.length are truthy
    // ⇒ probably OK to process array
}

With the introduction of the optional chaining operator (Elvis operator) in ECMAScript 2020, this can be shortened even further:

if (!array?.length) {
    // array or array.length are falsy
    // ⇒ do not attempt to process array
}

Or the opposite:

if (array?.length) {
    // array and array.length are truthy
    // ⇒ probably OK to process array
}
Sign up to request clarification or add additional context in comments.

14 Comments

An Array object isn't the only object that has a length property. The "shortest" way to determine if a variable is defined and an array would be this: if (typeof varName !== 'undefined' && Object.getPrototypeOf(Object(varName)) === Object.getPrototypeOf([])) { console.log('varName is an array'); }
Use === to avoid ESLint warning in the array.length condition check.
@yeyo Array.length is a data property. It's not calculated every time it is accessed.
if array is empty, !array.length is true!!
@RobbyCornelissen For the readers of this that use React/Type Script, I would say that it is do important to test it with the > 0 Otherwise statement like this will evaluate in kinda not expected way (not relevant for pure js) : {array?.length && <MyReactComponentThatNeedsArrayNotToBeEmpty/>
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.