Stop Hating On Array.reduce()
Tags: javascript, typescript, webdev, datastructures
Published: 2023-07-20 05:01:32

There has been some controversy recently about whether or not JavaScript developers should use the [`Array.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce?ref=devchronicles.io) method.

Here's just a few posts that were part of the recent Tweet storm:

{% twitter 1681027968985104386 %} 

{% twitter 1681285782475259905 %} 

{% twitter 1681148216585392128 %} 


Of course, everyone is entitled to their own opinion! But this article is dedicated to why everyone with the opinion that `Array.reduce()` is bad is wrong 😈

> Disclaimer: They aren't wrong 😅 I'm as opinionated as the rest of 'em!

# What does it do?

[`Array.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce?ref=devchronicles.io) is an array function in JavaScript that is used to reduce the contents of an array down to a single value using a function called a *reducer.*

A popular example usage of the function is a reducer that returns the sum of all numbers in an array:

```javascript
const value = [1,2,3,4].reduce((acc, cur) => { 
    return acc + curr 
}, 0)

// value: 10
```

The function takes in two arguments:

1. `callback`: A callback function, the *reducer*
    
2. `initialValue`: The initial value the accumulated value builds upon
    

The callback function takes in 4 optional parameters:

1. `accumulator`: The accumulated value
    
2. `currentValue`: The current item in the array you are iterating through
    
3. `currentIndex`: The current index of the array you are iterating through
    
4. `array`: The entire array you are iterating through
    

A full signature looks like:

```javascript
const reducer = (accumulator, currentValue, currentIndex, array) = > { 
    return accumulator; 
}

const value = [...].reduce(reducer, 0)
```

# What's the problem?

After digging through the complaints, the recurring theme is that `Array.reduce()` is too difficult to read and understand.

While reviewing code, scanning through a new codebase or reading documentation, coming across an `Array.reduce()` requires you to stop and think for a moment about what is actually happening with an array.

These opinions are based around the fact that you can achieve the same result with another `Array` method such as `Array.forEach()` or even a simple `for` loop in a way that is more readable.

While the opinions hit on a good point... they're wrong!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689828197213/96fe8b4c-f75d-41f7-b363-58f665b0482c.gif align="left")

# My reasoning

There are a few things that come to mind when I read these comments. I think a lot of the reasoning behind these opinions are perfectly valid! But the frustration is directed at the wrong thing.

My first thought about this matter is that the real frustration isn't about the method signature and complexity at all, but rather about a developer's worst enemy: *naming things.*

In fact, this in my opinion is so deeply rooted in the controversy that it shows itself in two different ways!

### Exhibit A: It shouldn't be named reduce

First, the method itself is named `reduce`. While this method name makes sense in many situations... the `Array.reduce()` method is so powerful that it can do far more than reduce an array to a single value.

Consider the following usage of the function:

```javascript
const smallNumbers = [1,2,3,4,5] 
const largeNumbers = smallNumbers.reduce((newArray, current) => { 
    newArray.push(current ** 2) 
    return newArray 
}, [])

// largeNumbers: [1,4,9,16,25]
```

In this case, we aren't reducing the initial array at all... we are *transforming* it! So... is this reason enough to hate `Array.reduce()`? I think not!

```javascript
Array.prototype.transform = Array.prototype.reduce;
```

Boom, fixed.

Obviously, that's a joke. A joke that would fix the problem completely, but still a joke.

### Exhibit B: People are lazy when naming parameters

How many times have you seen a loop like the following:

```javascript
const array = [...] 
let crazyValue = 0; 
for (let i = 0; i < array.length; i++) { 
    for (let j = 0; j < i; j++) { 
        crazyValue = i + j; 
    } 
}
```

Really?? `i` and `j`? Why are these single-character variable names so common that it almost seems normal to look at?

The same *(disgusting)* problem exists with `Array.reduce()` usage. You will often see this:

```javascript
const array = [...]; 
const crazyvalue = array.reduce((acc, curr, i, arr) => { 
    return acc + curr 
}, 0)
```

`acc`, `curr`, `i` and `arr`....really guys?? We can do better. Let's fix this confusing problem by being a lot more descriptive with our variable names:

```javascript
const array = [...]; 
const crazyvalue = array.reduce((total, currentValue, index, originalArray) => { 
    return total + currentValue 
}, 0)
```

Or better yet:

```javascript
const array = [...]; 
const initalValue = 0; 
const addValues = (total, currentValue, index, originalArray) => { 
    return total + currentValue; 
}

const crazyvalue = array.reduce(addValues, initialValue)
```

Now, this may not be the perfect solution but it certainly makes the code a lot easier to read and digest.

# What do you think?

So, is `Array.reduce()` all that bad? Personally, I would say no. If you understand that `Array.reduce()` is a powerful function that can do more than simply reduce an array to a single value, it is actually pretty easy to follow.

A lot of the issues I see with it are user-errors related to naming conventions.

What do you think? Am I completely off-base here? [@ me on Twitter](https://twitter.com/sabinthedev) and we can fight about it 🤺

### *Bonus question:*

```javascript
Array.prototype.transform = Array.prototype.reduce 
const add = (total, current) => total + current 
const intialValue = 0 
const sumOfNumbers = [1,2,3,4,5].transform(add, initialValue)
```

*Yay or nay?*