Find the Index of a Value in an Array using JS or jQuery

Finding the index of a value in an array is a common task in JavaScript and jQuery development. Whether you’re trying to locate an item, remove it, or update it, knowing how to get its index is key to working efficiently with arrays.

In JavaScript, arrays are zero-indexed – meaning the first element has an index of 0, the second is 1, and so on.

In this post, we’ll cover several ways to get the index of a value in an array using both JavaScript and jQuery techniques. Let’s dive in.

Using indexOf in JavaScript

The easiest way to get the index of a value in a JavaScript array is by using the built-in indexOf() method:

const fruits = ['apple', 'banana', 'mango', 'orange'];
const index = fruits.indexOf('mango');

console.log(index); // Output: 2

If the value is not found, indexOf() will return -1.

const index = fruits.indexOf('kiwi');
console.log(index); // Output: -1

This method is also covered in our complete guide to JavaScript arrays.

Case Sensitivity

It’s important to note that indexOf() is case-sensitive:

const index = fruits.indexOf('Mango');
console.log(index); // Output: -1 (because 'Mango' !== 'mango')

The fromIndex Parameter

Both indexOf() and lastIndexOf() accept an optional second argument called fromIndex, which specifies where to start the search:

const nums = [1, 2, 3, 2, 1];

nums.indexOf(2);      // 1 (first occurrence)
nums.indexOf(2, 2);   // 3 (search starts at index 2)
nums.lastIndexOf(2);  // 3 (last occurrence, searches backwards)

This is useful when an array contains duplicate values and you need to find a specific occurrence.

Using findIndex for More Control

If you need to find an index based on more complex conditions (e.g. objects or partial matching), use findIndex():

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const index = users.findIndex(user => user.name === 'Bob');
console.log(index); // Output: 1

findIndex() is great for working with arrays of objects, or when you need a custom matching condition.

Using includes for Existence Checks

If you only need to know whether a value exists in an array (without needing its index), use includes():

const fruits = ['apple', 'banana', 'mango'];

fruits.includes('banana'); // true
fruits.includes('kiwi');   // false

Unlike indexOf(), the includes() method correctly handles NaN values: [NaN].includes(NaN) returns true, while [NaN].indexOf(NaN) returns -1.

Use includes() when you need a boolean answer and indexOf() when you need the position.

Using jQuery $.inArray

If you’re using jQuery, the equivalent of indexOf() is $.inArray():

var colors = ['red', 'green', 'blue', 'yellow'];
var index = $.inArray('blue', colors);

console.log(index); // Output: 2

This method integrates seamlessly with many jQuery features, like those used in jQuery event handling or DOM manipulation with jQuery.

Use Case: Check Before Removing

You can use this method to safely remove an item only if it exists:

var value = 'green';
var i = $.inArray(value, colors);

if (i !== -1) {
  colors.splice(i, 1); // Removes 'green'
}

To learn more about modifying arrays, read our guide on removing duplicates from an array using JS or jQuery.

Browser Compatibility

• indexOf() – Supported in all modern browsers.
• findIndex() – Supported in all modern browsers.
• includes() – Supported in all modern browsers.
• $.inArray() – Supported anywhere jQuery runs.

Which Should You Use?

Choosing the right method depends on what kind of data you’re working with and how complex your condition is. Here’s a breakdown to help you decide:

• indexOf() – Best for simple value searches:
  Use this method when you have a basic array of strings or numbers and want to check if a specific value exists. It’s easy to read, supported in all modern browsers (including IE9+), and perfect for straightforward comparisons.

This is the most beginner-friendly option. If you’re just starting with JavaScript and working with arrays like ['apple', 'banana', 'orange'], indexOf() will do the job.

• findIndex() – Great for complex conditions or objects:
  Use this method if your array contains objects or if you need to search based on a specific condition. It accepts a callback function that allows for flexible matching logic.

This method is ideal when working with structured data like [{ id: 1, name: 'Alice' }, ...] where you need to find an object based on its properties.

• $.inArray() – Ideal if you’re using jQuery:
  This is jQuery’s equivalent of indexOf(). It behaves similarly and is especially useful when you’re already using jQuery to manage your DOM or events.

If your project already uses jQuery, prefer $.inArray() to keep your codebase consistent and compatible.

Still unsure? Here’s a quick rule of thumb:

• Use indexOf() for arrays of primitive values like strings or numbers.
• Use findIndex() when you’re dealing with objects or need a custom match condition.
• Use $.inArray() if you’re working in a jQuery environment.

Live Demo

The live example in the post lets you check the position (index) of a specific color in an array. Simply enter a color name in the input box (e.g., blue or green) and click the “Check Index” button.

The code uses $.inArray() to check if the entered color exists in the array. If it does, you’ll see its index. If not, the message “Value not found” will appear.

This is a simple way to interact with array search logic and see how it works in real time.

<input type="text" id="search" placeholder="Enter a color">
<button id="check">Check Index</button>
<div id="result"></div>

<script>
  const colors = ['red', 'green', 'blue', 'yellow'];

  $('#check').on('click', function () {
    const value = $('#search').val();
    const index = $.inArray(value, colors);
    $('#result').text(index !== -1 ? 'Index: ' + index : 'Value not found');
  });
</script>

Here’s how it looks:

FAQs

Common questions about finding array indices in JavaScript:

Summary

Finding the index of a value is one of the most common array operations in JavaScript. For simple lookups, indexOf() is the go-to method. When you need custom matching logic or are working with arrays of objects, findIndex() gives you full control. For existence checks without needing the position, includes() is the clearest choice.

If your project already uses jQuery, $.inArray() works as a drop-in equivalent of indexOf(). Whichever method you choose, always check for -1 before using the returned index to avoid unexpected behavior.

Want to keep learning? Check out our guide to sorting JavaScript arrays for more tips on working with array data.