Compare two large arrays of objects effectively and find the differences

Question

I have two large array of objects like:

const array1 = [
    {
        userId: 83232932,
        name: 'Tom',
        profile_pic: 'http://..',
        age: 24,
        gender: 'F'
    },
    {
        userId: 2413535,
        name: 'Sam',
        profile_pic: 'http://..',
        age: 31,
        gender: 'M'
    }
]

and another almost equal array.

These two arrays can also have thousands of objects, for example 20k.

I have to compare them and find the objects that are in the first array but not in the second one

Now i'm doing:

const missing = array1.filter(function(item1) {
    return !array2.some(function(item2) {
        return item1.userId === item2.userId;
    });
});

This works, but it blocks the UI of my app for a few seconds.

Is there a better way to filter the array or should I review how and when to make this comparison?

Answer 1

You could take a Set and check against for filtering the first array.

const
    ids = new Set(array2.map(({ id }) => id)),
    missing = array1.filter(({ id }) => !ids.has(id));