Warning: session_start(): open(/tmp/sess_09ab9fd8c8630670174b1d0ac46c0a74, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Get The Difference Between Two Arrays In JavaScript - LearnShareIT

How To Get The Difference Between Two Arrays In JavaScript

get the difference between two arrays in JavaScript

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:

ParametersDetailed description
function()RequiredA callback function to traverse each array
elementRequiredThe current element in the array.
indexOptionalThe ordinal number for each array.
arrOptionalThe array that invokes the method
thisValue
.
OptionalDefault ‘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:

Leave a Reply

Your email address will not be published. Required fields are marked *