What is the best way to write array sorting and filtering functions with multiple parameters?

Question

There is a game directory with a list of games that go through multiple filters.

Games are divided by platform (HTC, PSVR, PS5, Favorites). When you click on the tab, a calculated property will be triggered. For PS5, it is showPS5Games. It accepts the selected genre (genre) and sorting (selectedSort). ), checkbox "Suitable for children" (isChild), checkbox "suitable for two" (isLocalMultiplayer) and search for games by name/tag/genre (query). All parameters can be combined in any way.

showPS5Games Complete code:

showPS5Games: state => (
  query,
  genre,
  isChild,
  isLocalMultiplayer,
  selectedSort
) => {
  if (genre == "все" && isChild && isLocalMultiplayer) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category == "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.title.toLowerCase().includes(query)) ||
        (game.category == "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.genre.includes(query)) ||
        (game.category == "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.tag.includes(query))
      );
    });
  } else if (isChild && isLocalMultiplayer) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          isChild &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.tag.includes(query))
      );
    });
  } else if (genre === "все" && isChild) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.isChild &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.isChild &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.isChild &&
          game.tag.includes(query))
      );
    });
  } else if (isChild) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.isChild &&
          game.genre === genre &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.isChild &&
          game.genre === genre &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.isChild &&
          game.genre === genre &&
          game.tag.includes(query))
      );
    });
  } else if (genre === "все" && isLocalMultiplayer) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.tag.includes(query))
      );
    });
  } else if (isLocalMultiplayer) {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.isLocalMultiplayer &&
          game.genre === genre &&
          game.tag.includes(query))
      );
    });
  } else if (genre === "все") {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" && game.genre.includes(query)) ||
        (game.category === "ps5" && game.tag.includes(query))
      );
    });
  } else {
    var tmpArray = state.games.filter(game => {
      return (
        (game.category === "ps5" &&
          game.genre === genre &&
          game.title.toLowerCase().includes(query)) ||
        (game.category === "ps5" &&
          game.genre === genre &&
          game.genre.includes(query)) ||
        (game.category === "ps5" &&
          game.genre === genre &&
          game.tag.includes(query))
      );
    });
  }
  var filteredGames = [];
  if (selectedSort == "ascending") {
    filteredGames = tmpArray.sort((a, b) => a.title.localeCompare(b.title));
  } else if (selectedSort == "descending") {
    filteredGames = tmpArray.sort((a, b) => b.title.localeCompare(a.title));
  } else if (selectedSort == "bygenre") {
    filteredGames = tmpArray.sort((a, b) => a.genre.localeCompare(b.genre));
  } else if (selectedSort == "bytag") {
    filteredGames = tmpArray.sort((a, b) => a.tag.localeCompare(b.tag));
  } else {
    filteredGames = tmpArray;
  }
  return filteredGames;
}

I wrote a branching function with many ifs for every possible combination, which was not optimized and not pretty. Also, for some reason filtering the array by two selected checkboxes doesn't work, only one works fine. What's the best way to rewrite it?

Answer 1

There is a lot of repetitive logic here. The first step to improving efficiency is to clean up your if statements. For example you have:

if (genre == "все" && isChild && isLocalMultiplayer) {
...
} else if (isChild && isLocalMultiplayer) {

Some of these conditions can be checked once using nested ifs:

if (isChild && isLocalMultiplayer) {
    if (genre == "все" {
    ...
    }
}

Additionally, returns can be simplified for the same reason. For example, this returns

return (
    (game.category == "ps5" &&
      isChild &&
      game.isLocalMultiplayer &&
      game.title.toLowerCase().includes(query)) ||
    (game.category == "ps5" &&
      isChild &&
      game.isLocalMultiplayer &&
      game.genre.includes(query)) ||
    (game.category == "ps5" &&
      isChild &&
      game.isLocalMultiplayer &&
      game.tag.includes(query))
  );

can be simplified to:

return (
    game.category == "ps5" &&
    isChild &&
    game.isLocalMultiplayer && 
   (game.title.toLowerCase().includes(query) || 
    game.genre.includes(query) ||
    game.tag.includes(query))
);

I hope this helps you figure out other issues you're having here, good luck!