How to find common elements in two arrays JavaScript

In JavaScript programming, working with arrays is a typical task for web developers.

There are times when you need to find the simple elements between two arrays, which can be challenging work.

In this article, we will explore different methods to manage this in JavaScript.

Whether you are a novice or an expert developer, this guide will provide you with valuable understanding of finding common elements in two arrays using JavaScript.

Understanding the Problem

Before we move on into the different methods of finding common elements in two arrays, let’s know the problem at hand.

Suppose we have two arrays, sampleArray1 and sampleArray2, and we need to figure out the elements that exist in both arrays.

The goal is to build a new array that consists of these common elements.

const sampleArray1 = [1, 2, 3, 4, 5];
const sampleArray2 = [4, 5, 6, 7, 8];

In this example, the common elements between sampleArray1 and sampleArray2 are [4, 5].

We will provide you the multiple methods to obtain this result.

Methods for Finding Common Elements in Two Arrays JavaScript

Here are the following methods that will find common elements in two arrays JavaScript.

Method 1: Using Nested Loops

One of the common methods to find common elements in two arrays is by using nested loops.

We can compare each element of sampleArray1 with every element of sampleArray2 and check if they are the same.

Here’s an example code:

function findCommonElementsArrayExample(sampleArray1, sampleArray2) {
  const commonSampleElements = [];

  for (let x = 0; x < sampleArray1.length; x++) {
    for (let y = 0; y < sampleArray2.length; y++) {
      if (sampleArray1[x] === sampleArray2[y]) {
        commonSampleElements.push(sampleArray1[x]);
        break;
      }
    }
  }

  return commonSampleElements;
}

const sampleArray1 = [1, 2, 3, 4, 5];
const sampleArray2 = [4, 5, 6, 7, 8];

const commonSampleElements = findCommonElementsArrayExample(sampleArray1, sampleArray2);
console.log(commonSampleElements);

Output:

[4, 5]

In this example, we iterate over each element of sampleArray1 and compare it with each element of sampleArray2.

If a match is created, we add the element to the commonSampleElements array.

Method 2: Using the filter()

JavaScript arrays have an in-built method called filter(), which can allow us to make a new array based on a condition.

We can employ this method to filter out the common elements between two arrays.

For example:

const sampleArray1 = [10, 20, 30, 40, 50];
const sampleArray2 = [40, 50, 60, 70, 80];

const commonSampleElements = sampleArray1.filter((element) => sampleArray2.includes(element));
console.log(commonSampleElements);

Output:

[40, 50]

In this example code, we use the filter() method on sampleArray1 and provide a callback function.

The callback function checks if each element of sampleArray1 is present in sampleArray2 using the includes() method.

If the condition is true, the element is added to the commonSampleElements array.

Method 3: Using the includes()

The includes() method is a proper way to check if an element exists in an array.

We can loop through one array and we will use the includes() method to find the common elements.

Let’s take a look at the example code:

function findCommonElementsArrayExample(sampleArray1, sampleArray2) {
  const commonSampleElements = [];

  for (let x = 0; x < sampleArray1.length; x++) {
    if (sampleArray2.includes(sampleArray1[x])) {
      commonSampleElements.push(sampleArray1[x]);
    }
  }

  return commonSampleElements;
}

const sampleArray1 = [11, 12, 13, 14, 15];
const sampleArray2 = [14, 15, 16, 17, 18];

const commonSampleElements = findCommonElementsArrayExample(sampleArray1, sampleArray2);
console.log(commonSampleElements)

Output:

[14, 15]

In this example code, we iterate over each element of sampleArray1 and use the includes() method to check if the element is current in sampleArray2. If it is, we add it to the commonSampleElements array.

Method 4: Using the Set Object

The Set object in JavaScript is a collection of different elements. We can use this object to find the common elements between two arrays.

For example:

function findCommonElementsArrayExample(sampleArray1, sampleArray2) {
  const exampleset1 = new Set(sampleArray1);
  const commonSampleElements = [];

  for (const element of sampleArray2) {
    if (exampleset1.has(element)) {
      commonSampleElements.push(element);
    }
  }

  return commonSampleElements;
}

const sampleArray1 = [21, 22, 23, 24, 25];
const sampleArray2 = [24, 25, 26, 27, 28];

const commonSampleElements = findCommonElementsArrayExample(sampleArray1, sampleArray2);
console.log(commonSampleElements);

Output:

[24, 25]

In this example code, first, we create a Set object exampleset1 from sampleArray1.

Then, we iterate over sampleArray2 and check if each element is present in exampleset1 using the has() method.

If it is, we add it to the commonSampleElements array.

Method 5: Using the reduce()

The reduce() method in JavaScript can be used to transform an array into another value.

We can employ this method to find the common elements between two arrays.

Here’s an example code that uses reduce() method:

function findCommonElementsArrayExample(sampleArray1, sampleArray2) {
  const commonSampleElements = sampleArray1.reduce((result, element) => {
    if (sampleArray2.includes(element)) {
      result.push(element);
    }
    return result;
  }, []);

  return commonSampleElements;
}

const sampleArray1 = [1, 2, 3, 4, 5];
const sampleArray2 = [4, 5, 6, 7, 8];

const commonSampleElements = findCommonElementsArrayExample(sampleArray1, sampleArray2);
console.log(commonSampleElements);

In this example code, we use the reduce() method on sampleArray1.

