CSS reducer

I was recently mentoring someone who had trouble with the

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

const nums = [1, 2, 3]
let value = 0

for (let i = 0; i < nums.length; i++) {
  value += nums[i]
}

…to this:

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

They are functionally equivalent and they both sum up all the numbers in the array, but there is a bit of paradigm shift between them. Let’s explore reducers for a moment because they’re powerful, and important to have in your programming toolbox. There are literally hundreds of other articles on reducers out there, and I’ll link up some of my favorites at the end.

What is a reducer?

The first and most important thing to understand about a reducer is that it will always only return one value. The job of a reducer is to reduce. That one value can be a number, a string, an array or an object, but it will always only be one. Reducers are really great for a lot of things, but they’re especially useful for applying a bit of logic to a group of values and ending up with another single result.

That’s the other thing to mention: reducers will not, by their nature, mutate your initial value; rather they return something else. Let’s walk over that first example so you can see what’s happening here. The video below explains:

Your browser does not support the video tag.

It might be helpful to watch the video to see how the progression occurs, but here’s the code we’re looking at:

const nums = [1, 2, 3]
let value = 0

for (let i = 0; i < nums.length; i++) {
  value += nums[i]
}

We have our array (

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

Let’s try this a little differently:

const nums = [1, 2, 3]
const initialValue = 0

const reducer = function (acc, item) { 
  return acc + item
}

const total = nums.reduce(reducer, initialValue)

Now we have the same array, but this time we’re not mutating that first value. Instead, we have an

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

We’ll use

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

const nums = [1, 2, 3]
const initialValue = 0

const reducer = (acc, item) => { 
  return acc + item
}

const total = nums.reduce(reducer, initialValue)

And then shortened some more! Implicit returns for the win!

const nums = [1, 2, 3]
const initialValue = 0

const reducer = (acc, item) => acc + item

const total = nums.reduce(reducer, initialValue)

Now we can apply the function right where we called it, and we can also plop that initial value directly in there!

const nums = [1, 2, 3]

const total = nums.reduce((acc, item) => acc + item,

An accumulator can be an intimidating term, so you can think of it like the current state of the array as we’re applying the logic on the callback’s invocations.

The Call Stack

In case it’s not clear what’s happening, let’s log out what’s going on for each iteration. The reduce is using a callback function that will run for each item in the array. IThe following demo will help to make this more clear. I’ve also used a different array (

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

See the Pen showing acc, item, return by Sarah Drasner (@sdras) on CodePen.

When we run this, we’ll see this output in the console:

"Acc: 0, Item: 1, Return value: 1"
"Acc: 1, Item: 3, Return value: 4"
"Acc: 4, Item: 6, Return value: 10"

Here’s a more visual breakdown:

Your browser does not support the video tag.

1. It shows that the accumulator is starting at our initial value,

   const nums = [1, 2, 3]
   const value = nums.reduce((ac, next) => ac + next, 0)

   3
2. Then we have the first item, which is 1, so our return value is

   const nums = [1, 2, 3]
   const value = nums.reduce((ac, next) => ac + next, 0)

   8 (

   const nums = [1, 2, 3]
   const value = nums.reduce((ac, next) => ac + next, 0)

   9)

3. const nums = [1, 2, 3]
   const value = nums.reduce((ac, next) => ac + next, 0)

   8 becomes the accumulator on the next invocation
4. Now we have

   const nums = [1, 2, 3]
   const value = nums.reduce((ac, next) => ac + next, 0)

   8 as the accumulator and 3 is the item aince it is next in the array.
5. The returned value becomes

   const nums = [1, 2, 3]
   let value = 0
   
   for (let i = 0; i < nums.length; i++) {
     value += nums[i]
   }

   2 (

   const nums = [1, 2, 3]
   let value = 0
   
   for (let i = 0; i < nums.length; i++) {
     value += nums[i]
   }

   3)
6. That, in turn, becomes the accumulator and the next item at invocation is

   const nums = [1, 2, 3]
   let value = 0
   
   for (let i = 0; i < nums.length; i++) {
     value += nums[i]
   }

   4
7. That results in

   const nums = [1, 2, 3]
   let value = 0
   
   for (let i = 0; i < nums.length; i++) {
     value += nums[i]
   }

   5 (

   const nums = [1, 2, 3]
   let value = 0
   
   for (let i = 0; i < nums.length; i++) {
     value += nums[i]
   }

   6) and is our final value since

   const nums = [1, 2, 3]
   let value = 0
   
   for (let i = 0; i < nums.length; i++) {
     value += nums[i]
   }

   4 is the last number in the array

Simple Examples

Now that we’ve got that under our belt, let’s look at some common and useful things reducers can do.

How many of X do we have?

Let’s say you have an array of numbers and you want to return an object that reports the number of times those numbers occur in the array. Note that this could just as easily apply to strings.

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]

const result = nums.reduce((tally, amt) => {
  tally[amt] ? tally[amt]++ : tally[amt] = 1
  return tally
}, {})

console.log(result)

See the Pen simplified reduce by Sarah Drasner (@sdras) on CodePen.

Wait, what did we just do?

Initially, we have an array and the object we’re going to put its contents into. In our reducer, we ask: does this item exist? If so, let’s increment it. If not, add it and set it to 1. At the end, please return the tally count of each item. Then, we run the reduce function, passing in both the reducer and the initial value.

Take an array and turn it into an object that shows some conditions

Let’s say we have an array and we want to create an object based on a set of conditions. Reduce can be great for this! Here, we want to create an object out of any instance of a number contained in the array and show both an odd and even version of this number. If the number is already even or odd, then that’s what we’ll have in the object.

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]

// we're going to make an object from an even and odd
// version of each instance of a number
const result = nums.reduce((acc, item) => {
  acc[item] = {
    odd: item % 2 ? item : item - 1,
    even: item % 2 ? item + 1 : item
  }
  return acc
}, {})

console.log(result)

See the Pen simplified reduce by Sarah Drasner (@sdras) on CodePen.

This will shoot out the following output in the console:

const nums = [1, 2, 3]
const value = nums.reduce((ac, next) => ac + next, 0)

OK, so what’s happening?

As we’re going through every item in the array, we create a property for even and odd, and based on an inline condition with a modulus operator, we’ll either store the number or increment it by 1. The modulus operator is really good for this because it can quickly check for even or odd — if it’s divisible by two, it’s even, if not, it’s odd.

Other resources

At the top, I mentioned other posts out there that are handy resources to get more familiar with the role of reducers. Here are a few of my favorites:

How to reduce CSS size?

What is the best CSS Minifier?

How to convert normal CSS to minified?

Why minimize CSS?