Introduction to JavaScript Higher Order Functions: Reduce
Introduction to Higher Order Functions - Reduce

This practical course explores the JavaScript Higher Order Function - Reduce. A higher order function is a function that takes another function as an argument or returns a function.  The purpose of the reduce function is to take an array and reduce it to a singular value.

Learning Objectives

  • Learn how reduce works
  • Learn about the reducer function, which is the first argument of reduce
  • Learn about the structure of the reducer and how it iterates through the array argument
  • Learn about the optional initial value which may change the result of the reduce function

Intended Audience

This course is intended for anyone who wants to learn about JavaScript Higher Order Functions: Reduce.


Introduction to JavaScript Higher Order Functions: Map & Filter

This course does include the use of template string expressions as part of its demonstration. If you are not familiar with this subject, the following course is recommended:

Introduction to JavaScript Template Literals


Introduction to JavaScript higher-order functions: reduce. The premise behind the reduce function is to reduce an array into a singular value. On the screen, I have a shoppingCart array, which is an array of objects. Each object has two properties: a product and a price. I'm going to reduce this array to get the total of the shopping cart. And I'm gonna begin by creating an arrow function. Const cartTotal equals shoppingCart.reduce parenthesis. And inside of the parentheses, I'm gonna pass through two arguments. So I will need another parenthesis and then total and element.

I'm using element just to make this clear that reduce will iterate through each element in the given array. Now the arrow. Then curly brackets. And inside of the curly brackets, I'm gonna return total plus element.price. Now, technically, the reduce function is ready to be executed. But there is an optional initial value argument that I can pass through. After the curly brackets, before the closing parentheses, I will type comma zero. And because I'm using zero, it will not change the outcome of this function. Down below, I'm gonna console.log cartTotal and I will execute it and to the right is the total of the shoppingCart.

So what would be the result if I change the initial value from zero to 10? I will execute the console.log on the cartTotal again and to the right, we can see that the value has increased by 10. So the initial value in a reducer function will affect the final outcome. Now I'm gonna take a deeper look into how the reduce function works. Reduce is a higher order method that takes two arguments: A function that's often referred to as a reducer, and an initialValue, which is optional. Now, the reducer function can have up to four arguments.

The first, known as the previousValue, which is also sometimes referred to as the accumulator. And then the currentValue, which is the current element at the iteration cycle. Now, the iteration cycle is dependent on whether that optional initialValue is given. If the initialValue is given, the previousValue will equal the initialValue at the start of the iteration cycle. Then the currentValue will equal the array at the index of zero. If no initialValue is given, then the previousValue will equal the array's value at the index of zero, and the currentValue will equal the array's value at the index of one.

The next argument is the currentIndex, which isn't required and can be used to track the currentIndex of the currentValue. And then lastly is the array, which is what is being traversed by the reduce method. In this case, we're not passing the array as a direct argument because we are attaching the reduce method to the array itself. Now I'm gonna return back to the editor to demonstrate this argument structure and iteration cycle a little further.

Now, back at the editor, I've already changed the initialValue back to zero. And now inside of the cartTotal arrow function, I'm gonna add two console.logs. Using template strings, the first console.log will be the previous value is string expression total. And then the second console.log will be the current value is string expression element.price. Now I'm gonna execute the cartTotal console.log again, and I'm going to examine the results.

To begin, I stated earlier that if an initialValue is given, the previousValue will start off being equal to the initialValue. The initialValue is zero. We can see through the first console.log that the previous value is zero. Then the current value would be the array's value at the index of zero. And this lines up with the first value in the shoppingCart array. The process repeats itself two more times, increasing the value of the previous value to accumulate to a final result equaling 28. And that's it. Thanks for watching at Cloud Academy.

About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics