How Does JavaScript includes() Method Work and When Should I Use It?

The JavaScript includes() method is a built-in string and array function that checks if a specific element exists within a string or array. This straightforward function returns either true or false based on whether it finds the searched item or not. Let's explore how it works and see practical examples of its use.

Basic Syntax and Usage

The includes() method has a simple syntax that makes it easy to use. For strings, it looks like this:

1string.includes(searchString, position)

For arrays, the syntax is similar:

1array.includes(element, fromIndex)

The second parameter in both cases is optional. It tells the method where to start searching from. If you don't specify it, the search starts from the beginning.

Working with Strings

When you use includes() with strings, it performs a case-sensitive search. This means "Hello" and "hello" are treated as different strings. Here's how you might use it:

1const message = "JavaScript is fun";
2console.log(message.includes("fun")); // true
3console.log(message.includes("Fun")); // false

You can also specify a starting position:

1const text = "Hello World";
2console.log(text.includes("World", 6)); // true
3console.log(text.includes("World", 7)); // false

Working with Arrays

The includes() method works differently with arrays. It can find both primitive values and object references. Here's an example:

1const numbers = [1, 2, 3, 4, 5];
2console.log(numbers.includes(3)); // true
3console.log(numbers.includes(6)); // false

One important note about arrays: when searching for objects or arrays, includes() looks for the exact same reference, not just matching content:

1const arrayOfObjects = [{id: 1}, {id: 2}];
2const obj = {id: 1};
3console.log(arrayOfObjects.includes(obj)); // false
4console.log(arrayOfObjects.includes(arrayOfObjects)); // true

Common Use Cases

The includes() method proves useful in many situations:

1. Input validation

1function validateUsername(username) {
2    if (username.includes(" ")) {
3        return "Username cannot contain spaces";
4    }
5    return "Username is valid";
6}

2. Feature detection

1const browserSupports = {
2    audio: ["mp3", "wav", "ogg"],
3    video: ["mp4", "webm"]
4};
5
6function canPlayFormat(format) {
7    return browserSupports.audio.includes(format) || 
8           browserSupports.video.includes(format);
9}

Performance Considerations

The includes() method scans through each element until it finds a match or reaches the end. For very large arrays or strings, this might not be the most efficient solution. If you need to check for element existence frequently in a large dataset, consider using Set or Map objects instead:

1const largeArray = [1, 2, 3, /* ... many items ... */, 1000];
2const setVersion = new Set(largeArray);
3
4// More efficient for repeated lookups
5console.log(setVersion.has(500));

Browser Support

The includes() method has wide browser support. It works in all modern browsers and in Node.js. For older browsers, you might need a polyfill or use alternative methods like indexOf().

Alternative Methods

While includes() is very useful, you might want to use other methods depending on your needs:

• indexOf(): When you need to know the position of an element
• some(): When you need to check if any element meets a condition
• find(): When you need to retrieve the actual element that matches a condition

The includes() method stands out for its simplicity and readability. It makes code clearer and more direct than using indexOf() >= 0 to check for existence. When you need a simple true/false answer about whether something exists in a string or array, includes() is your best choice.

Choose includes() when you need a straightforward way to check for element existence, but consider alternatives when you need more complex operations or better performance with large datasets.