The callback function checks if each element of sampleArray1 is present in sampleArray2 using the includes() method.

If the condition is true, the element is added to the result array.

Finally, we return the result array that consists of the common elements.

Method 6: Using the for…of Loop

The for…of loop provides a succinct way to iterate over elements of an array.

We can use this loop to find the common elements between two arrays.

Here’s an example code that uses the for…of loop:

function findCommonElementsArrayExample(sampleArray1, sampleArray2) {
  const commonSampleElements = [];

  for (const element1 of sampleArray1) {
    for (const element2 of sampleArray2) {
      if (element1 === element2) {
        commonSampleElements.push(element1);
        break;
      }
    }
  }

  return commonSampleElements;
}

const sampleArray1 = [1, 2, 3, 4, 5];
const sampleArray2 = [4, 5, 6, 7, 8];

const commonSampleElements = findCommonElementsArrayExample(sampleArray1, sampleArray2);
console.log(commonSampleElements);

In this example code, we use the for…of loop to iterate over each element of sampleArray1 and sampleArray2.

Then, we compare each element of sampleArray1 with every element of sampleArray2 and check if they are the same.

Method 7: Using the forEach()

The forEach() method allows us to perform a provided function once for each element in an array.

We can apply this method to find the common elements between two arrays.

function findCommonElementsArrayExample(sampleArray1, sampleArray2) {
  const commonSampleElements = [];

  sampleArray1.forEach((element1) => {
    sampleArray2.forEach((element2) => {
      if (element1 === element2) {
        commonSampleElements.push(element1);
      }
    });
  });

  return commonSampleElements;
}

const sampleArray1 = [11, 12, 13, 14, 15];
const sampleArray2 = [14, 15, 16, 17, 18];

const commonSampleElements = findCommonElementsArrayExample(sampleArray1, sampleArray2);
console.log(commonSampleElements);

In this example code, we use the forEach() method on sampleArray1 and sampleArray2.

The nested forEach() loop will compare each element of sampleArray1 with every element of sampleArray2 and check if they are the same.

Method 8: Using the some()

The some() method tests whether at least one element in the array fascinate the provided condition.

We can apply this method to find the common elements between two arrays.

function findCommonElementsArrayExample(sampleArray1, sampleArray2) {
  const commonSampleElements = [];

  sampleArray1.forEach((element1) => {
    if (sampleArray2.some((element2) => element1 === element2)) {
      commonSampleElements.push(element1);
    }
  });

  return commonSampleElements;
}

const sampleArray1 = [11, 12, 13, 14, 15];
const sampleArray2 = [14, 15, 16, 17, 18];

const commonSampleElements = findCommonElementsArrayExample(sampleArray1, sampleArray2);
console.log(commonSampleElements);

In this example code, we use the forEach() method on sampleArray1 to iterate over its elements.

For each element, we use the some() method on sampleArray2 to check if there is at least one element that matches the condition (element1 === element2).

Method 9: Using the every() Method

The every() method tests whether all elements in the array gratify the provided condition.

Here’s an example code that uses every() method:

function findCommonElementsArrayExample(sampleArray1, sampleArray2) {
  const commonSampleElements = [];

  sampleArray1.forEach((element1) => {
    if (sampleArray2.some((element2) => element1 === element2)) {
      commonSampleElements.push(element1);
    }
  });

  return commonSampleElements;
}

const sampleArray1 = [11, 12, 13, 14, 15];
const sampleArray2 = [14, 15, 16, 17, 18];

const commonSampleElements = findCommonElementsArrayExample(sampleArray1, sampleArray2);
console.log(commonSampleElements);

In this example code, the sampleArray2.some() method is used instead of sampleArray2.every().

This will return true if at least one element in sampleArray2 matches the current element from sampleArray1.

Method 10: Using the filter() and includes()

We can merge the filter() method and the includes() method to find the common elements between two arrays.

This is an example that uses the filter() and includes() method.

const sampleArray1 = [11, 12, 13, 14, 15];
const sampleArray2 = [14, 15, 16, 17, 18];

const commonSampleElements = sampleArray1.filter((element) => sampleArray2.includes(element));
console.log(commonSampleElements);

In this example code, we use the filter() method on sampleArray1 and provide a callback function.

The callback function checks if each element of sampleArray1 is present in sampleArray2 using the includes() method.

If the condition is true, the element is added to the commonSampleElements array.

Method 11: Using the filter() and some() Method

We can combine the filter() method and the some() method to find the common elements between two arrays.

Here’s an example code:

const sampleArray1 = [11, 12, 13, 14, 15];
const sampleArray2 = [14, 15, 16, 17, 18];

const commonSampleElements = sampleArray1.filter((element) => sampleArray2.some((item) => element === item));
console.log(commonSampleElements);

In this example code, we use the filter() method on sampleArray1 and provide a callback function.

The callback function checks if each element of sampleArray1 has at least one match in sampleArray2 using the some() method.

FAQs

Conclusion

In conclusion, finding the common elements between two arrays in JavaScript is a frequent task in many applications.

In this article, we have discussed multiple methods to achieve this work, including using loops, array methods like filter() and reduce(), and data structures like Set.

Each method offers various advantages and can be selected based on the specific requirements of your application.

Additional Resources

Here are some additional resources for more learning about JavaScript:

• How to change first letter capital in JavaScript?
• How to Remove an Item from Cart in JavaScript
• How to Use Dompurify in JavaScript