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')

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 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 (IE9+)
• findIndex() – Supported in modern browsers (not IE)
• $.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:

Final Thoughts

Finding the index of a value is one of the most common tasks in JavaScript and jQuery. Whether you’re building dynamic lists, filtering data, or modifying arrays, understanding indexOf(), findIndex(), and $.inArray() will give you the tools to work more effectively.

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