DEV Community

WebTechnology Tutorials
WebTechnology Tutorials

Posted on • Originally published at webcodingwithankur.blogspot.com

How to Use indexOf() in JavaScript – Complete Guide with Examples

#javascript #webdev #beginners #programming

Learn how to use indexOf() in JavaScript with syntax

A beginner-friendly deep dive into JavaScript’s powerful indexOf() method — from strings to arrays, and real-world examples.

🔍 What is indexOf() in JavaScript?
The indexOf() method is used to find the position (index) of a specific element inside a string or array. If it’s not found, it returns -1.

🧪 Syntax
For Strings:

string.indexOf(searchValue, startIndex)
Enter fullscreen mode Exit fullscreen mode

For Arrays:

array.indexOf(searchElement, fromIndex)
Enter fullscreen mode Exit fullscreen mode

📘 Using indexOf() with Strings

const text = "JavaScript is amazing"; console.log(text.indexOf("Script")); // 4
Enter fullscreen mode Exit fullscreen mode

✅ Case Sensitivity

console.log(text.indexOf("script")); // -1
Enter fullscreen mode Exit fullscreen mode

🔁 First Occurrence

const sentence = "I love JavaScript because JavaScript is fun!"; console.log(sentence.indexOf("JavaScript")); // 7
Enter fullscreen mode Exit fullscreen mode

🕵️‍♂️ Find All Occurrences

const str = "JS is cool. JS is powerful. JS is everywhere!"; let index = str.indexOf("JS"); while (index !== -1) { console.log("Found at:", index); index = str.indexOf("JS", index + 1); }
Enter fullscreen mode Exit fullscreen mode

🧾 Using indexOf() with Arrays

const fruits = ["apple", "banana", "cherry", "apple"]; console.log(fruits.indexOf("apple")); // 0 console.log(fruits.indexOf("cherry")); // 2
Enter fullscreen mode Exit fullscreen mode 
const numbers = [1, 5, 10, 15]; console.log(numbers.indexOf(10)); // 2 console.log(numbers.indexOf(20)); // -1
Enter fullscreen mode Exit fullscreen mode

🎯 Check if an Element Exists

if (fruits.indexOf("banana") !== -1) { console.log("Banana is in the list!"); }
Enter fullscreen mode Exit fullscreen mode

🧠 indexOf() vs includes()

| Feature | indexOf() | includes() | | -------- | ------------- | --------------- | | Returns | Index or -1 | true / false | | Use Case | Find position | Check existence |
Enter fullscreen mode Exit fullscreen mode

⚡ Performance Tip

// Simpler check arr.includes("item"); // More flexible arr.indexOf("item") !== -1
Enter fullscreen mode Exit fullscreen mode

📌 Real-World Use Case

const input = "Learn JavaScript the fun way!"; const term = "JavaScript"; if (input.indexOf(term) !== -1) { console.log(`The term "${term}" exists in the sentence.`); }
Enter fullscreen mode Exit fullscreen mode

❓ Common Interview Question
Q: How can you check if a string contains a word without using regex?
A: Use .indexOf() and compare the result with -1.

🧩 Practice Challenge
Write a function that finds if the word "React" exists in a sentence and returns its position.

function findReact(sentence) { return sentence.indexOf("React"); } console.log(findReact("I love React and JavaScript")); // 7
Enter fullscreen mode Exit fullscreen mode

✅ Summary

  • Works on strings and arrays
  • Returns index if found, -1 if not
  • Case-sensitive
  • Use includes() for existence check only

🧠 FAQs
Q: Can indexOf() find objects in an array?
A: No, only primitive values like strings, numbers.

Q: What if multiple matches exist?
A: It returns the first index only.

Q: Does indexOf() modify the array or string?
A: No, it is non-mutating.

🔥 Want More?
Read the full blog with images and formatting here:
👉 https://webcodingwithankur.blogspot.com/2025/07/indexof-in-javascript-complete-guide.html

Top comments (0)