How are map(), reduce(), filter() and find() methods used in real life projects?

#1

Hello all
I have been taking some courses on Udemy to improve my JavaScript / ES6 skills and I would like to hear from experienced front end developers some examples on how they used the methods map() , filter() , reduce() and find() when building real applications.

If you could contribute with some of your cases I would use them to exercise what I have learned and gain practice with more complex scenarios than the examples I have on my courses.

Thank you very much

#2

For mapping, filtering, reducing, and finding. Okay i’ll be serious now.

Essentially they’re helper functions.

I COULD write a function that finds every… score higher than 72 made by Tiger Woods.
Let’s say my input is a set of score objects:

[ { 'tournament': "Golf 1", 'player': 'Tiger Woods', 'score': 79 },
{ 'tournament': "Golf 1", 'player': 'Billy Golfman', 'score': 83 },
{ 'tournament': "Golf 2", 'player': 'Tiger Woods', 'score': 71 },
{ 'tournament': "Golf 3", 'player': 'Tiger Woods', 'score': 90 },
...
]

I could write it out:

let result = [];
allscores.forEach(function(record) {
   if(record.score > 72 && record.player == "Tiger Woods") {
      result.push(record);
   }
});

or, I could say let result = allscores.filter((x) => x.score > 72 && x.player == "Tiger Woods");

1 Like
#3

I’ll use the example from @m_hutley to demonstrate how map, filter, and reduce might be used in the real world.

Getting the average score of Tiger Woods is the objective in this case:

function averageScore(stats, player) {
  const playerStats = stats.filter(function playerFilter(stat) {
    return stat.player === player;
  });
  const playerScores = playerStats.map(function statScore(stat) {
    return stat.score;
  });
  const totalScore = playerScores.reduce(function addScore(total, score) {
    return total + score;
  });
  return totalScore / playerScores.length;
}
console.log(averageScore(stats, "Tiger Woods"));

The overall flow of the code can be make easier to understand by moving those functions
out:

function averageScore(stats, player) {
  function playerFilter(stat) {
    return stat.player === player;
  }
  function statScore(stat) {
    return stat.score;
  }
  function total(total, score) {
    return total + score;
  }
  const playerStats = stats.filter(playerFilter);
  const playerScores = playerStats.map(statScore);
  const totalScore = playerScores.reduce(total);
  return totalScore / playerScores.length;
}
console.log(averageScore(stats, "Tiger Woods"));

Those functions can be replaced with arrow-notation instead, which helps to simplify things:

function averageScore(stats, player) {
  const playerFilter = (stat) => stat.player === player;
  const statScore = (stat) => stat.score;
  const total = (total, score) => total + score;

  const playerStats = stats.filter(playerFilter);
  const playerScores = playerStats.map(statScore);
  const totalScore = playerScores.reduce(total);
  return totalScore / playerScores.length;
}
console.log(averageScore(stats, "Tiger Woods"));

And next up, I want to remove the playerStats/playerScores/totalScore variables, which in this case is best achieved just by having scores variable.

function averageScore(stats, player) {
  const playerFilter = (stat) => stat.player === player;
  const statScore = (stat) => stat.score;
  const total = (total, score) => total + score;

  const scores = stats.filter(playerFilter).map(statScore);
  return scores.reduce(total) / scores.length;
}
console.log(averageScore(stats, "Tiger Woods"));

That’s a good example of how filter/map/reduce are used in real-life projects. There are many other much more complex ways to use them, but ultimately they can help to make things easier to understand.

4 Likes