Check if an array index exists in JavaScript

We will show you to check if an array index exists in JavaScript using three different ways: at(), length and chaining operator. This is a necessary knowledge when you work with arrays in Javascript.

Check if an array index exists in JavaScript

Using at()

The at() method is called on an array, it takes an integer (can be negative) and returns the element at that index if the index is positive.

Syntax:

at(position)

Parameter:

• position: The index (position) of the element you want to get in that array

Using this method, you will get undefined if an array index does not exist or the element value if that index exists. Moreover, if it doesn’t exist, the method will not attempt to access the corresponding element.

let arr = ['Learn', 'Share', 'IT'];
let index = 2022;

// Check if an array index 2022 exists
if (arr.at(index)) {
    console.log("index " + index + " exists, value is " + arr.at(index));
} else {
    console.log("index " + index + " does not exist");
}

Output: 

index 2022 does not exist

Another example:

let arr = ['Learn', 'Share', 'IT'];
let index = 2;

// Check if an array index 2 exists
if (arr.at(index)) {
    console.log("index " + index + " exists, value is " + arr.at(index));
} else {
    console.log("index " + index + " does not exist");
}

Output: 

index 2 exists, value is IT

However, please remember that this method allows a negative index, it will understand that negative number as the count back from the last item in an array. For example:

let arr = ['Learn', 'Share', 'IT'];
let index = -1;

// Check if an array index -1 exists
if (arr.at(index)) {
    console.log("index " + index + " exists, value is " + arr.at(index));
} else {
    console.log("index " + index + " does not exist");
}

Output:

index -1 exists, value is IT

Have you seen the problem here? When a user wants to check the index on a negative one, the at() method may not return undefined as supposed, it will compare the absolute value of that index is smaller than the array length or not, an in this case as |-1| < 3 (our array’s size), then it will return the last element in that array instead of raising an error. However, -1 is not a valid index in JavaScript’s arrays. Therefore, you will get an error if you accessing index -1 of an array using the brackets:

let arr = ['Learn', 'Share', 'IT'];
console.log(arr[-1]); // undefined

If you want the index -1 or any negative to be invalid indexe instead of a valid index, then you should see the next solution.

Using length

length is not a function in JavaScript, but in fact, it is a property representing the size of an array. Any valid or existing index in JavaScript always satisfies the condition that it is smaller than the length. Therefore, we can check if an array index exists using by comparing those values:

let arr = ['Learn', 'Share', 'IT'];
let index = 0;

// Check if an array index 0 exists
if (index < arr.length) {
    console.log("index " + index + " exists, value is "+ arr[index]);
} else {
    console.log("index " + index + " does not exist");
}

Output: 

index 0 exists, value is Learn

If you think that the if statement is not simple enough, then you can use the next approach.

Using chaining operator 

The chaining operator (optional), which is “?.”, can help you check if an array index exists. It will return its value when the index exists. Otherwise, it returns undefined meaning that an array index doesn’t exist.

let arr = ['Learn', 'Share', 'IT'];

// Check if an array index 0 exists
console.log(arr?.[0])

// Check if an array index 3 exists
console.log(arr?.[3])

// Check if an array index -2 exists
console.log(arr?.[-2])

Output: 

Learn
undefined
undefined

As you can see, it is assumed that any negative index is an invalid index when it comes to arrays in JavaScript. Using this approach still produces the same results as the previous one. In fact, most programmers are likely to use this method rather than others.

Summary

We have known how to check if an Array Index exists in JavaScript using three different approaches. We suggest you use the last solution of using the chaining operator. By using our solutions in our tutorial and others, you can be able to achieve the goal.

Edward Anderson

I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.

---

Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R