Though JavaScript doesn’t have a built-in function to sort the differences out, the available ones will definitely give you a fast approach to how to get the difference between two arrays in JavaScript.
Solutions to get the difference between two arrays in JavaScript
Method 1: Array.prototype.filter()
This prototyping method creates a replica array with elements that pass the testing function.
Syntax:
array.filter(function(element, index, arr), thisValue)
Parameters:
| Parameters | Detailed description | |
|---|---|---|
| function() | Required | A callback function to traverse each array |
| element | Required | The current element in the array. |
| index | Optional | The ordinal number for each array. |
| arr | Optional | The array that invokes the method |
| thisValue . | Optional | Default ‘undefined’ A value is passed to the function as its ‘this’ value |
The new array will directly reference the source, the original array itself, or the former data that your array referencing. This replica is called a shallow copy.
We will get the difference between our two arrays as follows:
// Initialize two arrays to compare
let example_array1 = [ 1 , 2 , 3 , 4 , 5 , 6 ];
let example_array2 = [ 1 , 2 , 3 , 4 ];
// Filter and assign value to variable difference
let difference = function (FirstArray,SecondArray) {
return FirstArray.filter(element => ! SecondArray.includes(element))
}
console.log(difference (example_array1,example_array2));Code Explanation
Array.prototype.includes examines if an entry exists in the array. This method will return either true or false.
Array.prototype.filter will construct an array including elements that the testing function returns true.
In this code, the elements that appear in both arrays are marked false, and the filter skips them.
Output
[ 5, 6 ]We can also add our defined function to the prototype.
array.prototype.getDiff = function (SecondArray) {
return this.filter(element => !SecondArray.includes(element))
}However, this approach only gives us the difference that the First Array has compared to Second Array.
let example_array1 = [ 1 , 2 , 3 , 4 ];
let example_array2 = [ 3 , 4 , 5 , 6 ];In this case, Difference(example_array1,example_array2) will also return [5, 6]
To construct a symmetrical comparison, our program will be as such:
// Initialize two arrays to compare
let example_array1 = [ 1 , 2 , 3 , 4 ];
let example_array2 = [ 3 , 4 , 5 , 6 ];
// Filter and assign value to variable difference
let difference = function (FirstArray,SecondArray) {
return FirstArray.filter(element => ! SecondArray.includes(element))
.concat(SecondArray.filter(element => ! FirstArray.includes(element)));
}
console.log(difference(example_array1,example_array2 ));Output
[1, 2, 5, 6]Method 2: Looping
This method is quite outdated and doesn’t require learning a new syntax to handle arrays.
let getDiff = function (FirstArray, SecondArray) {
let arr = [], diff = [];
// Assign true value to FirstArray
for (let i = 0; i < FirstArray.length; i++) {
arr[FirstArray[i]] = true;
}
// If they are different, assign them, if they are the same, delete them
for (let i = 0; i < SecondArray.length; i++) {
if (arr[SecondArray[i]]) {
delete arr[SecondArray[i]];
} else {
arr[SecondArray[i]] = true;
}
}
for (let k in arr) {
diff.push(k);
}
return diff;
};
// Test run with two arrays
let arr1 = [1, 2, 3, 4];
let arr2 = [3, 4, 5, 6];
console.log(getDiff(arr1, arr2));Output
[ '1', '2', '5', '6' ]Instead of using includes() methods which came out around 2016, we iterate SecondArray and check if every element is present in First Array. If yes, delete the element.
This code is valid if two arrays are symmetrical, similar to our array examples.
Method 3: Set-based
A set is unordered, and each element can only appear once in a set. While an array can contain duplicate elements, each value contained in a set is unique. In this approach of how to get the difference between two arrays in JavaScript, we will use the spread operator and set object.
// Initialize two arrays to compare
let arr1 = [ 1 , 2 , 3 , 4 ];
let arr2 = [ 3 , 4 , 5 , 6 ];
function arrayDiff(...arrays) {
return [].concat(...arrays.map( (arr, index) => {
// Cut and assign to variable others
const others = arrays.slice(0);
others.splice(index, 1);
const unique = [...new Set([].concat(...others))];
return arr.filter(element => unique.indexOf(element) === -1);
}));
}
// Show results
console.log(arrayDiff(arr1,arr2));Output
[ 5, 6 ]Code Explanation
- Spread operator for merging our input arrays into an array containing member arrays as we will check each member array at indices.
- We clone the ‘arrays’ and name it ‘others’.
- After splice(), the member array at ‘index’ is removed from ‘others’.
- We create a new array ‘unique’ that stores the elements from the Set created from the values in ‘others’.
- Then we compare ‘arrays’ and ‘unique’. Only elements that don’t exist in ‘unique’ is returned.
- Finally, we return a new array created by map() from the elements returned.
Summary
Finally, we have covered our approaches to get the difference between two arrays in JavaScript, the supported versions for modern browsers and the older ones. If possible, the first approach will be more direct and easier to review and maintain.
Maybe you are interested:
- How to convert a Set to an Array in JavaScript
- Convert a String to Array of Numbers in JavaScript
- Filter an Array with Multiple Conditions in JavaScript
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css
