Logo
Back

How to get the difference between two arrays in JavaScript?

The “difference” between two arrays typically means the set of elements that are in one array but not the other. For example, if you have:

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 4, 6];
  • The difference arr1 - arr2 would be [1, 3] (elements in arr1 not found in arr2).
  • Conversely, arr2 - arr1 would be [6].

Below are a few ways to achieve this.

1. Using filter() and includes()

A straightforward approach is to filter one array based on whether its elements do not appear in the other array:

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 4, 6];

// Elements in arr1 but not in arr2
const diff1 = arr1.filter((item) => !arr2.includes(item));
console.log(diff1); // [1, 3]

// Elements in arr2 but not in arr1
const diff2 = arr2.filter((item) => !arr1.includes(item));
console.log(diff2); // [6]
  • Pro: Very readable, concise.
  • Con: For large arrays, includes() is O(m), so filtering the entire array is O(n*m) in the worst case.

2. Using Sets for Improved Performance

For large arrays, converting them into Sets can provide faster lookups, typically O(1) on average:

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 4, 6];

const set2 = new Set(arr2);
const diff1 = arr1.filter((item) => !set2.has(item));
console.log(diff1); // [1, 3]

const set1 = new Set(arr1);
const diff2 = arr2.filter((item) => !set1.has(item));
console.log(diff2); // [6]
  • Pro: Overall O(n + m) time complexity if you’re filtering arr1 by a set built from arr2, and vice versa.
  • Con: Requires a bit more code, though still quite straightforward.

3. Getting the Symmetric Difference

If you want the “symmetric difference,” which is all elements in either array but not in both, combine the two differences:

const arr1 = [1, 2, 3, 4];
const arr2 = [2, 4, 6];

const set1 = new Set(arr1);
const set2 = new Set(arr2);

const diff1 = arr1.filter((x) => !set2.has(x));  // arr1 - arr2
const diff2 = arr2.filter((x) => !set1.has(x));  // arr2 - arr1

const symmetricDiff = [...diff1, ...diff2];
console.log(symmetricDiff); // [1, 3, 6]

4. Using a Library (e.g., Lodash)

Lodash provides a _.difference() method if you’re allowed external libraries:

// import _ from 'lodash';
const diff = _.difference(arr1, arr2);
  • Under the hood, Lodash also uses similar strategies (often involving sets or hash-based structures) to achieve O(n + m) performance.

Edge Cases & Best Practices

  1. Duplicates:
    • If you want to preserve duplicates, the filter() approach will do so. For instance, [2, 2, 3] - [2] would still leave [2, 3]. If you only need unique differences, you can convert arrays to sets first.
  2. Data Types:
    • For objects or nested arrays, includes() or Set membership checks rely on strict equality. You’ll need a custom comparison approach if the elements are complex objects.
  3. Performance:
    • For smaller arrays, the difference is negligible—use whichever method is most readable.
    • For very large arrays, prefer the Set approach or a library-based solution optimized under the hood.

Level Up Your JavaScript Skills

To master array operations and other core JavaScript concepts, check out:

If you’re preparing for interviews (front-end, full-stack, or beyond), here are two more recommended courses from DesignGurus.io:

For extra practice and expert feedback, consider booking a Coding Mock Interview with ex-FAANG engineers. Also, explore the DesignGurus YouTube Channel for free, in-depth tutorials and interview tips.

Conclusion
To get the difference between two arrays in JavaScript, you can rely on the filter() + includes() approach for simplicity or use sets for better performance. Deciding which method is best depends on your project’s size and complexity—and whether you’re dealing with basic types or more complex objects.

CONTRIBUTOR
TechGrind