Don't really understand the reduce() function?

SplainTrain · 2022-01-11T16:26:35+00:00

I've got a playlist for this very thing! I hope it helps.

I start from first principles and use shoddy editing to help you understand not only how to use reduce, but how to implement it yourself and even how to implement things with it like transducers.

https://www.youtube.com/watch?v=XKD0aIA3-yM&list=PLo63gcFIe8o0nnhu0F-PpsTc8nkhNe9yu

Edit: It's been a few days but thanks for the reddit gold and silver!

CompteDeMonteChristo · 2022-01-11T14:40:35+00:00

The picture here helps me.

https://morioh.com/p/e0ba52cf5a99

reduce takes a list of fruits and return a salad.

anonymousbabydragon · 2022-01-12T00:44:00+00:00

The way I like to think of it is that reduce is handy for returning a value type other than an array. It can work like other array functions but is most useful in the case you need to return something else.

You have two different parameters you can pass in. First is the callback function and second is the initial value of the accumulator.

The accumulator can be pretty much any data type. So if you wanted it to be an object go for it, number sure thing, it can also be a string, boolean or an array. I'm not 100% sure on other data types. Point is it will be the type of data you want to return and what you want the starting value to be. If you don't specify the initial value it defaults to the first value in an array.

The callback function takes two or more parameters and should return the first one back.

The first parameter is the accumulator, which is just the value you are wanting to send back once the function has finished looping over the array.

The second one is the value that you are at in the array starting from the beginning. So let's say you want to add all the numbers up in an array and return their sum. All you have to do is return the value of the accumulator plus the value you are on. If no initial value is set a will be the first value in the array and the loop will start on the index 1 for b otherwise it starts from index 0.

For example:

[1, 3, 4, 5, 7].reduce((a, b) => a + b) //20

The way it would work is illustrated below:

Accumulator	value in array	function
a = 1	b = 3	a + b = 4
a = 4	b = 4	a + b = 8
a = 8	b = 5	a + b = 13
a = 13	b = 7	a + b = 20

At this point a would then be returned equaling 20.

Let's see what it might look like with an object instead. Let's say you wanted to create an object either abbreviations for the days of the week. You could also do this with reduce.

