Reduce( )πŸ”ŠπŸ”‰πŸ”ˆπŸ”‡: What, Why and How?

#ChaoTime ep.1 All about reduce( ).

Exposition: I am a CSS Grid enthusiast, a Javascript fan, a React-oholic and a passionate Vue-r. I want to further my knowledge in coding by writing about things that confuse me. This is the first post in this series and the character is reduce ( ), the coolest pal in the array built-in method club.

Rising Action: More often than not, if you are looking for commuting a single value from an array, reduce ( ) is your pal 😎.

The reduce() method executes a reducer function (that you provide) on each member of the array resulting in a single output value.The reducer function takes four arguments: 1. Accumulator (acc), 2. Current Value (cur), 3. Current Index (idx), 4. Source Array (src)

The return value of a reduce ( ) is evaluated by repeatedly taking a single element (acc) from the array (src) and combining it with the current value(cur).

The most common use of a reduce( ) function is either to find the sum of all numerical values inside an array:

or counting the instances of each items inside an array:

Climax: However, there are so much more we can do πŸ’ͺ🏻! Here are some great usages:

  1. Organize data: say you have an array of data like this and you would like to have it organize by the name of the customers.

Let’s organize the data for each customer:

Keep in mind, when the parser goes through the code, each line is the individual item inside the array. We use the bracket notation here to get the name of the customer with:

We start with an empty one and push the name, price and quantity as keys to that empty object as set out as initial value in the reduce function. Our output looks like this:

2. Chain Promises: we can also use reduce to run promises in a chained matter (in other words, asynchronously).

In this example, we are calling .reduce( ) on the list of promises (just strings for demo purpose) with an initial value of Promise. resolve( ). The interpreter will then go through each promise and resolve them one by one. Every time one promise gets resolved, it will add a .then( ) to the initial value.

Falling Action: Before you run to refractor your code with reduce and taste it sweet sweet power, let me bore you with couple important lessons I (for sure) and other folks have learnt. You can thank me or Peleke (link to original post) later.

  1. always return.
  2. always set an initial value.
  3. remember reduce( ) returns a single value.

Resolution: For the longest time, I was intimidated by reduce. Whenever I see it in a solution of a stack overflow post, I would freeze and try to look for another solution. But now, I am glad that we are pals now.

Credits: This is a topic that has been well talked about inside the community. For the creation of this post, I was inspired by the following resources:

Here are some other places you can find me on the Internet:

I coded a website for myself.

http://chaoyuezhao.com/

I write at-the-moment short blog post (people also call them tweets): https://twitter.com/ChaoyueZ

Wanted to know about my career journey? Head over: https://www.linkedin.com/in/chaoyuezhao/

And of course, you want to know what food I eat: https://www.instagram.com/chaoyue_zhao/?hl=en

A front-end web dev. Writing in my second language (English) about my third (HTML), fourth (CSS) and fifth (Javascript).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store