Filter one array with another array - JavaScript

In JavaScript, filtering one array based on another array is a common task. This technique is useful when you need to keep only certain elements from an array based on criteria stored in another array.

Problem Setup

Consider the following arrays:

const main = [
    {name: "Karan", age: 34},
    {name: "Aayush", age: 24},
    {name: "Ameesh", age: 23},
    {name: "Joy", age: 33},
    {name: "Siddarth", age: 43},
    {name: "Nakul", age: 31},
    {name: "Anmol", age: 21},
];
const names = ["Karan", "Joy", "Siddarth", "Ameesh"];

console.log("Original array:", main);
console.log("Filter criteria:", names);

Original array: [
    { name: 'Karan', age: 34 },
    { name: 'Aayush', age: 24 },
    { name: 'Ameesh', age: 23 },
    { name: 'Joy', age: 33 },
    { name: 'Siddarth', age: 43 },
    { name: 'Nakul', age: 31 },
    { name: 'Anmol', age: 21 }
]
Filter criteria: [ 'Karan', 'Joy', 'Siddarth', 'Ameesh' ]

Using In-Place Filtering with splice()

This approach modifies the original array by removing unwanted elements:

const main = [
    {name: "Karan", age: 34},
    {name: "Aayush", age: 24},
    {name: "Ameesh", age: 23},
    {name: "Joy", age: 33},
    {name: "Siddarth", age: 43},
    {name: "Nakul", age: 31},
    {name: "Anmol", age: 21},
];
const names = ["Karan", "Joy", "Siddarth", "Ameesh"];

const filterUnwanted = (main, names) => {
    for(let i = 0; i < main.length; ){
        if(names.includes(main[i].name)){
            i++;
            continue;
        };
        main.splice(i, 1);
    };
};

filterUnwanted(main, names);
console.log(main);

[
    { name: 'Karan', age: 34 },
    { name: 'Ameesh', age: 23 },
    { name: 'Joy', age: 33 },
    { name: 'Siddarth', age: 43 }
]

Using filter() Method (Non-Destructive)

A cleaner approach that creates a new array without modifying the original:

const main = [
    {name: "Karan", age: 34},
    {name: "Aayush", age: 24},
    {name: "Ameesh", age: 23},
    {name: "Joy", age: 33},
    {name: "Siddarth", age: 43},
    {name: "Nakul", age: 31},
    {name: "Anmol", age: 21},
];
const names = ["Karan", "Joy", "Siddarth", "Ameesh"];

const filtered = main.filter(person => names.includes(person.name));
console.log("Filtered result:", filtered);
console.log("Original array unchanged:", main.length); // Still has all 7 elements

Filtered result: [
    { name: 'Karan', age: 34 },
    { name: 'Ameesh', age: 23 },
    { name: 'Joy', age: 33 },
    { name: 'Siddarth', age: 43 }
]
Original array unchanged: 7

Comparison

Conclusion

Use filter() for cleaner, more readable code when you don't need to modify the original array. Use the splice approach only when you specifically need in-place filtering to save memory.