Filter an array containing objects based on another array containing objects in JavaScript

Suppose we have two arrays of objects like these ?

const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}];
const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}];

We are required to write a JavaScript function that takes in two such arrays. Our function should return a new filtered version of the first array (arr1 in this case) that contains only those objects with a name property that are not contained in the second array (arr2 in this case) with the same name property.

Therefore, the output, in this case, should look like ?

const output = [{id:'2',name:'B'},{id:'4',name:'D'}];

Using filter() and find() Methods

The most straightforward approach is to use the filter() method with find() to check if an object exists in the second array.

const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}];
const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}];

const filterByReference = (arr1, arr2) => {
    let res = [];
    res = arr1.filter(el => {
        return !arr2.find(element => {
            return element.id === el.id;
        });
    });
    return res;
}

console.log(filterByReference(arr1, arr2));

[ { id: '2', name: 'B' }, { id: '4', name: 'D' } ]

Using filter() with some() Method

An alternative approach uses the some() method, which can be more readable and efficient for larger datasets.

const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}];
const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}];

const filterWithSome = (arr1, arr2) => {
    return arr1.filter(item1 => {
        return !arr2.some(item2 => item2.id === item1.id);
    });
}

console.log(filterWithSome(arr1, arr2));

[ { id: '2', name: 'B' }, { id: '4', name: 'D' } ]

Using Set for Better Performance

For larger arrays, creating a Set of IDs from the second array can improve performance by providing O(1) lookup time.

const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}];
const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}];

const filterWithSet = (arr1, arr2) => {
    const ids = new Set(arr2.map(item => item.id));
    return arr1.filter(item => !ids.has(item.id));
}

console.log(filterWithSet(arr1, arr2));

[ { id: '2', name: 'B' }, { id: '4', name: 'D' } ]

Comparison of Methods

Conclusion

Use filter() with find() for simple cases, some() for better readability, or Set-based approach for optimal performance with large datasets. All methods effectively filter arrays based on object properties.