How to Check if an Array Includes a Value in JavaScript: The Modern Way

When working with JavaScript arrays, one of the most common tasks is to check whether a certain value exists within an array. Historically, this required writing loops or using methods that were not always intuitive. However, modern JavaScript provides more concise and readable solutions. Let’s explore the best methods for checking if an array contains a value and why you should use them.

1. The Modern Way: Array.prototype.includes()

Starting with ECMAScript 2016 (ES7), JavaScript introduced the includes() method, which is the easiest and most efficient way to check if an array contains a value. It is widely supported by all modern browsers, except for older versions of Internet Explorer.

Here’s how it works:

const array = ['joe', 'jane', 'mary'];
console.log(array.includes('jane'));  // true
console.log(array.includes('john'));  // false

The includes() method returns true if the array contains the specified value, and false if it does not. This approach is simple, direct, and highly readable.

Why Use includes()?

• Simplicity: It’s a single, intuitive method call.
• Readability: array.includes(value) immediately tells you what the code does.
• Boolean return value: It returns a true or false directly, which makes it perfect for conditional logic.
• Widely Supported: All modern browsers support this method, making it the go-to choice for most developers today.

2. The Legacy Approach: Array.prototype.indexOf()

Before includes() was available, developers often used indexOf() to achieve the same result. The indexOf() method returns the index of the value in the array, or -1 if the value is not found. To check if an array contains a value, you need to compare the result against -1:

const array = ['joe', 'jane', 'mary'];
console.log(array.indexOf('jane') >= 0);  // true
console.log(array.indexOf('john') >= 0);  // false

While this works, it’s less intuitive than includes(). The fact that indexOf() returns an index (which can be 0 for the first element) makes it slightly less readable when used in a boolean condition.

Why Might You Still Use indexOf()?

• Browser Compatibility: For older environments that don’t support includes(), indexOf() provides similar functionality. However, this is rarely a concern today unless you’re working in extremely legacy environments.
• Backward Compatibility: If you’re maintaining old code, you might come across indexOf() more frequently.

3. Checking for Objects: Array.prototype.some()

Both includes() and indexOf() use strict equality (===) to compare values, which works well for primitive types like strings and numbers. However, if you’re dealing with arrays of objects, things get a bit trickier. For example:

const items = [{ a: '1' }, { a: '2' }, { a: '3' }];

// This won't work as expected:
console.log(items.includes({ a: '2' }));  // false

In the above example, includes() will return false even though the object { a: '2' } seems to exist in the array. This happens because objects in JavaScript are compared by reference, not by value.

To check if an array contains an object with a specific property, you can use Array.prototype.some():

const items = [{ a: '1' }, { a: '2' }, { a: '3' }];

console.log(items.some(item => item.a === '3'));  // true
console.log(items.some(item => item.a === '4'));  // false

The some() method iterates over the array and returns true as soon as it finds an item that matches the condition, which makes it highly efficient. It also works seamlessly in conditional statements.

When to Use some()?

• Object comparison: If you’re working with arrays of objects and need to compare by property rather than reference.
• Conditional logic: Since some() returns a boolean, it fits well inside if statements.

4. A Classic but Risky Approach: Extending Array.prototype

Some developers used to extend the Array.prototype to add custom methods like contains(). While this is no longer recommended, you might come across legacy code that looks like this:

Array.prototype.contains = function(obj) {
    return this.indexOf(obj) >= 0;
};

console.log([1, 2, 3].contains(2));  // true

While this approach works, modifying built-in prototypes is risky and can lead to conflicts or unexpected behavior, especially if different libraries define methods with the same name. Today, it’s best to avoid this pattern.

Performance Considerations

In most cases, the performance difference between includes() and indexOf() is negligible for small arrays. However, if performance is critical (e.g., working with large datasets), you might want to benchmark the methods in your specific environment to choose the fastest option.

Conclusion

In modern JavaScript, checking if an array contains a value is easier than ever, thanks to the includes() method. It’s concise, readable, and widely supported. For arrays containing objects, some() is your best friend, allowing you to write expressive and efficient code.

Summary of Methods:

• Best for primitives: Use includes() for a simple and direct way to check if a value exists in an array.
• Legacy support: Use indexOf() for older environments that don’t support includes().
• Objects in arrays: Use some() to check if an array contains an object with specific traits.