JavaScript Array Includes: How to Check for Specific Values

JavaScript array includes is a powerful method used to check if an array contains a specific value. Arrays are a fundamental data structure in JavaScript, commonly used to store multiple values in a single variable. When working with arrays, it is often necessary to check if a specific value exists within them. This is useful in various scenarios, such as validating user inputs, filtering data, or handling conditional logic. JavaScript provides multiple ways to check for the presence of a value in an array, with the includes() method being one of the simplest and most efficient. In this blog, we will explore how includes() works, its syntax, and alternative methods for checking values in JavaScript arrays.

Understanding What an is Array includes() In JavaScript?

The includes() method is a built-in JavaScript function that allows developers to check if an array contains a specific value. It returns a boolean value (true or false) depending on whether the value is found.

Syntax:

array.includes(value, startIndex);

• value: The element to search for in the array.
• startIndex (optional): The position in the array from where the search should begin (default is 0).

Example:

const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // Output: true
console.log(fruits.includes("grape"));  // Output: false

The includes() method is case-sensitive, meaning "Banana" and "banana" are treated as different values. It is widely supported in modern browsers and provides a straightforward way to check for values in JavaScript arrays.

Using includes() in Practice

The includes() method is a simple and effective way to check if an array contains a specific value. Below are various examples demonstrating its usage in different scenarios.

1. Basic Usage of includes()

const colors = ["red", "green", "blue"];

console.log(colors.includes("green")); // Output: true
console.log(colors.includes("yellow")); // Output: false

The method returns true if the specified value exists in the array and false otherwise.

2. Using includes() with Numbers

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.includes(30)); // Output: true
console.log(numbers.includes(100)); // Output: false

This works for numeric arrays as well, allowing for quick membership checks.

3. Case Sensitivity in includes()

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits.includes("apple")); // Output: false
console.log(fruits.includes("Apple")); // Output: true

Since includes() is case-sensitive, “Apple” and “apple” are treated as different values.

4. Using the startIndex Parameter

const names = ["Alice", "Bob", "Charlie", "Alice"];

console.log(names.includes("Alice", 2)); // Output: true
console.log(names.includes("Alice", 3)); // Output: true
console.log(names.includes("Alice", 4)); // Output: false

The second argument specifies the index from where the search should begin. If the value exists before that index, it will not be found.

5. Checking for NaN in an Array

Unlike some other methods like indexOf(), includes() can correctly detect NaN in an array.

const data = [10, 20, NaN, 40];

console.log(data.includes(NaN)); // Output: true

This makes includes() a better option when working with arrays that may contain NaN.

By using includes(), developers can efficiently determine whether a specific value exists in an array, making it a valuable tool for handling search operations in JavaScript.

Alternative Methods to Check for Values in Arrays

Apart from the includes() method, JavaScript provides other ways to check if an array contains a specific value. These methods include indexOf(), find(), and some(), each with its own advantages and use cases.

1. Using indexOf()

The indexOf() method returns the index of the first occurrence of a specified value in an array. If the value is not found, it returns -1.

Example:

const cities = ["New York", "London", "Tokyo"];

console.log(cities.indexOf("London") !== -1); // Output: true
console.log(cities.indexOf("Paris") !== -1);  // Output: false

✅ Use Case: Works well for checking existence when index retrieval is needed.
❌ Limitation: Cannot detect NaN, and checking for existence requires comparing the result with -1.

2. Using find()

The find() method returns the first element that satisfies a given condition. If no element matches, it returns undefined.

Example:

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num === 20) !== undefined); // Output: true
console.log(numbers.find(num => num === 50) !== undefined); // Output: false

✅ Use Case: Useful when searching for an object or when additional conditions are involved.
❌ Limitation: Returns the value, not a boolean, requiring additional checks for existence.

3. Using some()

The some() method checks if at least one element in the array satisfies a given condition. It returns true or false.

Example:

const ages = [15, 25, 35, 45];

console.log(ages.some(age => age > 30)); // Output: true
console.log(ages.some(age => age > 50)); // Output: false

✅ Use Case: Ideal for checking if any element meets a specific condition.
❌ Limitation: Requires a callback function, making it slightly more complex than includes().

Comparison Table

Method	Returns	Best For	Limitation
includes()	true/false	Checking simple values	Case-sensitive
indexOf()	Index/-1	Finding index of value	Does not detect NaN
find()	Value/undefined	Retrieving elements	Not directly boolean
some()	true/false	Conditional searches	Requires a callback

Each method has its own strengths. While includes() is the easiest for checking simple values, some() and find() offer more flexibility for complex conditions.

Browser Compatibility and Performance Considerations

Browser Compatibility

The includes() method was introduced in ECMAScript 2016 (ES7) and is supported by all modern browsers. However, older versions of Internet Explorer (IE11 and below) do not support it.

Browser	Support
Chrome	✅ Supported (Since v47)
Firefox	✅ Supported (Since v43)
Edge	✅ Supported
Safari	✅ Supported (Since v9)
Opera	✅ Supported
Internet Explorer	❌ Not Supported

For older browsers like Internet Explorer, a polyfill can be used:

if (!Array.prototype.includes) {
  Array.prototype.includes = function(value) {
    return this.indexOf(value) !== -1;
  };
}

Performance Implications

The performance of includes() depends on the array size and the position of the element being searched.

1. Time Complexity:
   • includes() runs in O(n) time complexity in the worst case, as it checks each element sequentially.
   • If the value is found early in the array, execution stops, making it efficient for smaller datasets.
2. Comparison with indexOf():
   • includes() is slightly more readable than indexOf(), but both have similar performance.
   • includes() is preferred when a simple true/false check is needed.
3. Handling Large Arrays:
   • If frequent searches are required on large arrays, using a Set (O(1) lookup time) instead of an array is more efficient:
   const numSet = new Set([10, 20, 30, 40]); console.log(numSet.has(30)); // Output: true

In summary, includes() is a well-supported, efficient choice for checking values in small to medium-sized arrays, but for large datasets with frequent lookups, using a Set can improve performance.

Conclusion

Conclusion

JavaScript array includes is the easiest way to check if an array contains a specific value. The includes() method provides a straightforward approach, while indexOf(), find(), and some() offer alternatives based on different use cases. For optimal performance with large datasets, consider using a Set. Visit Newtum for more programming tutorials!

About The Author