JavaScript: Array#Reduce()

Lemuel Uhuru
Apr 25, 2018 · 2 min read

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 : ).

    Lemuel Uhuru

    Written by

    DevGenie

    DevGenie

    Access tutorials on Web Development, Blockchain, Chatbots, and more.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade