Find the Index of the Element in an Array JavaScript

Finding the index of an element in a JavaScript array is a very frequently asked question. In this tutorial, we will show you multiple js functions, To find the position or index of an element in an array using JavaScript array.

How to find the index of the element from an array JavaScript

Here are several JavaScript functions and approaches to finding the position of an element from an array:

  • IndexOf() Array in Js
  • FindIndex() Array in Js
  • lastIndexOf() array – Find last Index Of Element From Array JavaScript

IndexOf() Array in Js

The indexOf() the function helps us to find the first index of the specified element from js array. If the element is not found, it returns -1.

The common syntax of the indexOf():

Array.indexOf(search, startIndex)

Here, the indexOf() method accepts two parameters.

  1. The search argument is the element that you want to find in the array.
  2. The startIndex is an array index at which the function starts the search.

Note:- The startIndex parameter value can be a positive or negative integer.

Here is an example of how to use the indexOf() method to find the index of an element in an array:

var arr = [10, 20, 30, 40, 50, 70, 10];

The following example uses the indexOf() method to find the elements in the arr array:

var arr = [10, 20, 30, 40, 50, 70, 10, 50];
console.log(arr.indexOf(10)); // 0
console.log(arr.indexOf(50)); // 4
console.log(arr.indexOf(70)); // 5
console.log(arr.indexOf(30)); // 2

If you have the following array of objects, where each object has different properties. See the following:

var obj = [
    {name: 'John Doe', age: 30},
    {name: 'Tom Bush', age: 20},
    {name: 'Bill Gate', age: 25}
];

Even if the first element in the array (obj) has the same values for name and ages as the searchElement, the statement returns -1. Why? Because these two objects might look the same, but they are actually different objects in JavaScript. So, it’s like saying, “Even though they seem alike, they’re not the exact same thing.”

console.log(obj.indexOf({
    name: 'John Doe',
    age: 30
})); // -1

FindIndex() Array in Js

In JavaScript, the findIndex function helps you to find the position (index) of the first element in an array that satisfies a specific condition.

The basic syntax of the lastIndexOf() method:

const index = array.findIndex(callback(element[, index[, array]])[, thisArg]);
  • array: The array you’re investigating.
  • callback: A function that defines the condition. It gets three arguments: element (the current element being checked), index (the index of the current element), and array (the array itself).
  • thisArg (optional): An object to which the this keyword can refer in the callback function. It’s like giving the detective additional instructions.

Here is an example of how to use the findIndex() method to find the index of an element in an array:

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex(element => element === 5);
console.log(index); // 4

If the element is not found using findIndex, the method returns -1. Here is an example:

const numbers = [2, 8, 4, 10, 3];

const index = numbers.findIndex(num => num > 20);

console.log("Index of the first number greater than 20:", index);
// Output: Index of the first number greater than 20: -1

lastIndexOf() array – Find last Index Of Element From Array JavaScript

lastIndexOf method to find the index of the last occurrence of an element in an array. This method is similar to indexOf, but it starts searching the array from the end rather than the beginning. If the element is not found, it returns -1.

Here’s a simple example:

const fruits = ["apple", "orange", "banana", "apple", "grape"];

const lastIndex = fruits.lastIndexOf("apple");

console.log("Last index of 'apple':", lastIndex);
// Output: Last index of 'apple': 3

Conclusion

In this tutorial, you have learned how to find the position of the element from JavaScript array by using indexOf(), findIndex() and lastIndexOf() functions.

Recommended JavaScript Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *