Intersection of Two Arrays in JavaScript

When exploring the intersection of two arrays in JavaScript, you’re delving into a fundamental skill in the world of programming. It’s all about finding common elements between two lists, and it’s a task you’ll often encounter when managing data. Whether you’re just starting out or polishing your coding chops, mastering this concept will make your coding life much easier. Ready to unravel the mystery and learn how to apply it in real coding scenarios? Keep reading; we’ve got you covered!

What is the Intersection of Two Arrays?

The intersection of two arrays refers to the set of elements that are common to both arrays. It only includes values that appear in both arrays, and typically does not contain duplicates unless specified. In JavaScript and general programming, the intersection of two arrays is a new array that includes all the elements that exist in both input arrays.

Simple Example:

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const intersection = array1.filter(value => array2.includes(value));

console.log(intersection); // Output: [3, 4]

In this example, the values 3 and 4 are present in both array1 and array2, so they form the intersection.

Difference Between Intersection, Union, and Difference:

Operation	Definition	Example Result (array1 = [1,2,3], array2 = [2,3,4])
Intersection	Elements common to both arrays	[2, 3]
Union	All unique elements from both arrays	[1, 2, 3, 4]
Difference	Elements that are in one array but not in the other	From array1: [1], From array2: [4]

Method 1: Using filter() and includes()

Code Example:

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const intersection = array1.filter(item => array2.includes(item));

console.log(intersection); // Output: [3, 4]

Explanation:

• The filter() method creates a new array containing elements from array1 that return true in the callback.
• The callback uses includes() to check if each element in array1 is also present in array2.
• Only the common elements (3 and 4) pass the check and get added to the new array.

Time Complexity:

• filter() iterates over each element of array1 → O(n)
• includes() checks presence in array2 for each element → O(m) per check
• Total time complexity: O(n × m)
  (where n and m are the lengths of array1 and array2)

Method 2: Using Set for Efficient Lookup

This method is more efficient for large arrays, as it reduces lookup time using Set, which has average O(1) lookup complexity.

Code Example:

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const set2 = new Set(array2);
const intersection = array1.filter(item => set2.has(item));

console.log(intersection); // Output: [3, 4]

Explanation:

• Convert array2 to a Set named set2 for faster lookup.
• Loop through array1 using filter(), and for each item, check if it exists in set2 using has().
• This avoids repeatedly scanning array2 with includes().

When and Why to Use This Method:

• Use this method when performance matters, especially with large arrays.
• Suitable for comparing datasets, user lists, or large collections.
• Improves lookup speed from O(m) to O(1) per element.

Time Complexity:

• Creating Set: O(m)
• Filtering with has(): O(n)
• Total time complexity: O(n + m) — significantly better than method 1 for large arrays.

Understanding these set operations is essential for tasks like filtering user data, merging datasets, or comparing lists in web applications.

Method 3: Using Map or Frequency Count

This method is helpful when you want to handle duplicates (preserve how many times an element appears in both arrays) or when dealing with very large arrays where efficient counting matters.

Code Example:

const array1 = [1, 2, 2, 3, 4];
const array2 = [2, 2, 3, 5];

const map = new Map();

// Count frequency of elements in array1
for (const num of array1) {
  map.set(num, (map.get(num) || 0) + 1);
}

const intersection = [];

for (const num of array2) {
  if (map.get(num) > 0) {
    intersection.push(num);
    map.set(num, map.get(num) - 1); // Decrease count after using
  }
}

console.log(intersection); // Output: [2, 2, 3]

Explanation:

• A Map is used to track how many times each element occurs in array1.
• Then we iterate through array2 and only add an element to the intersection if it still has a count left in the map.
• After adding, we decrement the count to avoid overcounting duplicates.

Benefits:

• Preserves duplicates accurately (unlike Set-based approaches).
• Good for cases like multi-select filters, inventory matching, or dataset reconciliation.
• Works well with both strings and numbers.

Time Complexity:

• Build map from array1: O(n)
• Loop through array2: O(m)
• Total: O(n + m)

Bonus: Intersection Without Duplicates

By default, intersections may include duplicates if both arrays contain repeated values. To remove duplicates, use a Set at the final step.

Code Example (Using Set to Remove Duplicates):

const array1 = ["apple", "banana", "orange", "banana"];
const array2 = ["banana", "kiwi", "orange", "banana"];

const set2 = new Set(array2);
const rawIntersection = array1.filter(item => set2.has(item));
const uniqueIntersection = [...new Set(rawIntersection)];

console.log(uniqueIntersection); // Output: ["banana", "orange"]

Explanation:

• First, filter() collects common values.
• Then new Set() removes duplicates from the result.
• This ensures the final intersection contains only unique elements, regardless of how many times they appear in either array.

Works for:

• Strings, numbers, booleans, or any primitive values.
• Ideal for tag filters, keyword matching, or summary reports.

With our cutting-edge AI-powered js online compiler, users can instantly write, run, and test their code. It’s an effortless way to streamline your coding process. Whether you’re debugging or experimenting, the AI’s supportive guidance ensures a smooth coding journey. Try it today and elevate your coding experience!

Real-World Use Cases

Understanding how to find the intersection of two arrays is highly practical in real-world applications, especially when working with data filtering and matching.

1. Tag Filters in E-commerce or Blogs

• A user selects multiple tags or categories (e.g., “Red”, “T-Shirts”).
• You match those tags with items that have those tags using intersection.
• Example: userSelectedTags ∩ productTags

2. Database Query Results

• Compare two datasets from different tables or APIs.
• Example: Users who signed up in July ∩ Users who purchased in August.

3. Access Control Systems

• Determine common permissions between user roles and resource access requirements.
• Example: userPermissions ∩ requiredPermissions

4. Event Matching

• Finding users who attended multiple events.
• Example: event1Attendees ∩ event2Attendees

5. School or Learning Platforms

• Intersect lists of students enrolled in different courses to see overlap.
• Example: Students in Math ∩ Students in Science

Common Mistakes to Avoid

When performing array intersections in JavaScript, here are frequent pitfalls you should avoid:

1. Forgetting to Handle Type Coercion

[1, 2, "3"].includes(3); // false

• JavaScript is strict when comparing data types. A string "3" is not the same as the number 3.
• Fix: Always normalize data types before comparison.

2. Modifying Original Arrays

• Avoid using destructive operations like splice() or overwriting arrays during intersection logic.
• Best practice: Always work with copies when transformation is involved.

3. Not Accounting for Duplicates

• Some methods (like Set) remove duplicates by default.
• Use frequency count or logic from Method 3 if duplicates matter.

4. Inefficient Lookups in Large Arrays

• Using includes() for each element in a large array can cause performance bottlenecks.
• Switch to Set or Map for better efficiency.

5. Not Validating Input Arrays

• Always check if inputs are arrays and handle edge cases like null, undefined, or empty arrays gracefully.

Performance Comparison of Methods

Method	Best For	Time Complexity	Handles Duplicates	Notes
filter() + includes()	Small arrays, quick scripts	O(n × m)	No	Simple, readable, but slow for large data
Set Lookup	Large arrays, performance-critical apps	O(n + m)	No	Fast and memory-efficient
Map / Frequency Count	Preserving duplicates, data reconciliation	O(n + m)	Yes	Most flexible, especially for numeric data

Use-Case-Based Recommendations:

• For basic filtering – Use filter() + includes()
• For performance and large arrays – Use Set
• When duplicates matter – Use Map or frequency counters
• When you need unique results – Add Set after filtering

Conclusion

Tackling the ‘Intersection of two arrays in JavaScript’ is a rewarding journey, boosting your coding prowess and confidence. You’ll gain practical skills applicable to real-world challenges. Dive into it and experience the thrill of solving complex problems. For more on programming languages, explore Newtum today.

Edited and Compiled by

This article was compiled and edited by @rasikadeshpande, who has over 4 years of experience in writing. She’s passionate about helping beginners understand technical topics in a more interactive way.

About The Author