JavaScript
Programming
Web Development
Array Manipulations
Coding Tips

Check if an array contains any element of another array in JavaScript

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

In JavaScript, checking if an array contains any element of another array is a common task that can be approached in various ways depending on performance needs, readability, and specific requirements. We'll explore different methods including using loops, the includes() method, and the newer Set object.

1. Using Array.prototype.includes()

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate. By combining this with the some() method, which tests whether at least one element in the array passes the test implemented by the provided function, you can easily check if any element of one array exists in another.

javascript
1const array1 = ["a", "b", "c"];
2const array2 = ["x", "y", "b"];
3
4const containsAny = array2.some((el) => array1.includes(el));
5console.log(containsAny); // Output: true

2. Using Loops

For cases where older browser support is required, or when a more manual approach is preferred, you can use nested loops to check for the presence of elements:

javascript
1const array1 = ["a", "b", "c"];
2const array2 = ["x", "y", "b"];
3
4let found = false;
5for (let i = 0; i < array2.length; i++) {
6  if (array1.indexOf(array2[i]) !== -1) {
7    found = true;
8    break;
9  }
10}
11console.log(found); // Output: true

3. Using Set

The Set object lets you store unique values. Since it's built for fast access, converting an array to a set and then checking if any element of the second array exists can be efficient, especially for large arrays with unique elements.

javascript
1const array1 = ["a", "b", "c"];
2const array2 = ["x", "y", "b"];
3const set1 = new Set(array1);
4
5const containsAny = array2.some((el) => set1.has(el));
6console.log(containsAny); // Output: true

Comparison Table

MethodBest Usage CasePerformanceBrowser Compatibility
includes() + some()Small to medium arrays, readability preferredGood for smaller datasetsES6+ (not IE)
Nested loopsHigh compatibility needs, all browsersSlower especially for large arraysAll browsers
Set + some()Large datasets with unique elementsFast for look-ups, slow for initial creationES6+ (not IE)

Best Practices and Considerations

  • Performance: Consider the size of your arrays. Nested loops have a time complexity of O(n×m)O(n \times m) where n and m are the lengths of the two arrays. Set and includes() have better average-case time complexities in scenarios with larger datasets.
  • Browser Support: If you need to support older browsers like Internet Explorer, avoid newer ES6 methods unless you're transpiling your code.
  • Readability: Using high-level functions like includes() and some() can make your code easier to read and maintain compared to manual loops.

Conclusion

Selecting the right approach depends on specific case needs such as performance requirements and environment limitations. In modern web development, leveraging built-in high-order functions like includes() and some() or utilizing the Set object provides efficient and concise solutions. However, understanding all available methods allows for greater flexibility and adaptability in your programming.


Course illustration
Course illustration

All Rights Reserved.