Reducer functions are simple, yet challenging to master. The minimalist solutions that reducers implement are often too abstract for new developers. Also, it is difficult to visualize the nearly limitless ways reducers can be used to manage and simplify data. Ultimately, most programmers at some point will find reducers mystifying.

Let’s strengthen our knowledge by writing some JavaScript! We will start by going over the fundamentals of reducers by creating a reduce function. Then we will create advanced functions and break down their execution step by step. Finally, we will use our functions to reduce API results from theMovieDb.org. Let’s dive in!

The Basics

Libraries like Redux uses reducers to manage state across large web applications. However, reducer functions can also be used to change the state of an individual data structure.

Let’s check out an example that can be used to reduce an array to an integer

const add = (accumalator, currentValue) => accumalator + currentValue // reducer function
[1,2,3,4,5].reduce(add) // => 15 // method that executes reducer

Our reducer add() takes two arguments: an accumulator and a current value. The Array.Reduce()method executes a reducer and sets its return value equal to the accumulator, this continues until the array iteration completes. At invocation, the accumulator is set to the initial value, an optional variable. If no initial value is given the accumulator is set to the first element of the array.

If this is confusing, don’t worry! We will begin breaking down these steps shortly. Let’s start by creating a function that replicates the behavior of Array.Reduce()

const reduce = (array, reducer, initValue) => {
    let accumulator = (!initValue) ? array.shift() : initValue
    array.forEach((el) => accumulator = reducer(accumulator, el))
    return accumulator
}

let reduce = reduce([1,2,3], add) // => 6

let reduceWithInitValue = reduce([1,2,3], add, 10)) // => 16

Our reduce function takes three arguments: an array to reduce, a reducer function to execute, and an initial value for the accumulator. We use .shift() to set the initial value to the first element in the array if initValue is undefined. We then iterate through the array while setting the accumulator equal to the result of our reducer function, this continues until the accumulator is a single result. Finally, we return the accumulator. Let’s visualize how this works.

// example using const reduceWithInitValue
array = [1,2,3], initialValue = 10 

// on first iteration
accumulator = initialValue = 10
currentValue = 1 
reducer = add(10, 1)
accumulator = reducer

// second iteration
accumulator = 11
currentValue = 2
reducer = add(11, 2)
accumulator = reducer

// third iteration 
accumulator = 13
currentValue = 3
reducer = add(13, 3) 
accumalator = reducer

// final result => 16

The example above illustrates how the accumulator is incremented on every iteration. It also demonstrates how the current value is added to the accumulator through the reducer function, in our case, add . Internalize the information above and you’ll be on your way to mastering reduce!

#javascript #web-development #programming #developer