DEV Community

Map, Filter, & Reduce in JavaScript

Muhannad on January 18, 2020

This post is a basic walkthrough of JavaScript's map, filter, and reduce methods that provides practical use cases of functional programming in Jav...

Read full post

Casper • Jan 18 '20

Ideally, you shouldn't modify the original array at all. Funtional programming encourages immutability. From a strictly functional perspective you should really only use forEach() for IO operations, like changing the DOM.

Josh • Jan 18 '20 • Edited

I appreciate how you've taken this explanation upon yourself. I think there's a revision in here, though; reduce is a for with a return value, map is a specialized reduce that gives back a new array.

Quite literally, anything you can do with a for loop, you can do with reduce

const pets = ["cat", "dog", "birb"]

pets.reduce((item, acc) => 
  console.log(item),
  null
) // effectively a logging `for`

pets.reduce((item, acc) => 
  /(cat|dog)/.test(item) ? [...acc, item] : acc,
  []
) // self-implemented `filter`

pets.reduce((item, acc) =>
  [...acc, `cute ${item}`],
  []
) // self-implemented `map`

Muhannad • Jan 18 '20

That's an interesting point that I hadn't considered, I'll update the post to reflect that!

v-dale • Jan 18 '20

The filter example should return the even numbers. Isn't it?

Muhannad • Jan 18 '20

You're right, I've updated the typo!