I have been doing research on the benefits of using reduce over map. Mainly the benefit is that reduce has better performance time.

My question is how would i be able to use reduce to iterate over an array as if i would for the map function ?

An example

The following code bines the fruits to one string. How would i be able to iterate over this array using the reduce function ?

const fruits = ['pears', 'plums', 'grapes', 'apples']

console.log(fruits.reduce( (acc, fruit) => acc.concat(fruit)))

// "pearsplumsgrapesapples"

I have been doing research on the benefits of using reduce over map. Mainly the benefit is that reduce has better performance time.

My question is how would i be able to use reduce to iterate over an array as if i would for the map function ?

An example

The following code bines the fruits to one string. How would i be able to iterate over this array using the reduce function ?

const fruits = ['pears', 'plums', 'grapes', 'apples']

console.log(fruits.reduce( (acc, fruit) => acc.concat(fruit)))

// "pearsplumsgrapesapples"

• javascript

• 1 You are iterating over it with the reduce function. – Barmar Commented Jul 18, 2019 at 18:43
• but how would i map it. like line by line outputting the items in the array. – BARNOWL Commented Jul 18, 2019 at 18:44
• The difference is that .map always returns an array that has the same length as the original array which means that this two function are not interchangeable. – Titus Commented Jul 18, 2019 at 18:44

5 Answers 5

You'll sacrifice code legibility for a millisecond of difference but here it is:

['pears', 'plums', 'grapes', 'apples'].reduce(function (acc, currentFruit) {
    // Your code here
    acc.push(currentFruit);
    return acc;
 }, []);

You'll have to push your current value to a an array because the reduce method objective is to reduce the provided data to a single value.

At the end of the day, map is just better, simpler and you won't be able to notice the time difference.

The reduce function indeed iterates over the array, because it's meant to reduce all the array items to a single value by applying a function.

The map function iterates on the array too, in order to project the array elements to a value calculated by applying a provided function.

The difference between the two functions is that they are iterating over the array for a different purpose. Reduce is used to pute single value, map is used to project each array item to a new value.

In both cases you can't say anything about the putational plexity because you are passing a callback and you don't know what that callback is going to do. So the putational plexity depends on the callback function.

Take a look at this paper about reduce: https://hackernoon./javascript-array-reduce-50403c421968

You could pass an empty array as the reduce function accumulators initial value, then within the body of your reduce function you can append to the acc which will now be an array and execute conditional logic.

map is simple. It calls the function on each element of the input array, and returns a new array containing the corresponding function results.

result = array.map(f)

is equivalent to

result = [f(array[0], 0, array), f(array[1], 1, array), f(array[2], 2, array), ...]

You use reduce if you want to bine the results of each iteration in a custom way, to produce one result. The function takes two arguments -- the first is the return value of the previous iteration, and the second is the current element from the iteration.

result = array.reduce(f, init)

is equivalent to

temp1 = f(init, array[0], 0, array);
temp2 = f(temp1, array[1], 1, array);
temp3 = f(temp2, array[2], 2, array);
...
result = f(tempN, array[N], N, array);

If you don't provide an initial value argument, the first line bees

temp1 = array[0];

and the rest is the same.

If you don't actually need a new result, you just want to execute some code on each array element, you use forEach(). It's like map, but it doesn't collect the results. If you want to log each array element on a new line, you would do:

array.forEach(el => console.log(el));