• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

I Used To Hate Using Reduce In Javascript, And Now I Can’t Stop

Javascript · April 27, 2020

I used to be vehemently against using `reduce` in Javascript. It wasn’t because I thought there was a better way, I actually think the functional programming purists and their aggressive approach to advocacy are what really turned me off. That and those who advocate for using it over a basic for loop as well.

Now, there are instances where I truly believe that filter, map and reduce should not be used. If you’re just wanting to quickly iterate over a collection of values, in many instances. a for..loop will beat all of those aforementioned methods in performance every single time. And if you’re dealing with large collections of items, you will notice.

The reduce method is great for reducing values to either a singular value or manipulating the shape of data from one form to another. If you want to flatten an array, look no further than reduce. Want to average out a bunch of numbers and return a singular value? Oh, hi there reduce.

Here is an actual snippet of code I wrote not long before writing this post:

return rows.reduce((arr, row) => {
    row.contractPayload = JSON.parse(row.contractPayload) ?? {};
    arr.push(row);
    return arr;
}, [])

I am taking a bunch of rows from an SQLlite database, iterating over them and parsing a property which is stringified JSON, parsing it into an object or empty object if it doesn’t parse properly.

If I was one of those fancy developers that used shorthand for everything, I could have used the spread operator to really condense this code down into a one liner (inside the callback), but I am far too practical and prefer writing readable verbose code in most situations.

For a long time I used to be the type of developer who would create a variable with an empty array inside of it and use a for loop to push into the array, which gives you the same result.

I instinctively find that I naturally will reach for reduce over a traditional for loop whenever possible. In instances where I notice substantial performance issues, I’ll write a loop.

The real power and value of reduce is that it negates the need for unnecessary code. I guess they call it reduce because it reduces the amount of code you need to write as well. Neat.

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dummy Bastard
Dummy Bastard
2 years ago

Use a map. Reduce is not made for returning arrays. It should return a single value.

ps: added some immutability just for the sake of it.

return rows.map((row) => {
return {
…row,
contractPayload: JSON.parse(row.contractPayload) ?? {};
};
});

0
Kevmeister68
Kevmeister68
2 years ago

I think this sentence says it all: “In instances where I notice substantial performance issues, I’ll write a loop.”

The suggestion is that, yeah, you know the loop is probably faster, but unless it’s noticeable you won’t worry about it. Considering that the loop is really no more complex than the reduce (and probably simpler), and you have a strong inkling that it’s probably faster, I can’t see why you would use reduce pretty much ever.

I don’t know if I’ve ever bothered using it. Everyone can read a for loop. Not everyone will remember what reduce does or how it works.

It’s not in the same league as using array.sort( ), for example.

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • Thoughts on the Flipper Zero
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz