Find the Index of the Element in an Array JavaScript

[ad_1]

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.

Ezoic

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:

Ezoic

  • 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.

Ezoic

  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:

Ezoic

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.”

Ezoic

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.

Ezoic

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

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518