DEV Community 👩‍💻👨‍💻

Chiamaka Mbah
Chiamaka Mbah

Posted on

How reduce() function really works

Hello! New person alert! This is my first post on here and I am super excited.

Today, I will be explaining what the reduce() function really looks like under the hood so beginners in Javascript can truly understand how it works. It's not enough to just use it, I think it's also cool understanding how it works.

First of all, the reduce() function is a higher-order function. HIGHER-ORDER FUNCTIONS are functions that take in other functions as parameters. It was introduced in ES2015 or ES6.

WHAT DOES THE REDUCE() FUNCTION REALLY DO?

The reduce() function helps you turn an array of elements into a single value. In short, it sums up everything in an array. Cool, right? 😊

HOW IT WORKS

That's some code on how reduce() works but now I will be showing you how it truly works under the hood.

Ready. Set. Go!

Reduce() under the hood

That is an expansion of the reduce() function.

Now, I will break it down into chunks for your own understanding as to how this came to be. It's simple math and in Javascript, it is called Augmented Addition/Sum.

Breaking it into chunks

Remember we initialized accumulator to 0, it's the starting point of this entire code.

To Add:

accumulator += myArrayToBeSumed which also means... accumulator = accumulator + myArrayToBeSumed. (+=) this is augmented sum/addition.

A quick breakdown: the value on the left is accumulator while the value on the right is myArrayToBeSumed
=> 0 += 2 also means 0 = 0 + 2 answer is 2. Accumulator is now 2.
=> 2 += 3, 3 is the next element in the array. Accumulator is now 5.
=> 5 += 4, accumulator is now 9.
=> 9 += 5, accumulator is now 14.
=> 14 += 6, accumulator is now 20.

Accumulator keeps adding everything in the array until it gets to the last element in the array then it stops.

P/S: accumulator is just a name chosen for my variable, it is not a keyword in Javascript.

Next post hopefully would be on using the reduce() function in real-life examples, not just numbers.

Hope with this, you can understand how reduce() works under the hood and why you are using it. ♥️ ♥️ ♥️

Top comments (8)

Collapse
devhammed profile image
Hammed Oyedele • Edited on

Are you sure that is how it truly works, what if my accumulator is not a number? do you know you can implement map and filter Array functions using reduce?

reduce

I think a better representation will be:

  function reduce (arr, fn, accumulator = 0) {
    arr.forEach((item, index) => {
      accumulator = fn(accumulator, item, index) // set the current accumulator value to the return value of the function
    })
    return accumulator
  }

And welcome to Dev.together 🥰🥰🥰

Collapse
saucekode profile image
Chiamaka Mbah Author

Thank you for this but really I just wanted to let beginners see what the reduce() looks like behind the scene. But truly, thank you. 🤗

Collapse
homam profile image
Homam

Reduce is inherently an abstraction over recursion. It is the most generic operation that we can do with all arrays. Every other operation on arrays can be re-defined using reduce alone. Shameless plug: I wrote a little post about this concept Reduce.

Collapse
alfahim027 profile image
Al Masum Fahim

Good post. Waiting for your next post on the real life uses of reduce ().

Collapse
saucekode profile image
Chiamaka Mbah Author

Glad you liked it. Thank you.

Collapse
mirkan1 profile image
Mirkan

It was super usefull. Thanks alot

Collapse
saucekode profile image
Chiamaka Mbah Author

You're very welcome. Glad it was helpful.

Collapse
ypedroo profile image
Ynoa Pedro

Thank you, very helpful

🤔 Did you know?

 
🎙 DEV hosts some podcasts that you can find on our Podcasts page.