How to get the difference between two arrays in JavaScript?

C

84

1351

Is there a way to return the difference between two arrays in JavaScript?

For example:

var a1 = ['a', 'b'];
var a2 = ['a', 'b', 'c', 'd'];

// need ["c", "d"]

Cosgrave answered 27/7, 2009 at 10:38 Comment(6)

Symmetric or non-symmetric? – Karlkarla 30/1, 2014 at 18:20

With new ES6 function this can be done as a simple one liner (it will take a lot of time to be able to use in all major browsers). In any case check my answer – Ymir 17/1, 2015 at 7:16

an important aspect of the solution is performance. the asymptotic time complexity of this type of operation - in other languages - is O(a1.length x log(a2.length)) - is this performance possible in JavaScript? – Since 10/6, 2017 at 17:14

Check my library, it can help you with this, @netilon/differify is one of the fastest diff libraries for object/array comparison: npmjs.com/package/@netilon/differify – Multipara 9/7, 2020 at 18:51

1. Convert a1 into a set. o(a1). 2. Iterate over e2 to see what it has that e1 does not. o(e2). 3. Push the diff into another array then return it after step 2 is finished. – Renfrew 8/1, 2022 at 2:36

you can use fitler, check my answer https://mcmap.net/q/45353/-how-to-get-the-difference-between-two-arrays-in-javascript – Nazi 4/11, 2022 at 13:9

H

382

This answer was written in 2009, so it is a bit outdated, also it's rather educational for understanding the problem. Best solution I'd use today would be

let difference = arr1.filter(x => !arr2.includes(x));

(credits to other author here)

I assume you are comparing a normal array. If not, you need to change the for loop to a for .. in loop.

function arr_diff (a1, a2) {

    var a = [], diff = [];

    for (var i = 0; i < a1.length; i++) {
        a[a1[i]] = true;
    }

    for (var i = 0; i < a2.length; i++) {
        if (a[a2[i]]) {
            delete a[a2[i]];
        } else {
            a[a2[i]] = true;
        }
    }

    for (var k in a) {
        diff.push(k);
    }

    return diff;
}

console.log(arr_diff(['a', 'b'], ['a', 'b', 'c', 'd']));
console.log(arr_diff("abcd", "abcde"));
console.log(arr_diff("zxc", "zxc"));

Hysteresis answered 27/7, 2009 at 11:20 Comment(17)

This may work but it does three loops to accomplish what can be done in one line of code using the filter method of Array. – Siemens 26/10, 2010 at 18:37

Just to be clear, this implements the symmetric difference of a1 and a2, unlike the other answers posted here. – Feeding 13/12, 2013 at 1:19

This is still relevant if you have to support IE8, which does not have filter – Inherence 4/6, 2014 at 8:30

Downvote as well. If we promote bad practice and ancient browser support, then where are we heading? Hey, let's go back to a waterfall project management, it's not wrong, is it? – Domineering 10/10, 2014 at 7:16

This isn't the best answer, but I'm giving it a charity upvote, to help make up for the unfair downvotes. Only wrong answers ought to be downvoted, and if I was working on a project with cruft-browsers in scope (tough times happen), this answer might even be helpful. – Fda 14/1, 2015 at 3:34

May I know what will happen when var a1 = ['a', 'b']; and var a2 = ['a', 'b', 'c', 'd', 'b'];, it will return wrong answer, i.e. ['c', 'd', 'b'] instead of ['c', 'd']. – Cyprinid 11/10, 2015 at 23:38

I ran this into an online compiler. This converts numbers in arrays to strings when it returns them. – Dewdrop 29/11, 2015 at 5:57

This part: 'for (var k in a) {' converts objects in your array to strings or numbers, so I am downvoting. I don't think this answer deserves 51 votes. Sorry. – Circumcise 30/11, 2015 at 11:9

The fastest way is the most obviously naive solution. I tested all of the proposed solutions for symmetric diff in this thread, and the winner is:

function diff2(a, b) {     var i,         la = a.length,         lb = b.length,         res = [];      if (!la) return b;     else if (!lb) return a;      for (i = 0; i < la; i++) {         if (b.indexOf(a[i]) === -1) res.push(a[i]);     }     for (i = 0; i < lb; i++) {         if (a.indexOf(b[i]) === -1) res.push(b[i]);     }     return res; }

– Limpet 27/2, 2016 at 13:23

User @JoLiss had an almost identical solution, by the way. – Limpet 27/2, 2016 at 13:33

Solution in post not works when we have null values in array ex a=[22,33,null,null], b=[22,33] result r should be r=[null,null]. @Nomaed solution in his above comment works. – Unseasonable 30/12, 2016 at 23:7

This is not normal difference but symmetric difference - or UNION MINUS INTERSECTION. To make it a regular difference, remove the lines: } else { a[a2[i]] = true; in the mid for-loop. – Phototelegraphy 8/3, 2017 at 21:42

@JoshavenPotter - yes its true but filter is extremely slow when you are dealing with large arrays. Try arrays with 10000 or 100000 items in it. Filter performance is really bad in that kind of scenario which is sad. – Garman 6/1, 2019 at 10:27

Yeah man, this is the year 2020. You should update the answer with the modern approach: filter and includes. – Tank 3/4, 2020 at 22:14

pHp has this in the standard library :-) – Carlton 7/7, 2020 at 13:54

Well there are some errorneous claims about the algorithm speed. Check out my answer comparing all three methods with jsPerf. – Outage 12/7, 2020 at 12:0

the function arr_diff loop is the best performance. Comparing 2 arrays 180k each of very long filenames found 200 differences, took this function instantly, compared to the 1 liner filter method took 1min. – Miry 10/7, 2023 at 12:3

G

2932

Array.prototype.includes() (ES2016/ ES7) comes in handy here.

Intersection

let intersection = arr1.filter(x => arr2.includes(x));

Yields values which are present in both arr1 and arr2.

[1,2,3] and [2,3] will yield [2,3]
[1,2,3] and [2,3,5] will also yield [2,3]

Difference

(Values in just A.)

let difference = arr1.filter(x => !arr2.includes(x));

Yields values that are present in just arr1.

[1,2,3] and [2,3] will yield [1]
[1,2,3] and [2,3,5] will also yield [1]

Symmetric Difference

let symDifference = arr1.filter(x => !arr2.includes(x))
                        .concat(arr2.filter(x => !arr1.includes(x)));

Yields values that are only in arr1 or arr2, but not both ("exclusive or").

This is what you get if you take the difference of both arrays with each other, and combine the two results (You get an array containing all the elements of arr1 that are not in arr2 and vice-versa).

[1,2,3] and [2,3] will yield [1]
[1,2,3] and [2,3,5] will yield [1,5]

As @Joshaven Potter pointed out on his answer, you can assign this directly to Array.prototype so it can be used directly on arrays like this:

Array.prototype.diff = function(arr2) { 
  return this.filter(x => !arr2.includes(x)); 
}

[1, 2, 3].diff([2, 3]) // [1]

Gorlin answered 9/10, 2015 at 9:33 Comment(19)

Computing the Array difference is a so called set operation, because property lookup is the very own job of Sets, which are orders of magnitude faster then indexOf/includes. Simply put, your solution is very inefficient and rather slow. – Churchwell 18/10, 2016 at 19:35

@ftor but with Set, values have to be unique, no? – Freesia 23/10, 2016 at 14:20

@Freesia Actually, ftor is right. Difference is a concept that doesn't really make sense in arrays. My solution will remove from array A all the occurrences of the elements appearing only once in array B. On the other hand, for most use cases, like the one presented by the OP, it is a good approach. Considering that the code will most likely be run by a browser, efficiency is not a problem because big arrays would not have been sent to the front-end in the first place. If the repetition should be considered, this solution will not work. I'll update my answer at some point in the near future. – Gorlin 24/10, 2016 at 9:26

@LuisSieira I get that it would work for [1,2,3] [2,3,5] given that the numbers are unique but if you had say [1,1,2,3] [1,2,3,5] and expected [1] you couldn't use Set. Your solution wouldn't work either though :-/ I ended up creating this function because I couldn't figure out a satisfactory way to do it more succinctly. If you have any ideas on how to do that, I'd love to know! – Freesia 24/10, 2016 at 10:31

Fantastic explanation! It reminds me of Jeff Atwood's SQL join post: blog.codinghorror.com/a-visual-explanation-of-sql-joins – Mange 29/3, 2018 at 14:47

