Using one array to help filter the other in JavaScript

When working with arrays of objects, you often need to filter one array based on values from another array. This is a common requirement when you have a list of items and want to keep only those that match specific criteria.

Problem Statement

Given an array of objects and an array of values, we need to filter the objects array to include only those objects whose property matches values in the second array.

Sample Data

Let's start with these 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.length, "items");
console.log("Filter names:", names);

Original array: 7 items
Filter names: [ 'Karan', 'Joy', 'Siddarth', 'Ameesh' ]

Method 1: In-Place Filtering with splice()

This method 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("Filtered result:");
console.log(main);

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

Method 2: Using filter() (Recommended)

A more functional 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("Original array unchanged:", main.length, "items");
console.log("Filtered result:", filtered.length, "items");
console.log(filtered);

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

Performance Optimization with Set

For better performance with large arrays, convert the filter array to a Set:

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

const names = ["Karan", "Joy", "Siddarth", "Ameesh"];
const nameSet = new Set(names);

const filtered = main.filter(person => nameSet.has(person.name));

console.log("Using Set for O(1) lookups:");
console.log(filtered);

Using Set for O(1) lookups:
[
  { name: 'Karan', age: 34 },
  { name: 'Ameesh', age: 23 },
  { name: 'Joy', age: 33 },
  { name: 'Siddarth', age: 43 }
]

Comparison

Conclusion

Use filter() with includes() for most cases as it's readable and doesn't modify the original array. For large datasets, consider using a Set for better performance.