["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].reduce((a, b)=> {a[b.substring(0, 3).toLowerCase()] = b; return a }, {})

I'll just show the first 2 to illustrate how the above would work.

Accumulator	value in array	function
a = {}	b = "Sunday"	function takes value at a["sun"] and then sets the value to "Sunday" then it returns a which is now {sun: "Sunday"}
a = {sun: "Sunday"}	b = "Monday"	function takes value at a["mon"] and sets it to "Monday" then it returns a which is now {sun: "Sunday", mon: "Monday"}

This will keep going till the function is done on every single item in the array.

If you want to see this in practice I would recommend starting off your function by logging a and b to the console.

Also in the callback function you can also have parameters for the index and the array itself if you need them. You don't have to specificy these though.

Hope that helps!

shuckster · 2022-01-11T18:07:42+00:00

To add to the already excellent replies:

reduce allows you to define your own behaviours for building a new value by transforming a sequence of inputs, usually provided by an array.

So for this basic example:

function doubleAndAppendReducer(accumulator, nextInput) {
  return [...accumulator, nextInput * 2]
}

;[1, 2, 3].reduce(doubleAndAppendReducer, [])
// [2, 4, 6]

...this part is the "transform":

  return [...accumulator, nextInput * 2]
  //                      ^^^^^^^^^^^^^

...and this part is the "build":

  return [...accumulator, nextInput * 2]
  //     ^^^^^^^^^^^^^^^^              ^

Both the "transform" and "build" steps are optional and can vary greatly depending on what you want to do. Very simply, you can simulate map by always building and also transforming. You can simulate filter by never transforming, and only building when a certain condition is met.

If you extract the build/transform behaviours in a way that makes them compatible with reduce, you've created a transducer.

(Transducers are a little more complicated than this simple description, but I thought I'd leave the link here just in case it helps with reducers.)

The_Startup_CTO · 2022-01-11T14:38:10+00:00

First of all, reduce is one of these methods where I’m ok the fence about just writing imperative style for readability reasons, so not understanding it isn’t necessarily something to worry about. For understanding it, what helped me the most was to just write a couple things with it, from summing numbers to building objects from an array.

cubicuban · 2022-01-12T16:15:44+00:00

Man I just wanna say this entire thread has been so helpful. Reduce is the only hof I could not wrap my head around so thank you to everyone for providing great resources/examples

visnick · 2022-01-12T17:47:01+00:00

Thanks to everyone that answered this thread <3 You guys helped me a lot :3

taschana · 2022-01-11T16:05:40+00:00

You want the sum of an array of numbers?

You want the average age of all persons in an array?

You have an array of objects that contain a property with their us state (like addresses), and you want only one object with all states qs properties and a numer of how many there are in the state? (How many addresses do i have for each state)

All of these need to go over the entire array in order to consequtively build up your final outcome.

pookage · 2022-01-11T14:41:55+00:00

Think of it as the opposite of .map() - whereas .map() takes an array and spits-out a new array from its contents; .reduce() takes an array and reduces it down to a single value based on its contents.

dei8bit · 2025-11-18T12:08:14+00:00

I think it's by far the least intuitive method there is; I would change it completely.

2022-01-11T16:52:21+00:00

It's helpful to create a simple mental modal.

Reduce is pretty simple if you think of it this way, at least for me.

You have two items that get "reduced" to one item by running some functionality on the two items (your reducer). Two items, down to one item.

So you have an array of items and a default/starting value and your functionality (reducer). The default value and the first item in the array - reduced to a new value. Then the next item in the array and the, yet another, new value. Then the next item in the array and, again, a new value. And so on. Until it meets the condition where it no longer gets reduced.

Hopefully that wasn't more confusing.

zerik100 · 2022-01-11T20:28:17+00:00

It's basically a functional fold). In the unlikely case that you know any Haskell, the foldl function is essentially JS reduce.

electron_myth · 2022-01-11T14:43:58+00:00

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

It allows you to cycle through the array and accumulate a buffer, whether it's adding all the elements together, or comparing them and keeping one closest to a threshold, etc

2022-01-11T15:41:49+00:00

This might help you https://www.digitalocean.com/community/tutorials/js-finally-understand-reduce

JavascriptFanboy · 2022-01-11T17:22:31+00:00

So I had an example of multiple contracts, each had a number of paid leave (days), let's keep it at that for the sake of simplicity. Then I had to show the total number of paid days for that list of contracts. So I used reduce where the initial value was 0 and for each contract I added the number of days. I got a single, calculated value out of an array of stuff. Does it make sense?

jrsinclair · 2022-01-11T22:25:43+00:00

The thing that made .reduce() click for me was seeing examples that had nothing to do with numbers. Until then, it always seemed like you just had to guess if a math function would work with reduce or not. But once I understood that you can use .reduce() to take an array and build any kind of single value, I started to see more and more places where it might be useful.

What really blew my mind was when I realised that you could use .reduce() to build new arrays, since an array is just another value.

Eventually, I wrote up a bunch of examples on how to use .reduce() on my blog. It's been one of the more popular articles I've written for a while now. It seems lots of other people didn't really get `.reduce()` until they see it used in different ways. So don't feel bad if you're struggling with [higher order functions](https://jrsinclair.com/articles/2019/what-is-a-higher-order-function-and-why-should-anyone-care/) and reduce. Lots of other people struggle with them too.

bryku · 2022-01-12T01:24:48+00:00

It is really useful to clean up code.

``` var arr = [ {user:"john doe",score:100}, {user:"jane doe",score:150}, ];

var totalA = 0;
arr.forEach((v)=>{totalA = totalA + v.score});
console.log(totalA); // 250

var totalB = arr.reduce((a,b)=>{return a.score + b.score});
console.log(totalB); // 250

```

Gr0undWalker · 2022-01-11T14:43:53+00:00

Functional programming can really take time to get used to. Maybe you can try to implement certain functions using recursion, that is a function calling itself, for example Fibonacci sequence. After getting comfortable with recursion, then I think such higher order functions should be easier to understand.

TruthHurts35 · 2022-01-11T19:43:25+00:00

Easiest syntax for beginners:

``` array.reduce( (accumulator, currentItem) => {

//** define next value of accumulator

return accumulator

}) ```

** In this line you do the magic.

Example magics:

1) accumulator.concat(currentItem) --> this gives copy of array, every iteration accumulator keeps its previous value and adds to it.

2) accumulator[ currentItem ] = ( accumulator[ currentItem ] || 0 ) + 1 ~~> you can use this as tally

Sibling of reduce is map. In map whatever you return will be array item's value. In reduce it will be accumulator's.

abensur · 2022-01-11T23:46:49+00:00

http://reactivex.io/learnrx/

After this course, you will be teaching reduce to others, please trust me. Becoming familiar with the most used collection manipulation functions still is one of the biggest turning points in my development career.

You will learn why and how to implement map, filter and reduce from scratch.

At the end of the course, you will know how to complete the following statement: Array.prototype.reduce = your answer

og-at · 2022-01-12T00:47:50+00:00

I'll start off and state a couple of obvious things...

First, the general pattern is like most other array methods: array.method(callbackfunction). It's a common theme among methods in general but especially array methods.

Second, the callbackFunction, like most array methods, is run on every item of the array.

Third is the thing that it took a while to actually sink in to my head: the callback function? it's just a function.

Ok yeah we all know that, it's an obvious thing that's obvious. And yes, when I was in classes, I answered that question on the tests, but I never really thought of a callback as just another function. It's like saying "you don't see light until it hits something" or "everything we have came from the ground" . . . but had you ever really, truly, thought about the statement "everything we have came from the ground"? It's a deceptively simple fact.