Isn't Array.includes() ES7 feature instead of ES6? (1) (2) — and to continue, with ES6 you could use Array.some() e.g. let intersection = aArray.filter(a => bArray.some(b => a === b)), no? – Foxed 24/5, 2018 at 8:18

I'm confused by what arr1 and arr2 are in your examples. I don't see them defined. Array.prototype.diff = arr1.filter(x => arr2.includes(x)); ^ ReferenceError: arr1 is not defined – Crane 20/9, 2018 at 6:3

@Crane arr1 and arr2 are the arrays you're performing the operation with. – Gorlin 20/9, 2018 at 9:30

@LuisSieira yes, arr1 and arr2 are the arrays you perform the operations on but it doesn't make sense to assign the result of the filter operation to a property on the array prototype. Array.prototype.diff = arr1.filter(x => arr2.includes(x)); should probably be something like Array.prototype.diff = function(otherArr) { return this.filter(x => otherArr.includes(x)) }; so you can then do [1, 2, 3].diff([2, 3]). Although adding to the prototype is probably as bad idea as always. – Mccomas 29/10, 2019 at 17:31

Only if you are looking for the same object, not equal objects. You will need to use filter and a custom function for that, otherwise a = {a: 1}; b = {a: 1}; c = [a, {a:1}]; c includes a, but does not include b – Gorlin 25/3, 2020 at 12:40

great answer, but should rename variables arr1/arr2 to arrA/arrB to match the diagrams – Beluga 4/10, 2021 at 6:43

does not work here [4,9,5] [9,4,9,8,4] – Hanus 5/1, 2022 at 13:10

@rashijain, As some comments state, "difference" is not a thing in arrays, it is a set operation. My examples do the equivalent of that in arrays. For what I think you want to do, remove a single copy of the elements, you need something like this

arr2_copy = [...arr2]; arr1.filter((elem) => { if (arr2_copy.includes(elem)) {     arr2_copy.pop(elem);     return false; } else {     return true; }});

– Gorlin 10/1, 2022 at 9:41

This answer should be pinned to the homepage as a guideline as for how to write an answer on StackExchange network – Voss 25/7, 2022 at 9:18

See also Nina Scholz's answer. I tried using a binary search instead of includes, which obviously gave massive speed increases (improved the complexity from O(n^2) to O(n log2 n)). Using her little function instead of binary search came out 2-3x times faster, especially when the arrays were almost the same. 10x+ when using crazy arrays (100,000,000 elements)... – Roubaix 23/8, 2022 at 15:2

jsbench.me/oal76coxx0/2 – Roubaix 23/8, 2022 at 15:42

This answer worked the best for me after trying all solutions on this question, and I also looked at Nina Scholz's answer. It returns correctly whether there are more or fewer items in arr1 vs arr2. I needed the diff code to tell me if there is a mismatch between the arrays in either direction. On performance: KIMT it could very well be 'slower' than other solutions posted because it is successfully checking for diffs in both directions. If you don't need to do that, then obviously this wouldn't be the right solution for you. Thanks for sharing it, Luis! – Polak 13/10, 2022 at 19:35

What should I modify to make it for many arrays? – Maura 14/2, 2023 at 22:24

@MenaiAlaEddine-Aladdin, since the result of the operation is an array itself, if you added it to the prototype you can just chain calls like so: [1, 2, 3].diff([3]).diff([2]) – Gorlin 14/11, 2023 at 16:16

S

959

Array.prototype.diff = function(a) {
    return this.filter(function(i) {return a.indexOf(i) < 0;});
};

//////////////
// Examples //
//////////////

const dif1 = [1,2,3,4,5,6].diff( [3,4,5] );  
console.log(dif1); // => [1, 2, 6]


const dif2 = ["test1", "test2","test3","test4","test5","test6"].diff(["test1","test2","test3","test4"]);  
console.log(dif2); // => ["test5", "test6"]

Note .indexOf() and .filter() are not available before IE9.

Siemens answered 26/10, 2010 at 18:34 Comment(20)

Also, you may find useful editing tutorial – Alderman 26/10, 2010 at 20:9

The only browser that matters that doesn't support filter and indexOf is IE8. IE9 does support them both. So it's not wrong. – Indulgence 22/5, 2011 at 17:37

