DEV Community

ES6 - Higher-Order Functions

skaytech on August 01, 2020

Introduction In this article, we will first understand what a higher-order function is and then look at a few code examples of the popul...

Read full post

pentacular • Aug 2 '20

Actually, I don't think that I'd consider this to be simpler or more readable.

const totalProfit = marvelMovies.reduce((accumulator, movie) => {
    return accumulator + movie.profit;
}, 0);

The problem with reduce is that it is a general purpose tool, with boilerplate baggage, so it carries almost no meaning in itself, and needs decoding.

In other words, it carries the wrong level of abstraction for direct use.

On the other hand, this would be simpler.

const sum = (array, accessor) => array.reduce((sum, value) => sum + accessor(value), 0);
// ...
const totalProfit = sum(marvelMovies, movie => movie.profit);

skaytech • Aug 2 '20 • Edited

Hi Pentacular,

Thanks for reading the article. I believe I have translated the explanation on how to use the reduce function as closely as possible to the MSDN docs.

Reduce is one function that everyone has varying opinions. Your examples have definitely made the syntax shorter using ES6 shorthand techniques.

In my humble opinion, the term 'Simpler' is very relative. What maybe simple to you might not be to othrrs. Having said that, I always welcome other ways to do the same thing without attaching any tags to it 🙏.

Please continue to share your views and thanks once again for reading my article. Cheers!!

Garret • Aug 2 '20

I personally prefer the way in which the article is written. Sure the word sum may sound nicer for this very specific case of array reduce, but you are unnecessarily making a function that does not need to be there.

skaytech • Aug 2 '20

Like I said, it's a personal preference..

Matthew Clark • Aug 2 '20

Thanks for this, great article. I think one of the best methods to learn the built in higher order functions is to attempt writing your own implementation of it by overriding the 'prototype' of Array, (.forEach, .map etc.) for example. Maybe even add some other functionality just out of curiosity :)

skaytech • Aug 2 '20

You are welcome 🙂 it's true with ES6 things were nicely wrapped with fluff but within prototype methods lies the true implementation

Mohsen Alyafei • Aug 1 '20

Thanks. Great article.

skaytech • Aug 1 '20

Thanks for reading 🙏

Mohsen Alyafei • Aug 1 '20

Indeed. This article made me have some new ideas for optimizing my code. Thanks again.

skaytech • Aug 1 '20

Cool.. I think there are some great nice code examples which you'll enjoy in this article as well - dev.to/skaytech/es6-spread-operato...

Hemant Joshi • Aug 1 '20 • Edited

Super helpful post🎉🎉🎉🎉,

It is a big request from my side please keep posting suck posts daily😳, as a Mern stack Dev these are really helpful.

I used to use .map and forEach but now I see a lot of options in my head and I am clearly familiar with the proper examples😁.

Thank you..

Ps: " I read such productive posts during bed time just to over think on the learning"

skaytech • Aug 2 '20

Thanks Hemant. Daily is difficult. I'll try weekly one post. Glad you are enjoying them.

Hemant Joshi • Aug 2 '20

Sure😁..