Write Your Own Reduce Function JavaScript

#javascript #functional #tutorial

The JS reduce function is a powerful utility in any developers tool belt and as such it’s crucial to have a good understanding of it. To get an understanding, there is no better way than to build your own.

Imagine we want to get the sum of an array of numbers. Using the native reduce function we would write the following.

    // native reduce function

    const numbers = [1,2,3]

    const sumReducer = (initialValue, current) => initialValue + current;

    const sumOfNumbersNative = numbers.reduce(sumReducer, 0)

    console.log('Native reduce function, ' + sumOfNumbersNative)

    // Native reduce function, 6

As you can see, the reduce function takes two arguments, firstly a callback, and secondly the initial value (a number, or an object for example). The callback is your ‘reducer’, which takes 4 arguments, the accumulator, currentValue, index and array. As you can see in the above example our sumReducer only needs the accumulator and the current value as it is only a simple version.

The initial 0 value is passed into our reduce function, which is then passed into our sumReducer function and added up with all the other numbers to return the number 6.

Be careful to note the difference between the main reduce function and the reducer that you pass into it. The reducer is the logic that you run your reduce with.

Let’s take a look at how we would build a custom reduce function to hopefully clarify things a bit. You should notice that we are looping over the array we pass into it, and running those values through a reducer that will be defined when we use the new reduce function.

    // custom reduce function

    const numbers = [1,2,3]

    const sumReducer = (initialValue, current) => initialValue + current;

    const reduce = (reducer, initialValue, array) => {
      let value = initialValue;

      for(let i = 0; i < array.length; i++) {
        let currentValue = array[i]
        value = reducer(value, currentValue)
      }

      return value;
    }

    const sumOfNumbersCustom = reduce(sumReducer, 0, numbers)

    console.log("Custom reduce function, " + sumOfNumbersCustom);

You can see from the above that all your are doing is running an array of values through your desired logic to get a single output. This single output, could be a number, an array or an object. Similar to how you reduce your tomato sauce down by boiling it, we are reducing our array into a single desired thing. This is a powerful tool that can be utilised on a much more complex items, for example creating a nicely organised JSON object out of a string of data. If you don’t understand it the first time round, keep practicing and eventually it will stick and become second nature.