Main difference between map and reduce

by


Source

Both map and reduce have as input the array and a function you define. They are in some way complementary: map cannot return one single element for an array of multiple elements, while reduce will always return the accumulator you eventually changed.

map

Using map you iterate the elements, and for each element you return an element you want.

For example, if you have an array of numbers and want to get their squares, you can do this:

// A function which calculates the square
const square = x => x * x

// Use `map` to get the square of each number
console.log([1, 2, 3, 4, 5].map(square))

reduce

Using an array as an input, you can get one single element (let’s say an Object, or a Number, or another Array) based on the callback function (the first argument) which gets the accumulator and current_element parameters:

const numbers = [1, 2, 3, 4, 5]

// Calculate the sum
console.log(numbers.reduce(function (acc, current) {
  return acc + current
}, 0)) // < Start with 0

// Calculate the product
console.log(numbers.reduce(function (acc, current) {
  return acc * current
}, 1)) // < Start with 1

Which one should you choose when you can do the same thing with both? Try to imagine how the code looks. For the example provided, you can compute the squares array like you mentioned, using reduce:

// Using reduce
[1, 2, 3, 4, 5].reduce(function (acc, current) {
    acc.push(current*current);
    return acc;
 }, [])

 // Using map
 [1, 2, 3, 4, 5].map(x => x * x)

Now, looking at these, obviously the second implementation looks better and it’s shorter. Usually you’d choose the cleaner solution, which in this case is map. Of course, you can do it with reduce, but in a nutshell, think which would be shorter and eventually that would be better.

More Related Contents:

  1. React Javascript Array Object [closed]
  2. Map vs Object in JavaScript
  3. Sum JavaScript object propertyA values with the same object propertyB in an array of objects
  4. How to call reduce on an array of objects to sum their properties?
  5. How to do associative array/hashing in JavaScript
  6. How to concatenate properties from multiple JavaScript objects
  7. Performance of key lookup in JavaScript object
  8. Why is Proxy to a Map object in ES2015 not working
  9. How to iterate (keys, values) in JavaScript? [duplicate]
  10. JavaScript array .reduce with async/await
  11. How to create a hash or dictionary object in JavaScript [duplicate]
  12. How do I persist a ES6 Map in localstorage (or elsewhere)?
  13. Using Array objects as key for ES6 Map
  14. How to create dictionary and add key–value pairs dynamically?
  15. How to early break reduce() method?
  16. Define a custom hash() method for use with ES6 maps
  17. JavaScript – Map() increment value
  18. Calling reduce to sum array of objects returns NaN
  19. How to create dictionary and add key value pairs dynamically in Javascript
  20. map function not working in React
  21. First item from a Map on JavaScript ES2015
  22. What does the Array method `reduce` do?
  23. Using array map to filter results with if conditional
  24. Sort a dictionary by value in JavaScript
  25. Maximum number of entries in Node.js Map?
  26. Using reduce() to find min and max values?
  27. Why does a js map on an array modify the original array?
  28. How can I get a key in a JavaScript ‘Map’ by its value?
  29. How do I interpolate a variable as a key in a JavaScript object?
  30. How can I check if two Map objects are equal?

Leave a Comment