Implementing Reduce in javascript (Part 1)

Daily javascript :)

I've spent a lot of time trying to learn the map/reduce functions, and more after that trying to use it in a daily basis.

For this reason i've decided to write this tutorial, but i don't want to simply explain how/when to use this function, we are going to implement the reduce function together, and using ONLY this function we are going to implement map, filter, flatMap and some other function to work with iterable objects.

Why implement reduce?

Because it will help you to understand how the function works, and you will be able to use it to any iterable object in javascript (like Set and Map), also you can implement it in any language you're using.

WTF is reduce?

The reduce function returns the result of applying a given function to an iterable object, accumulating the result in each iteration. So the idea is (like the name says) to transform the iterable object in a single object (or a "smaller "iterable), so it is perfect to sum all the elements of an array for instance.

Implementing reduce

A possible implementation for reduce is:

const reduce = function(iterable, reduceFn, accumulator){
  for(let i of iterable){
    accumulator = reduceFn(accumulator, i)
  }
  return accumulator
}

As you can see our reduce function receive 3 parameters, the first one is the iterable object, the second the function (reduceFn) to be applied to each element of the iterable object (this function receives 2 parameters, the first is the accumulator and the second an elemento of the iterable object), the last is an initial value for the accumulator.

Looking at this implementation, we can see that reduce is just an iteration over each element of an iterable which substitutes the accumulator for the result of applying the given function to the current accumulator value and the next element.

We can test our code using it to sum all the elements in an array:

console.log(reduce([1,2,3], (acc,elem)=>acc+elem , 0)) // Prints 6

If you go step-by-step, in the first iteration the accumulator is 0 and the element is 1, so it will accumulate 1 (0 + 1), on the second iteration the accumulator is 1 (from the previous iteration) and the next element is 2, so it accumulates 3 (1 + 2), for the last iteration the accumulator is 3 (from the previous iteration) and the next element is 3, so it accumulates 6 (3 + 3), since we don't have any other elements, we return the accumulator (6).

Our reduce function uses for … of and for this reason can be applied to any iterable object in javascript as a Set:

const mySet = new Set([1,2,3])
console.log(reduce(mySet, (acc,elem)=>acc+elem , 0)) // Prints 6

Now we can implement new functions using only reduce. We already seem how easy it is to implement a sum function:

const sum = function(iterable){
  return reduce(iterable ,(acc, elem)=> acc+elem, 0)
}
console.log(sum(1,2,3)) // Prints 6

That was easy, now how we can find the maximum number in an array:

const max = function(it){
  return reduce(it,(acc, elem)=> Math.max(acc,elem),it[0] )
}
console.log(max([0,2,3,-1,9])) // Prints 9

Or the minimum:

const min = function(it){
  return reduce(it,(acc, next)=> Math.min(acc,elem),it[0])
}
console.log(max([0,2,3,-1,9])) // Prints -1

On the next post we will see what is and how to implement the functions map, filter and flatMap using ONLY the reduce function.

Ps: Clap if you liked, and don't forget to follow me here and on twitter @oliveira_erich