How to check if an array index exists or not in JavaScript?

javascript

prompt-engineering

functions

optional-chaining

byNikita Barsukov·Oct 27, 2024

When you need to verify an array index presence in JavaScript, the in operator and checking for undefined are your trusted buddies. Using the in operator, we are directly assessing the index, while checking for undefined might return misleading results if the index we're checking explicitly holds undefined.

let array = [1, 2, 3];

// Utilize the `in` operator
let exists = 2 in array; // true - index proudly sits in the array like a king
let notExists = 4 in array; // false - index is MIA (Missing in Array)

// Verify for `undefined`
let exists = array[2] !== undefined; // true - index found, no hide and seek here!
let notExists = array[4] !== undefined; // false - index missing, maybe it went on vacation?

A closer look into index existence

Let's further investigate into different scenarios and methods suitable for checking array index existence, expanding our knowledge beyond the given example.

Trust but verify with `typeof`

Even though array[index] === undefined is a common pattern, it unfortunately mixes missing indices with indices explicitly set to undefined. You can avoid this confusion by being more discriminative and use typeof:

if (typeof array[index] !== 'undefined'){
  // Index exists and is ready to party!
} else {
  // Index does not exist - it might have lost the invite!
}

Note: Be aware of false negatives when the array index's value is undefined.

Calling for backup with `hasOwnProperty`

The array.hasOwnProperty(index) method effortlessly dodges the bullet of confusing non-existent indices and undefined values:

if (array.hasOwnProperty(index)) {
  // Index definitely exists and is ready for action!
} else {
  // Index surely does not exist, maybe it's on a secret mission?
}

Optionality is key

Optional chaining ?. is your secret weapon for simplified existence checks and successfully avoids falling into the trap of errors with undefined:

let value = array[index]?.toString() || 'Index not found, probably playing hide and seek';

In this syntax, toString is only called in if the index exists, otherwise, it smoothly moves to default.

Don't forget arrays can be objects too

Did you remember that JavaScript arrays are also objects? This means you can kinda cheat and use object-related methods for index checking as well:

let exists = index.toString() in array; // Stealthily use Object properties!

Here's a custom function that couples Array.isArray and hasOwnProperty for a sturdy check:

function indexExists(arr, idx) {
  return Array.isArray(arr) && arr.hasOwnProperty(idx); // Armoured check
}

Specialty use cases

Complex data structures might require some advanced game strategies. Let's delve into a few additional techniques that might come in handy.

Sparse arrays: handle with care

Sparse arrays (arrays with non-contiguous indexes) can turn index existence checks into a maze. The in operator comes to the rescue:

let sparseArray = [];
sparseArray[10] = 'a';

let indexExists = 10 in sparseArray; // true - found the index in this haystack!
let falsePositive = sparseArray[10] !== undefined; // also true, but it's like finding a decoy instead of the real deal

Looking out for Titanium environments

If you find yourself in specific environments like Titanium, where JavaScript arrays come with additional functionalities, don't worry - our standard methods still hold their ground. Be sure to take note of any peculiarities from the environment-specific documentation.

Leverage the power of modern features

Modern ECMAScript features like optional chaining and the Array.includes() method offer you the power of concise and cleaner code for index checking, not to forget improved readability.

Different conditions demand different strategies

Watch out for undefined vs null

Stay alert for indices that may hold null values - they're not the same as undefined and may require additional inspections:

let indexIsNull = array[index] === null; // If it's null, we've a different problem
let indexIsUndefinedOrNull = array[index] == null; // If it's either, we've a problem

Variable indices add to the fun

When your index is a variable and loves to keep changing, always validate the index variable itself:

let dynamicIndex = getSomeValue();

if (typeof dynamicIndex === 'number' && dynamicIndex in array) {
  // Index exists and is playing by the rules!
}

Handling arrays from API responses

When you're handling arrays from API responses, where the structure creed can be a little loose, go for double checks:

let responseArray = apiCall();

if (Array.isArray(responseArray) && responseArray.hasOwnProperty(specificIndex)) {
  // Everything in order, handle the valid index
}

Don't forget the arrays with non-numeric properties

Adding non-numeric properties to arrays promotes them to array-like objects, which changes how you check for what "exists":

let arrayWithProperties = [];
arrayWithProperties["newProp"] = "value";

let hasIndex = "newProp" in arrayWithProperties; // true, but it's an object property not an array index!