Quick look at the reduce function

You may here a lot about functional programming lately. Functional programming relies on writing pure functions. So, what makes a function pure ?

  • No side effects, doesn’t change anything outside of it’s scope
  • Gets its data from its arguments only
  • Return a value or another function

These things make a pure function a lot easier to test, because it will always return the same value given the same arguments. In Javascript, you can write pure functions, even if Javascript is not a purely functional programming. It just takes more discipline to stick with it.

There are a few methods that you can learn in order to write pure functions. In this blog post, we will look a the Array.prototype.reduce() function.

Reduce is a well named method. It takes an array and reduces it to a single value.

It takes a function as its first parameter. This function can take 4 arguments. It can also take a optional second argument, which is the initial value to the first call of the function. Like so :

[0, 1, 2, 3].reduce( function( accumulator, currentValue, currentIndex, array ){}, [ initialValue ])

The accumulator receives the value returned by the callback function after each iteration. It accumulates it to the previous value it had.

The currentValue is the current value being processed in the array.
The currentIndex is the current index being processed in the array.
array is the target array reduce is called on.

The initialValue is an optional value that indicates if the first value should be different than the first index of the array. If you supply this, reduce will start at index 1 in the array.

So, for each element in the array, reduce executes the callback provided in its first argument.
Let’s look at a simple example.

First call => returns 0 , accumulator = 0

Second call => returns 2, accumulator = 0 + 2 = 2

Third call => returns 3, accumulator = 2 + 3 = 5

Fourth call => returns 4, accumulator = 5 + 4 = 9

Fifth call => returns 5, accumulator = 9 + 5 = 14

No more items, returns 14.

This one returns -14 !

Reduce with functions !

The most interesting aspect of reduce is that it allows you to compose function. You can use the result of a function, use it in another function, then use that in another function …

For example, let’s create 3 functions. The function plus3 takes a number and adds 3. double returns the number multiplied by 2 and minus5 substracts 5 to the number. Then, we can create an array of functions and call reduce on it.

Can you guess what this is going to return ?

We start at 0 and call plus3 => 0 + 3 = 3

We then call double with that value => 3 * 2 = 6

Finally we call minus5 => 6 – 5 = 1

Pretty cool, right ?!

Javascript also gives you a reduceRight function. It works like reduce but you start from the last item of the array. So this:

will return …. -7

The order matters when you are doing such calculations. Of course, here we give 0 as the starting point ( which is the argument given to the first function called in our array ), but that is not mandatory

This will return 11.

By using a tool like reduce, you can create small functions and easily combine them to create more complicated and complete functions. Creating small functions makes them easier to test, easier to debug and assures you that they only do one thing.

functions. Creating small functions makes them easier to test, easier to debug and assures you that they only do one thing.

Creating map() from reduce()

The map function iterates through an array and returns a new array. Each element in the original array are passed to a function. For example:

We can re-create this functionality with reduce:

Can you see how interesting reduce makes things? How we can compose functions with it? Creating small and reusable pieces to create bigger functions?

Unfold to see my solution!

Conclusion

Composition is a very sustainable way to write your code when possible. Favor the creation of small functions that can work together.

Feel free to share and comment.
Have a nice day!

Your email address will not be published. Required fields are marked *

*