Reducer Seducer

In my flatiron discussion group, we discuss reducer functions and how they work with our state and action of our Redux or React application. Now I was not a fan of reducer functions based on my previous encounters with them but as our discussion group continued to work through these discussion problems I saw how the functionality operated and the benefits that reducer functions bring. I was seduced to reduce. My goal is to spark that flame within your coding loins and make you a lover of reducer as well.

I will be working through some of the discussion question on Reducers and showing the work process of using reducer to perform many capabilities that you are able to do with map, filter and flatten functions.

(warning: snippets are ginormous, but you are able to see images clearly)

But first, let’s review how a basic reduce function operates. When given an array to reduce you are working with four components, and Accumulator, current value, current index and the array. Optionally you can have an initial value as well, what

“Your reducer function’s returned value is assigned to the accumulator, whose value is remembered across each iteration through the array, and ultimately becomes the final, single resulting value.” — (from mozillla.org)

Here is the Syntax:

arr.reduce(callback( accumulator, currentValue, [, index[, array]] )[, initialValue])

Callback — The function that is executed on each of the elements in the array. It does not execute on the first element in the array if there is not an initial value.

Accumulator — The accumulator accumulates callback’s return values. It is the accumulated value previously returned in the last invocation of the callback — or initialValue, if it was supplied.

CurrentValue — The current element being processed in the array.

Index(optional) — The index of the current element being processed in the array. Starts from index 0 if an initialValue is provided. Otherwise, it starts from index 1.

Array (optional)— The array reduce() was called upon.

InitialValue(optional) — A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentValue. Calling reduce() on an empty array without an initialValue will throw a TypeError.

• provided by mozilla.org, check out reduce for more information.

With this information in mind, let’s look at some examples…

Joining with reduce

In these examples, ‘memo’ will be the accumulator. We have an array of strings that we want to join. When joining an array of strings, memo will be the first index of the array and string will be the current value that is processed in the array. When you return the memo + the string evaluated, it will join the strings together like the “. join()” method.

In this next example, we want to flatten an array of array of items:

flatten([[1,2,3], [4,5,6]])
=> [1,2,3,4,5,6]

…Follow along in the console window

Flattening with Reduce

Here we will use the spread syntax. We are saying expand the memo, the first array with the arrays that follows. You have to use the spread operator on the memo itself in order to access the first array.

Filtering with Reduce

In this example, we have an array of objects. In objects there are key and value pairs. Key essential is the description of the value. You access the value of the key by dot notation. ex. key.value. We want to use an empty array as our optional starting value. This is so memo will be added to the array. We use person as our current value but we just want the age so we access the age by dot notation. As you can see, we tried using array.prototype.push but push just returns the length of the array and not the value itself.

Map method using Reduce

Here, we want to have an original array and iterate on each element in the array just like the map method. So we need an empty array as our initial value. we use the “…” spread operator on the memo so that we add the num or element that we are iterating to the memo in the array.

Filtering using Reduce

We can filter using Reduce. We have a basic number array that we are reducing. In the body of the function, we have a ternary operator that says if the number in the array can be evenly divided then pass that number in the empty array. If not then just return the array.

Working through Objects with Reduce

Here is another example of working through array of objects. This time we have more than one value for the object. Now we want to use the spread operator not only one the memo but on the object of colors as well.

Using Reducer as a calculator

In this example we created a calculator array of objects that have a type of operator and value associated to each element in the array. We want to go through each operator and create a new value base on the type of operator. Here we will need an initial value because you cannot add to ‘null’. Here is what we are doing:

6 ( + ) 4 ( *) 3 ( /) 2 ( — ) 3 = 12

I hope going through these examples help you as much as it has helped me. If you are still unsure how to use reduce, if you are still not seduced by reduce then be sure to reach out. There are awesome resources on the internet or fellow coders willing to help you learn. I know that I would not be able to learn reduce function if it was not for my fellow coders in my discussion group. Big shout out to them…