What is indexof in JavaScript and How does it works?

Are you ready to discover the functionality of the indexOf() method with both strings and arrays in JavaScript?

In this article, you will learn how it locates the position of a specific value within a string or an array and understand its syntax, parameters, and return values through practical examples.

Dive into the nuances of JavaScript zero-based indexing and explore how indexOf() can be used in various coding scenarios.

What is indexof?

The indexOf() method in JavaScript is a handy tool that is used to find out where a specific piece of data is located within a string or an array.

What is JavaScript String indexOf() Method?

The string.indexOf() method in JavaScript is used with strings to find the position of the first occurrence of a specified value.

This method returns the position of the first instance of a certain value within that string. If the value isn’t found in the string, it returns -1.

It’s important to remember that this function is case sensitive, so “Itsourcecode” and “itsourcecode” would be considered different values.

For example:

let sampletext = "Hi, Welcome to Itsourcecode!";
let result = sampletext.indexOf("itsourcecode");✅  
console.log(result)

Output:

-1

Syntax

string.indexOf(searchValue[, fromIndex]) ✅

Parameters

searchValue (required)

The string value that you want to search for in the string.

fromIndex (optional)

The position in the string where you want to start the search. The default value is 0.

Return value

If the searchValue is found, indexOf() returns the position of the first occurrence of the specified value.
If the searchValue is not found, it returns -1.

Here’s an example:

let sampletext = "Hi, Welcome to Itsourcecode!";
let result = sampletext.indexOf("Itsourcecode"); ✅ 
console.log(result)

Output:

15

As you can see, the word “Itsourcecode” starts at position 15 in the string.

The spaces and punctuation marks are also counted as characters. Therefore, the output of sampletext.indexOf(“Itsourcecode”) is correctly 15.

Here’s another example:

let sampletext = "Itsourcecode give you free sourcecodes and tutorials.";
let position = sampletext.indexOf("sourcecodes"); ✅

if (position !== -1) {
  console.log(`The word "sourcecodes" was found at position ${position} in the text.`);
} else {
  console.log('The word "sourcecodes" was not found in the sentence.');
}

Output:

The word "sourcecodes" was found at position 27 in the text.

You can also use indexOf() with arrays, so keep on reading to understand it thoroughly. 😉

What is JavaScript Array indexOf() Method?

The array.indexOf() method in JavaScript is a built-in function that’s used with arrays.

It returns the first index at which a given element can be found in the array. If the element isn’t in the array, it will return -1.

Syntax

array.indexOf(element, start) ✅

Parameters

element (required)

The element to locate in the array.

start (optional)

The index to start the search at. If omitted, the search starts at index 0.

Return value

The array.indexOf method in JavaScript returns the first index of the element in the array; -1 if not found.

Here’s an example:

let subjects = ["Programming", "Web Development", "Software Development", "Software Engineering"];
let result = subjects.indexOf("Software Development");✅  
console.log(result)

In this example, the subject “Software Development” is found at position 2 in the array.

If the subject “Software Development” was not found in the array, the result would be -1.

Output:

2

Here’s another example with an array.indexof in JavaScript:

const numbers = [100, 200, 300, 400, 500];
const result = numbers.indexOf(500); ✅
console.log(result)

Output:

4

📌Please take note that both these methods start their search from index 0.

Supported Browser

✔ Chrome

✔ Edge

✔ Firefox

✔ Internet Explorer

✔ Safari

✔ Opera

What does indexOf == 0 mean in JavaScript?

The indexOf() == 0 In JavaScript is a condition that checks if the position of a specified value is at the start of a string or an array.

For instance, if you have a string and you want to check if it starts with a certain substring, you can use indexOf() == 0.

Here’s an example:

let samplestr = "Welcome to Itsourcecode!";
if (samplestr.indexOf("Welcome") == 0) {
console.log("The string starts with 'Welcome'");
} else {
console.log("The string does not start with 'Welcome'");
}

In this case, samplestr.indexOf(“Welcome“) returns 0 because “Welcome” is at the start o in the beginning of the string.

So, samplestr.indexOf(“Welcome“) == 0 is true.

Output

The string starts with 'Welcome'

Similarly, for an array.indexOf() == 0 checks if a certain element is the first element in the array in JavaScript.

If it is, indexOf() returns 0, and indexOf() == 0 is true.

Here’s an example:

let subjects = ["Programming", "Web Development", "Software Development", "Software Engineering"];
if (subjects.indexOf("Programming") == 0) ✅  {
  console.log("The array starts with 'Programming'");
} else {
  console.log("The array does not start with 'Programming'");
}

Output:

The array starts with 'Programming'

📌Remember that JavaScript uses zero-based indexing, so the first position in a string or an array is 0.

What is the difference between the search () and indexOf () method in JavaScript?

The search() and indexOf() methods in JavaScript are both used to find the position of a substring in a string, but they have some key differences:

Regular expression support

The search() method in JavaScript has the ability to execute a search using a regular expression, a feature that the indexOf() method lacks.

Starting position argument

The indexOf() method has the unique capability to accept a second argument that determines the starting point of the search within the string.

This is a functionality that the search() method does not offer.

Here’s an example:

let samplestr = "Itsourcecode!";
console.log(samplestr.indexOf("o")); ✅ // Outputs: 3
console.log(samplestr.search("o")); ✅ // Outputs:3 

console.log(samplestr.indexOf("o", 5)); ✅ // Outputs: 9 (starts searching from index 5)
// search() doesn't support a starting position argument

console.log(samplestr.search(/o/i)); ✅   // Outputs: 3 (supports regular expressions)
// indexOf() doesn't support regular expressions

In this code, both indexOf(“o”) and search(“o”) return 3, because “o” is found at position 3 in the string.

However, indexOf(“o”, 5) returns 9, because it starts searching from index 5.

The search(/o/i) returns 3 because it supports regular expressions (in this case, a case-insensitive search for “o”).

So, if you need to use a regular expression or if performance is a concern, use the search() method.

If you want to designate a specific starting point for your search, the indexOf() method is the way to go.

Conclusion

In conclusion, the indexOf() method in JavaScript is a versatile tool used to locate the position of a specific value with both strings and arrays.

It’s important to remember that JavaScript uses zero-based indexing, so the first position in a string or an array is 0.

The indexOf() method returns -1 if the specified value is not found. 

For strings, its case sensitive, meaning “Itsourcecode” and “itsourcecode” are considered different values.

For arrays, it returns the first index at which a given element can be found.

We are hoping that this article provides you with enough information that helps you understand the indexof in JavaScript.

If you want to dive into more JavaScript topics, check out the following articles:

• What is a substring in JavaScript
• Slice string JavaScript
• JavaScript string splice

Thank you for reading Itsourcecoders 😊.