CODEWITHSUNDEEP
javascript
BARNOWL
BARNOWL

Reputation: 3589

How to use reduce to iterate an array

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 combines 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"

Upvotes: 2

Views: 5655

Answers (5)

enbermudas
enbermudas

Reputation: 1615

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.

Upvotes: 3

Barmar
Barmar

Reputation: 780798

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 combine 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 becomes

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));

Upvotes: 1

Enrico Massone
Enrico Massone

Reputation: 7338

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 compute single value, map is used to project each array item to a new value.

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

Upvotes: 1

Alex Dovzhanyn
Alex Dovzhanyn

Reputation: 1046

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.

Upvotes: 1

El Yosemite
El Yosemite

Reputation: 103

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

Upvotes: 1

Related Questions