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.