Sometimes we want to compare the difference between two arrays in JavaScript and return the remaining values in a new array.
This can be useful for inventory or purchase management where we could compare the selected items against the available stock, for example.
In this tutorial, we will cover two approaches to this:
- A single set of unique items in an array.
- A main array containing duplicate items.
Let’s get cracking!
The Video Tutorial
Get the Difference Between Two Arrays in JavaScript containing only unique items
In this section, we will cover two common approaches to returning a new array containing the remaining items of a set array.
What do I mean by ‘set’? A set contains only unique items in an array.
Let’s say we have two number arrays. We want to check if any values in array2 appear in array1. If so, then we don’t want to include them in our new array.
|
1 2 |
const array1 = [1, 2, 3, 4, 5, 6]; const array2 = [2, 4, 6]; |
Our new array should look like this:
newArray = [1, 3, 5];
First solution
|
1 2 3 |
function getArraySetDifference(main_array, del_array) { return main_array.filter((item) => !del_array.includes(item)); } |
This array takes a main_array (In our example this would be array1) and an array containing items to delete from the main array (In our example this would be array2), the del_array.
We then call a JavaScript filter method on the main array allowing us to filter down to only the items that we want returned in our new array.
The filter method takes a callback function as an argument. This method will return any item based ‘truthy’ condition.
Here we have generated an inline arrow function for this purpose, where item is our iterator represents the value of each item in the array.
What items do we want to be returned in our new array? We want anything that is not included in our del_array erhm…array.
‘Includes’ is the keyword here. JavaScript has the includes() method that allows us to check if a selected item is included within the target array. If the item is found then the method will return true otherwise it will return false.
Here we add our item iterator as the search argument.
Finally, we want to return anything that is not found from the ‘includes’ method. We do this by prefixing the method call with the bang (! – exclamation mark) ‘not’ logical operator.
This function could also be used inline and can also be used with strings.
Console this rather Baludur’s Gate 3 thirsty example:
|
1 2 3 4 5 6 7 8 9 |
const array3 = [ "Spoon", "Health Potion", "Eyeball", "Apple", "Potion of Speed", ]; const array4 = ["Eyeball", "Potion of Speed"]; console.log(getArraySetDifference(array3, array4)); |
Second Solution
|
1 2 3 |
function getArraySetDifference(main_array, del_array) { return main_array.filter((item) => del_array.indexOf(item) === -1); } |
We can solve the same problem by replacing the includes method with the JavaScript indexOf method. This method iterates through an array and returns the position index of the argument item. If the returned position is -1, then the item does not exist in the array.
In our example above, we return any item that does not exist in the array.
Go ahead and give this second solution a try.
One overlooked problem
A commonly overlooked problem with this solution occurs when there are duplicate items in the main array.
Give this a try:
|
1 2 3 4 5 6 7 8 |
// !!! PROBLEMS WITH THIS !!! const array5 = [1, 2, 2, 2, 3, 4, 4, 5, 6, 6, 6, 6]; const array6 = [2, 4, 4, 6]; console.log( getArraySetDifference(array5, array6), "Does this return a correct result? Nope!" ); |
You will have found that the result was:
[1, 3, 5]
Rather than the anticipated:
[1, 2, 2, 3, 5, 6, 6, 6]
The function removes all instances of the found values.
How do we fix this?
Get the Difference Between Two Arrays where the main array contains duplicates
Whenever we find an item from our delete array in our main array we should remove it from the arrays to search for on each iteration over the main array otherwise we will experience the problem above.
Let’s look at another two solutions to this.
Solution 1 – Rebuilding the delete array
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function getArrayDifference(main_array, del_array) { const subtrahend = [...del_array]; // Builds a new array of the del_array values so it can be be modified safely. return main_array.filter((item) => { const delIdx = subtrahend.indexOf(item); if (delIdx === -1) { //If the item is not found, return the item to create the array. return item; } else { //If the item is found, remove it from the subtrahend array so it can't be referenced again. subtrahend.splice(delIdx, 1); } }); } |
In this example, we will create a separate copy of the del_array called the subrahend using the spread syntax (Line 2). This way we won’t directly edit the del_array when we take an item from it.
Then we will carry out our ‘filter’ method again using indexOf to find if there is an index. This time around we store the result in the delIdx variable because we will use it two more times.
Next, we check if the delIdx doesn’t exist, if this is the case, we return the item to the new array. Otherwise, we use the JavaScript splice method to delete the found value from the subtrahend array so it can be indexed on the following iterations of the ‘filter’ method.
Splice takes two arguments, the start index and the number of items to remove.
Give it a try:
|
1 2 3 4 5 |
// ## TESTING ## console.log( getArrayDifference(array5, array6), "Does this return a correct result? YES!" ); |
Your result now should be:
|
1 2 3 4 |
[ 1, 2, 2, 3, 5, 6, 6, 6 ] Does this return a correct result? YES! |
Solution 2 Using the second argument of indexOf
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function getArrayDifference_v2(main_array, del_array) { let indexOf_start = 0; // Updates when a match occurs in the del_array return main_array.filter((item) => { const delIdx = del_array.indexOf(item, indexOf_start); if (delIdx === -1) { //If the item is not found, return the item to create the array. return item; } else { //If the item is found, remove it from the subtrahend array so it can't be referenced again. indexOf_start = delIdx + 1; } }); } |
In this example, instead of rebuilding the delete array each time, we make use of the ‘indexOf’ method’s section optional parameter fromIndex. This parameter allows us to add a starting position to commence our indexing search.
This means that if we do get a match in our delete array, we could add one to the index that it is found at and commence the next search in the del_array from that position.
One line 2 we now add a start position beginning at zero.
Then we include that variable as the second argument of the ‘indexOf’ method.
In our else-statement this time, when an item is found, we get the item index in the delIdx and add one before updating the indexOf_start variable for the next iteration through the main array.
The Reference Code
This section contains the 4 full functions with JSdoc comments for easy reference along with some test logs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
/** * #### CREATE AN ARRAY FROM THE DIFFERENCE BETWEEN TWO ARRAYS * @author Scott Donald <admin@yagisanatode.com> * @link https://yagisanatode.com/get-the-difference-between-two-arrays-in-javascript/ Tutorial * * Futher reading * Remove elements of an array from another array using javascript * @see {@link https://stackoverflow.com/questions/40031165/remove-elements-of-an-array-from-another-array-using-javascript} * What is the fastest or most elegant way to compute a set difference using Javascript arrays? * @see {@link https://stackoverflow.com/questions/1723168/what-is-the-fastest-or-most-elegant-way-to-compute-a-set-difference-using-javasc} */ /** * Returns an array of remaining properties (the difference) when one * array is compared with another array. <add after> Any delete item found in the * main array is remove, including duplicates. * @param {Array} main_array - Array to delete from (minuend) * @param {Array} del_array - Array of items to delete from the main array (subtrahend) * @returns {Array} of all remaining items in the main_array not found in hte del_array */ function getArraySetDifference(main_array, del_array) { return main_array.filter((item) => del_array.indexOf(item) === -1); // return main_array.filter((item) => !del_array.includes(item)); } // ## TESTING ## const array1 = [1, 2, 3, 4, 5, 6]; const array2 = [2, 4, 6]; console.log(getArraySetDifference(array1, array2)); const array3 = [ "Spoon", "Health Potion", "Eyeball", "Apple", "Potion of Speed", ]; const array4 = ["Eyeball", "Potion of Speed"]; console.log(getArraySetDifference(array3, array4)); // !!! PROBLEMS WITH THIS !!! const array5 = [1, 2, 2, 2, 3, 4, 4, 5, 6, 6, 6, 6]; const array6 = [2, 4, 4, 6]; console.log( getArraySetDifference(array5, array6), "Does this return a correct result? Nope!" ); /** * Returns an array of remaining properties (the difference) when one * array is compared with another array. * @param {Array} main_array - Array to delete from (minuend) * @param {Array} del_array - Array of items to delete from the main array (subtrahend) * @returns {Array} of all remaining items in the main_array not found in hte del_array */ function getArrayDifference(main_array, del_array) { const subtrahend = [...del_array]; // Builds a new array of the del_array values so it can be be modified safely. return main_array.filter((item) => { const delIdx = subtrahend.indexOf(item); if (delIdx === -1) { //If the item is not found, return the item to create the array. return item; } else { //If the item is found, remove it from the subtrahend array so it can't be referenced again. subtrahend.splice(delIdx, 1); } }); } // ## TESTING ## console.log( getArrayDifference(array5, array6), "Does this return a correct result? YES!" ); /** * Returns an array of remaining properties (the difference) when one * array is compared with another array. * This approach does not rebuild the array, rather it uses the, optional param of indexOf * to create a new starting point. * @param {Array} main_array - Array to delete from (minuend) * @param {Array} del_array - Array of items to delete from the main array (subtrahend) * @returns {Array} of all remaining items in the main_array not found in hte del_array */ function getArrayDifference_v2(main_array, del_array) { let indexOf_counter = 0; // Updates when a match occurs in the del_array return main_array.filter((item) => { const delIdx = del_array.indexOf(item, indexOf_counter); if (delIdx === -1) { //If the item is not found, return the item to create the array. return item; } else { //If the item is found, remove it from the subtrahend array so it can't be referenced again. indexOf_counter = delIdx + 1; } }); } // ## TESTING ## console.log( getArrayDifference_v2(array5, array6), "Does this return a correct result? YES!" ); |
References used:
- Remove elements of an array from another array using javascript
- How to subtract one array from another, element-wise, in javascript
- What is the fastest or most elegant way to compute a set difference using Javascript arrays?
For the Google Apps Script Developer
This is a particularly handy set of functions that you can use to compare two ranges in a spreadsheet and return a separate array. You could use the JavaScript flat method here to flatten the 2d array before comparison.
~Yagi