Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Write a program to find the index of particular element in an array in javascript?
Finding the index of a particular element in an array is a common task in JavaScript. An array is an object that contains multiple values in a sequential order, with each element having a specific index position.
Syntax
Arrays can be created in two ways:
var arr = [val1, val2, ...];
var arr = new Array("val1", "val2", ...)
Using for Loop
The traditional approach uses a for loop to iterate through the array and compare each element with the target value.
<!DOCTYPE html>
<html>
<head>
<title>Find Array Index</title>
</head>
<body>
<script>
var subjects = ["English", "Hindi", "Science", "Mathematics"];
var searchElement = "Hindi";
for(let i = 0; i < subjects.length; i++){
if(subjects[i] === searchElement) {
document.write("Index of '" + searchElement + "' is: " + i);
break;
}
}
</script>
</body>
</html>
Index of 'Hindi' is: 1
Using indexOf() Method
The indexOf() method is the most commonly used approach. It returns the first index of the specified element, or -1 if not found.
Syntax
arr.indexOf(searchElement, startIndex)
Example
<!DOCTYPE html>
<html>
<head>
<title>indexOf Example</title>
</head>
<body>
<script>
var colors = ['red', 'blue', 'green', 'orange', 'blue'];
document.write("Index of 'green': " + colors.indexOf('green') + "<br>");
document.write("Index of 'blue': " + colors.indexOf('blue') + "<br>");
document.write("Index of 'purple': " + colors.indexOf('purple'));
</script>
</body>
</html>
Index of 'green': 2 Index of 'blue': 1 Index of 'purple': -1
Using findIndex() Method
The findIndex() method is useful for complex conditions and returns the index of the first element that satisfies the provided testing function.
Syntax
arr.findIndex(callback(element, index, array))
Example
<!DOCTYPE html>
<html>
<head>
<title>findIndex Example</title>
</head>
<body>
<script>
var numbers = [5, 12, 8, 130, 44];
// Find index of first number greater than 10
var index1 = numbers.findIndex(element => element > 10);
document.write("Index of first number > 10: " + index1 + "<br>");
// Find index of specific number
var index2 = numbers.findIndex(element => element === 8);
document.write("Index of number 8: " + index2);
</script>
</body>
</html>
Index of first number > 10: 1 Index of number 8: 2
Comparison
| Method | Use Case | Returns | Performance |
|---|---|---|---|
| for loop | Simple searches with custom logic | Index (custom handling) | Fast |
| indexOf() | Finding exact matches | First index or -1 | Fastest |
| findIndex() | Complex conditions | First matching index or -1 | Slower (function calls) |
Conclusion
Use indexOf() for simple element searches and findIndex() for complex conditions. The for loop approach gives you maximum control but requires more code.
1K+ Views
