Skip to main content

How to Get the Difference Between Two Arrays in JavaScript

Finding the "difference" between two arrays is a common data manipulation task, but the term can mean two different things:

  1. Asymmetric Difference: The elements that are in arrayA but not in arrayB.
  2. Symmetric Difference: The elements that are in either arrayA or arrayB, but not in both.

This guide will teach you the modern and efficient methods for calculating both types of differences using a combination of the filter() method and the Set object.

Goal 1: Getting the Asymmetric Difference​

The asymmetric difference answers the question: "What elements does Array A have that Array B does not?"

Problem: we need to find the elements that exist in arr1 but are missing from arr2.

// Problem: Find elements in arr1 that are not in arr2.
const arr1 = ['a', 'b', 'c', 'd'];
const arr2 = ['a', 'b'];

// Expected result: ['c', 'd']

The most efficient and readable way to solve this is to first convert the second array into a Set for fast lookups, and then filter the first array.

function getDifference(arrayA, arrayB) {
  const setB = new Set(arrayB);
  return arrayA.filter(element => !setB.has(element));
}

// Example Usage:
const arr1 = ['a', 'b', 'c', 'd'];
const arr2 = ['a', 'b'];

const difference = getDifference(arr1, arr2);
console.log(difference); // Output: ['c', 'd']

Goal 2: Getting the Symmetric Difference​

The symmetric difference answers the question: "What elements are unique to each array?"

For example, we need to find all elements that appear in arr1 or arr2, but not in both.

// Problem: Find elements that are in one array but not the other.
const arr1 = ['a', 'b', 'c', 'd'];
const arr2 = ['a', 'b', 'e', 'f'];

// Expected result: ['c', 'd', 'e', 'f']

The recommended solution is by performing the asymmetric difference in both directions and then combining the results.

function getSymmetricDifference(arrayA, arrayB) {
  const setA = new Set(arrayA);
  const setB = new Set(arrayB);
  
  const diffA = arrayA.filter(element => !setB.has(element));
  const diffB = arrayB.filter(element => !setA.has(element));
  
  return [...diffA, ...diffB];
}

// Example Usage:
const arr1 = ['a', 'b', 'c', 'd'];
const arr2 = ['a', 'b', 'e', 'f'];

const symmetricDifference = getSymmetricDifference(arr1, arr2);
console.log(symmetricDifference); 
// Output: ['c', 'd', 'e', 'f']
note

This approach is clear, efficient, and correctly handles the logic.

A Note on Performance: Why Set is Better​

You will often see solutions that use array.includes() inside the filter method: arrayA.filter(element => !arrayB.includes(element))

While this code is very readable, it can be very slow for large arrays. For every single element in arrayA, the includes() method has to search through the entire arrayB. This is an O(n*m) operation.

By converting the second array to a Set first, the lookup (setB.has(element)) becomes an O(1) operation on average. This makes the entire filtering process much more performant (closer to O(n)). For this reason, the Set-based approach is the recommended best practice for any professional application.

Conclusion​

Finding the difference between two arrays is a straightforward task if you first clarify which type of difference you need.

  • For the asymmetric difference (elements in A but not in B), the best practice is to filter array A against a Set of array B.
  • For the symmetric difference (elements in either A or B, but not both), perform the asymmetric difference in both directions and combine the results.

By leveraging the performance of Set for lookups, you can write clean, efficient, and highly readable code for these common data manipulation tasks.

Table of Contents