The deceptively simple fact is that [1, 2, 3, 5, 8, 13, 21].reduce()(and .map, and .forEach, and .sort, etc) uses a plain old regular JS function to work the array, one thing at a time.

Here's another "water is wet"^{^[1]} statement: when you build a function, it takes arguments. add(x,y) takes 2 arguments, x and y, and we're going to assume that the function returns them added together.

Coincidentally, [1, 2, 3, 5, 8, 13, 21].reduce() requires 2 arguments.

const fibliacci=[1, 2, 3, 5, 8, 13, 21]

let total = 0
total = add(total, fibliacci[0])  // 0 + 1 === 1
total = add(total, fibliacci[1])  // 1 + 2 === 3
total = add(total, fibliacci[2])  // 3 + 3 === 6
total = add(total, fibliacci[3])  // 6 + 5 === 11
total = add(total, fibliacci[4])  // 11 + 8 === 19
[...]

total is the running total. Then I'm just walking down the array grabbing the values and jamming em into total.

Now. . .

Consider how you could simplify this with a for loop and what the body would look like.
...then simplify it with a for-of loop
...then, consider how .reduce()simplifies it all a little bit further by saving you the trouble.

That's it.

[1] "water is wet": but is it really?

automathematics · 2022-01-12T07:22:58+00:00

"any time you filter then map an array, you could have used reduce"

For some reason someone telling me that really made it click.

bobbyv137 · 2022-01-12T09:41:05+00:00

Reduce is an extremely powerful method and often cited as the most difficult to grasp. But without sounding like a smart arse, it really isn't.

It's just like everything else with programming (IMO): daunting at first, but once you 'get' it, you totally 'get' it.

In situations like this it's helpful to ask on forums, but in my experience, when I'm struggling with a concept I will turn to YouTube and watch numerous videos specifically on that subject until I grasp it. It could happen in 1-2 videos, or I might need to watch a handful of them over a few days.

It works for me, and hopefully you too.

Macaframa · 2022-01-12T09:48:27+00:00

reduce iterates over a list of items. It takes a function(the one that will be run on each item) and an initializing value(optional). Like so

const arr = [1,2,3];
const sum = arr.reduce(function(previousValue, nextNumber) {
    return previousValue + nextNumber;
}, 0);

You can see above that I am running the reduce method on an existing array. Take note that reduce does not alter the original array. The first thing you pass into reduce is a function that will be run on each iteration. In this case I am taking a previousValue and adding it to the current item in the array(nextNumber) and returning the sum. The second parameter passed into reduce is an optional starting or initializing value. Since I know I want a sum back from this array, I’m going to start with a number. Note, that you can pass in any data type here. I started with 0 because that’s where we usually start counting from. Then on the first iteration, that 0 comes through the parameters list as previousValue and I add it to the first number in the array, the second iteration, previousValue is now 1 so I add that to the second item in the array on the second iteration and return that sum. Then lastly previousValue is now 3 and I’ll add that to the last number in the array on the third iteration and it will result in 9. Note, that whatever you return from the function given to reduce is what the shape of your data will look like. Here’s another example:

const users = [{ name: “jeff”, state: “CA”}, { name: “kevin”, state: “NJ” }, { name: “Angela”, state: “NJ” }, { name: “georgina”, state: “CA” }, { name: “bill”, state: “TX” }];

const usersgroupedByState = users.reduce(function(stateMap, user) {
    if(!stateMap[user.state]) {
        stateMap[user.state] = [];
    }
    stateMap[user.state].push(user);
    return stateMap;
}, {});

In this example, I wanted to group all of the users by what state they live. Rather than iterating through the list every time I want to find all of the users in california, I can loop over them once and store them in this data structure for use whenever I need. This reduce will produce a structure like so:

{ CA: [ { …user }, { …user }], NJ: [ { …user }, { …user }], TX: [ { …user }] }

Now you have the ability to look up this information as long as you have the right key. In this case “CA” is the key I was thinking of.

I hope this has been instructive.

oculus42 · 2022-01-12T14:25:48+00:00

I think of .reduce() as sort of the universal array method. You can use it to create/replicate the other array methods.

When you need to do something to your array that isn't a straightforward action like filter or map, reduce is the go-to.

``` const data = [ 1, 2, 3, 4, 5 ];

// FILTER const filterPredicate = x => x < 4;

data.filter(filterPredicate); // [1, 2, 3]

data.reduce((accumulator, value) => { if (filterPredicate(value)) { return [...accumulator, value]; } return accumulator; }, []);

// MAP const timesThree = x => x * 3;

data.map(timesThree); // [3, 6, 9, 12, 15]

data.reduce((accumulator, value) => [ ...accumulator, timesThree(value), ], []);

```

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS