JavaScript: Array#Reduce()

Lemuel Uhuru
Apr 25, 2018 · 2 min read
Image for post
Image for post

Method Definition:

We’ll start the Daily Method series with one of my favorite iterative methods, Array.prototype.reduce().

The reduce() method accepts and applies a reducer function to each element within the subject array, returning the sum of the current element and an accumulator value for every iteration until the loop completes.

Method Parameters:

The reduce() method accepts a callback, referred to as the Reducer Function as its first parameter, and an initial value for the accumulator as it’s second.

The Reducer function accepts the accumulator, current element, index, and subject array, as the first, second, third, and fourth parameters respectively.

For Example:

function(accumulator, currentElement, currentIndex, subjectArray) {} //callback func signature

Method Return Value:

The reducer() method returns a single accumulated value that results from the reducer function being applied to each member of the subject array.

Example Data

Now that we have an idea of what the reducer() method does, let’s imagine that we are developing an e-commerce web application. We have a shopping cart array filled with product objects containing the following properties:

  • Label
  • Price
  • Quantity
const shoppingCart = [{ label: "Macbook Pro", price: "2000.00", quantity: 3},{ label: "wireless mouse", price: "49.99", quantity: 10},{ label: "wireless keyboard", price: "70.00", quantity: 5},{ label: "webcam", price: "185.00", quantity: 8},{ label: "mic w/ noise popper", price: "135.00", quantity: 2},];

Challenge #1

Our first challenge is to render a shopping cart to the page with the total price displayed. To complete this task we will use the reduce method to return the total price of all products contained within our cart.

shoppingCart.reduce((acc, currProduct) => {  // Psuedocode: 
// Use the reduce method to iterate over the shoppingCart.
// Convert each price to a floating point number.
// Multiple the products price by its quantity for the total
// add the total price to the accumulator
const { price, quantity } = currProduct;
const totalPrice = parseFloat(currProduct.price) * quantity;

return acc + totalPrice;
}, 0);> 8599.9

Conclusion

I hope you have gained a better understanding of how to use the reduce() method through a potential real world application. If you enjoyed this tutorial, please feel free to clap a few times and check out some of my other articles. Until next time, be well : ).

DevGenie

Access tutorials on Web Development, Blockchain, Chatbots…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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