Get the Difference between Two Arrays in TypeScript

avatar

Borislav Hadzhiev

Wed Mar 02 20222 min read

banner

Photo by Kate Williams

Get the Difference between Two Arrays in TypeScript #

To get the difference between two arrays in TypeScript:

  1. Use the filter() method to iterate over the first array.
  2. Check if each element is not contained in the second array.
  3. Repeat the steps, but this time iterate over the second array.
index.ts
const arr1 = ['a', 'b', 'c', 'd']; const arr2 = ['a', 'b']; function getDifference<T>(a: T[], b: T[]): T[] { return a.filter((element) => { return !b.includes(element); }); } // 👇️ const diff: string[] const diff = getDifference(arr1, arr2); console.log(diff); // 👉️ ['c', 'd']

The function we pass to the Array.filter method gets invoked with each element in the array.

On each iteration we check if the element is NOT contained in the other array.

The filter method returns an array containing the elements that satisfy the condition. In other words, the elements from the first array that are not contained in the second array.

We used a generic in the function declaration. Generics are like variables, but for types.

This allows us to get a better typing for the return type of the function. We are basically telling TypeScript that it takes 2 arguments of type T[] and returns a value of type T[].

However, this doesn't return the complete difference between the arrays, because we only check if the elements from the first array are not contained in the second array. We didn't check if the elements from the second array are not contained in the first array.
index.ts
const arr1 = ['a', 'b']; const arr2 = ['a', 'b', 'c', 'd']; function getDifference<T>(a: T[], b: T[]): T[] { return a.filter((element) => { return !b.includes(element); }); } // 👇️ const diff: string[] const diff = getDifference(arr1, arr2); console.log(diff); // 👉️ []

Here's the same code, however we switched the values of the arr1 and arr2 variables. Now arr2 contains 4 elements.

Since we only iterate over arr1, which only has 2 elements that are both contained in arr2, the method returns an empty array.

We would have expected a return value of ['c', 'd'] instead.

To solve this problem, we need to call the getDifference method two times and combine the results.
index.ts
const arr1 = ['a', 'b']; const arr2 = ['a', 'b', 'c', 'd']; function getDifference<T>(a: T[], b: T[]): T[] { return a.filter((element) => { return !b.includes(element); }); } // 👇️ const diff: string[] const diff = [ ...getDifference(arr1, arr2), ...getDifference(arr2, arr1) ]; // 👇️ ['c', 'd'] console.log(diff);

Here's what we did to get this working:

  1. Call the filter method on the first array and return only the elements that are not contained in the second array.
  2. Call the filter method on the second array and return only the elements that are not contained in the first array.
  3. We combined the results from the two arrays into a third array, using the spread operator (...) syntax.

An easy way to think about the spread operator (...) is that we are unpacking the values of one array into another array.

Now our example is complete and returns the difference between the two arrays.

Use the search field on my Home Page to filter through my more than 1,000 articles.