Filter JavaScript array of objects with another array

Suppose, we have an array of objects like this ?

const arr = [
   {area: 'NY', name: 'Bla', ads: true},
   {area: 'DF', name: 'SFS', ads: false},
   {area: 'TT', name: 'SDSD', ads: true},
   {area: 'SD', name: 'Engine', ads: false},
   {area: 'NSK', name: 'Toyota', ads: false},
];

We are required to write a JavaScript function that takes in one such array as the first argument and an array of string literals as the second argument.

Our function should then filter the input array of objects to contain only those objects whose "area" property is included in the array of literals (second argument).

Method 1: Using for Loop

The traditional approach uses a for loop to iterate through the array and check each object's area property:

const arr = [
   {area: 'NY', name: 'Bla', ads: true},
   {area: 'DF', name: 'SFS', ads: false},
   {area: 'TT', name: 'SDSD', ads: true},
   {area: 'SD', name: 'Engine', ads: false},
   {area: 'NSK', name: 'Toyota', ads: false},
];

const keys = ['NY', 'SD'];

const filterByArea = (arr = [], keys = []) => {
   const res = [];
   for(let i = 0; i < arr.length; i++){
      const { area } = arr[i];
      if(keys.includes(area)){
         res.push(arr[i]);
      }
   }
   return res;
};

console.log(filterByArea(arr, keys));

[
   { area: 'NY', name: 'Bla', ads: true },
   { area: 'SD', name: 'Engine', ads: false }
]

Method 2: Using filter() Method (Recommended)

A more elegant approach uses the built-in filter() method, which creates a new array with all elements that pass a test:

const arr = [
   {area: 'NY', name: 'Bla', ads: true},
   {area: 'DF', name: 'SFS', ads: false},
   {area: 'TT', name: 'SDSD', ads: true},
   {area: 'SD', name: 'Engine', ads: false},
   {area: 'NSK', name: 'Toyota', ads: false},
];

const keys = ['NY', 'SD'];

const filterByAreaModern = (arr = [], keys = []) => {
   return arr.filter(obj => keys.includes(obj.area));
};

console.log(filterByAreaModern(arr, keys));

[
   { area: 'NY', name: 'Bla', ads: true },
   { area: 'SD', name: 'Engine', ads: false }
]

Method 3: Using Set for Better Performance

When dealing with larger datasets, using a Set for the filter criteria improves performance since Set lookups are O(1):

const arr = [
   {area: 'NY', name: 'Bla', ads: true},
   {area: 'DF', name: 'SFS', ads: false},
   {area: 'TT', name: 'SDSD', ads: true},
   {area: 'SD', name: 'Engine', ads: false},
   {area: 'NSK', name: 'Toyota', ads: false},
];

const keys = ['NY', 'SD'];

const filterByAreaOptimized = (arr = [], keys = []) => {
   const keySet = new Set(keys);
   return arr.filter(obj => keySet.has(obj.area));
};

console.log(filterByAreaOptimized(arr, keys));

[
   { area: 'NY', name: 'Bla', ads: true },
   { area: 'SD', name: 'Engine', ads: false }
]

Comparison

Conclusion

The filter() method provides the most readable solution for filtering arrays of objects. For large datasets, combine it with Set for optimal performance.