How to Find Common Items in Two Arrays in JavaScript

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

💬 Please keep your comment relevant and respectful. Avoid spamming, offensive language, or posting promotional/backlink content.
All comments are subject to moderation before being published.


Loading comments...