Optimize nested loops with map, reduce, filter for JavaScript

Question

Using .map(), .reduce(), .filter() functions, how can I write an efficient routine that can derive all Radio stations that have a .genre that exists in the Popular genres set AND a .tag in the Tags set?

// Radio stations
const stations = [
    {
        title: 'BBC Radio 1',
        genre:['Popular', 'Rnb', 'Hip Hop', 'Dance'],
        tag: ['bbc', 'radio 1', 'uk']
    },
    {
        title: 'Classic FM',
        genre:['Classical', 'Orchestra'],
        tag: ['bbc', 'uk']
    },
]

// Popular genres
const popular = [
    'Popular',
    'House',
    'Chillout',
    'Top 40',
    'Drum And Bass'
]

// Tags
const tags = [
    'bbc',
    'uk'
]

I believe that this is a common pattern which doesn't seem to be well documented. My own attempts have involved writing nested loops which I believe could be cleaner. My dataset contains ~22,000 entries (I can tweak this to performance), and searches upon key press. This will run offline and I cannot use a database, even a local one. I would like to use the; .map(), .reduce(), .filter() functions, even though I understand that these may impose function call overhead and that I could use a binary tree.

Can you show us your nested-loops code, please? map/reduce/filter will not optimise anything (apart maybe from readability), you need a different data structure for that. — Bergi
– Bergi, Commented Mar 8, 2021 at 21:33
@BergiI Thanks, I was interested in readability and specifically the approach for the aforementioned functions. I noted that I was not trying to optimise the routine per-se, but that the answer was still optimal for those functions. To add my code would probably add no value but almost certainly detract from the clarity of the question. Thanks for your comment. — Gary Paluk
– Gary Paluk, Commented Mar 9, 2021 at 0:45

trincot · Accepted Answer · 2021-03-08 20:33:52Z

3

You can indeed use filter, but then some and includes:

let filtered = stations.filter(station =>
    station.genre.some(genre => popular.includes(genre)) &&
    station.tag.some(tag => tags.includes(tag))
);

answered Mar 8, 2021 at 20:33

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gary Paluk Over a year ago

This is fantastic and works perfectly. Thanks

Omar Shishani · Accepted Answer · 2021-03-08 21:37:32Z

You can use simply .filter, and check two things:

Is there a tag key at all?
If there is a tag key, are there any values for it?

Like So:

const stationsWithTags = stations.filter(e => e.tag && e.tag.length > 0);

Then use a for loop nested inside another for loop, to check each item in genre against each item in popular. When a match is found, the return adds to the filtered variable, exits the loop, and the next station is evaluated.

Try running the full code below:

// Radio stations
const stations = [
  {
      title: 'BBC Radio 1',
      genre:['Popular', 'Rnb', 'Hip Hop', 'Dance'],
      tag: ['bbc', 'radio 1', 'uk']
  },
  {
      title: 'Classic FM',
      genre:['Classical', 'Orchestra'],
      tag: ['bbc', 'uk']
  }
]
// Popular genres
const popular = [
  'Popular',
  'House',
  'Chillout',
  'Top 40',
  'Drum And Bass'
]
// Tags
const tags = [
  'bbc',
  'uk'
]

const stationsWithTags = stations.filter(e => e.tag && e.tag.length > 0);

const popularStationsWithTags = stationsWithTags.filter(e => {
  if (e.genre){
    //Check each item in 'genre' against each item in 'popular'
    for (let i = 0; i < e.genre.length; i++){
      for (let j = 0 ; j < popular.length; j++){
        if (e.genre[i] === popular[j]){ //If genre is in 'popular', this item passes filter
          return true;
        } 
      }
    }
  }
})

console.log(popularStationsWithTags);

Thanks for your comment. This is very similar to my original approach but it seems that the .sort() function results in cleaner code and was closer to what I was hoping for.

Collectives™ on Stack Overflow

Optimize nested loops with map, reduce, filter for JavaScript

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related