• 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
1 year 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
1 year 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

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • Which Neural DSP Archetype Plugins Should You Buy?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Removing A Character From The Start/End of a String In Javascript
  • How To Convert FormData To JSON Object
  • How To Correctly Use Semantic HTML5 <article>, <main> and <section> Tags
  • Wild Natural Deodorant Review
  • How To Get Last 4 Digits of A Credit Card Number in Javascript

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz