Find Common Items in Two Arrays in JavaScript
In JavaScript, finding common elements between two arrays—also known as array intersection—is a task that comes up frequently. Whether you're checking for overlapping tags, shared interests, or items in both carts, being able to extract the intersection of arrays is a must-have skill.
For example, given ["apple", "banana", "cherry"]
and ["banana", "cherry", "date"]
, the common items are ["banana", "cherry"]
. This tutorial walks you through several beginner-friendly ways to find those shared values using modern JavaScript techniques.
Method 1: Using filter()
and includes()
The most readable and beginner-friendly method is combining filter()
with includes()
. It checks if each item in the first array is also present in the second.
const arr1 = ["apple", "banana", "cherry"];
const arr2 = ["banana", "cherry", "date"];
const commonItems = arr1.filter(item => arr2.includes(item));
console.log(commonItems);
["banana", "cherry"]
Method 2: Using Set
for Better Performance
For larger arrays, a Set
improves performance. Set.has()
provides faster lookups compared to includes()
, especially as the array size grows.
const arr1 = ["apple", "banana", "cherry"];
const arr2 = ["banana", "cherry", "date"];
const set2 = new Set(arr2);
const commonItems = arr1.filter(item => set2.has(item));
console.log(commonItems);
["banana", "cherry"]
Method 3: Using for
Loop and Set
If you prefer explicit control or need to handle additional logic (like case-insensitive comparison), a for
loop gives you more flexibility. Here, we use a Set
to store results without duplicates.
const arr1 = ["apple", "banana", "cherry"];
const arr2 = ["banana", "cherry", "banana", "date"];
const commonSet = new Set();
for (let item of arr1) {
if (arr2.includes(item)) {
commonSet.add(item);
}
}
const result = [...commonSet];
console.log(result);
["banana", "cherry"]
Method 4: Creating a Reusable Function
To keep your code clean and DRY (Don’t Repeat Yourself), you can create a helper function that finds the intersection between any two arrays. This is ideal for use in larger applications.
function getCommonItems(a, b) {
const setB = new Set(b);
return a.filter(item => setB.has(item));
}
const fruits1 = ["apple", "banana", "cherry"];
const fruits2 = ["banana", "cherry", "date"];
console.log(getCommonItems(fruits1, fruits2));
["banana", "cherry"]
Which Method Should You Use?
- Use
filter() + includes()
for clear, easy-to-read logic on small arrays. - Use
Set
if performance matters and arrays are large or you’re doing multiple comparisons. - Use
for
loops when you need custom rules or case-insensitive logic. - Use a function to keep code clean and maintainable in your project.
Final Thoughts
Finding common values between two arrays is more than just a coding task—it's about discovering overlap, identifying shared data, and enabling smart interactions in your app. Whether you're building a recommendation system, validating data, or comparing selections, this knowledge forms a foundation for meaningful logic.
Choose the method that matches your goals. Start with readability. Then optimize for performance and reusability as your project grows. With these tools in hand, your JavaScript will be leaner, faster, and smarter.
Comments
Loading comments...