ie7 and ie8 are still (unfortunately) very relevant, however you can find polyfill code for both functions on the MDN site: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/… developer.mozilla.org/en/JavaScript/Reference/Global_Objects/… Load in the code listed under "compatability" via an IE conditional & BOOM. Ie7/8 are supported. – Burdick 23/5, 2012 at 19:22

you could also use the filter function provided by jQuery. – Toothlike 8/6, 2012 at 12:48

This solution has a run time of O(n^2) a linear solution would be far more efficient. – Kimbro 6/9, 2012 at 18:43

If you use the function like this: [1,2,3].diff([3,4,5]) it will return [1,2] instead of [1,2,4,5] so it doesn't solve the problem in the original question, something to be aware of. – Iggy 14/11, 2012 at 17:50

Beware, this implementation will not work for arrays of objects. See https://mcmap.net/q/46387/-how-to-use-underscore-39-s-quot-intersection-quot-on-objects/14731 for more information. – Apomixis 31/12, 2012 at 19:51

@AlinPurcaru Not supported by archaic browsers != wrong. Considering Netscape 2.0, most of the JS code here is "wrong" by this definition. It's a silly thing to say. – Bascinet 12/1, 2013 at 0:47

@Iggy Good point. It seems like the original poster was asking for the symmetric difference. – Stacystadholder 22/2, 2013 at 14:7

Netscape 2.0 isn't 5.8% of the browser market. I'd be scarce to call that browser "archaic", and I think the footnote to this answer is extremely relevant as it gives an answer that will cause a large number of users to hit an error. The answer should be corrected by referencing the polyfill from the note by @mikeyUX above. (-1) – Croaky 11/3, 2013 at 5:53

Note: this doesn't return the same results if you flip the arrays. – Sparing 17/5, 2013 at 14:12

@Kimbro : a O(n*log(n)) solution would be to sort the 2 arrays and then do a linear merge. Can we better that ? – Roxannroxanna 18/7, 2013 at 1:14

@jholloman: yes indeed, and an O(1) would indeed be even more efficient! – Wheal 18/9, 2013 at 23:56

For me the biggest downside of this is that it modifies the prototype of a built-in object. I prefer to avoid that. – Paramour 2/9, 2015 at 8:19

This only finds what the left array has that the right array does not, but not vice versa. Therefore, if you call [1,2,3,4,5,6].diff( [3,4,5,10] );, your result will be [1, 2, 6], rather than the expected [1, 2, 6, 10]. – Mushy 10/5, 2016 at 19:6

@StijndeWitt If u dont like prototype... just use it as a function or in-line and not add as prototype? – Darleen 2/6, 2017 at 15:16

@Darleen as a regular function, it would be like this? function diff(a, firstArray) { return firstArray.filter(function(i) {return a.indexOf(i) < 0;}); }; so to use it, diff([3,4,5], [1,2,3,4,5,6]) // [1,2,3,6] – Tot 2/8, 2019 at 6:32

While only an example, I would strongly recommend against the use of monkey-patching anything due to stuff like this: developers.google.com/web/updates/2018/03/smooshgate. Nobody wants a second "smooshgate" I'm sure :) – Unthankful 8/8, 2019 at 13:10

Amazing. On ruby code, the Array.diff is builtin: array1 - array2. – Killy 16/5, 2021 at 6:47

@MichaelPlautz that depends on how you define the diff. What you propose can be achieved like this: [...arr1.diff(arr2), ...arr2.diff(arr1)] – Lullaby 18/8, 2023 at 11:44

H

382

This answer was written in 2009, so it is a bit outdated, also it's rather educational for understanding the problem. Best solution I'd use today would be

let difference = arr1.filter(x => !arr2.includes(x));

(credits to other author here)

I assume you are comparing a normal array. If not, you need to change the for loop to a for .. in loop.

function arr_diff (a1, a2) {

    var a = [], diff = [];

    for (var i = 0; i < a1.length; i++) {
        a[a1[i]] = true;
    }

    for (var i = 0; i < a2.length; i++) {
        if (a[a2[i]]) {
            delete a[a2[i]];
        } else {
            a[a2[i]] = true;
        }
    }

    for (var k in a) {
        diff.push(k);
    }

    return diff;
}

console.log(arr_diff(['a', 'b'], ['a', 'b', 'c', 'd']));
console.log(arr_diff("abcd", "abcde"));
console.log(arr_diff("zxc", "zxc"));