DEV Community 👩‍💻👨‍💻

Cover image for A One-Minute Primer on the JavaScript Array Map, Filter, and Reduce Methods
Nick Scialli (he/him)
Nick Scialli (he/him)

Posted on

A One-Minute Primer on the JavaScript Array Map, Filter, and Reduce Methods

Map, Filter, and Reduce are powerful array methods that are definitely worth learning! This is a super-quick primer on each method.

map: return array where each element is transformed as specified by the function

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]
Enter fullscreen mode Exit fullscreen mode

filter: return array of elements where the function returns true

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]
Enter fullscreen mode Exit fullscreen mode

reduce: accumulate values as specified in function

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current, 0);
console.log(reduced);
// 21
Enter fullscreen mode Exit fullscreen mode

More arguments

Note that this is the most basic use of the map, filter, and reduce methods and the functions passed to them can take additional arguments. In other words, please treat this post as a basic introduction!

Learn More

I put out free email newsletters with JavaScript tips on a weekly basis and would love to put some in your inbox! Sign up here.

Top comments (0)

🌚 Life is too short to browse without dark mode