Start a free Courses trial
to watch this video
The reduce() method in JavaScript is used to apply a function to each element in an array, with the purpose of reducing the array to a single value. It has some relatively straightforward applications such as calculating the sum or average of the elements in an array. However, it can also perform more complex operations, including flattening a multi-dimensional array into a single-dimensional array, counting the occurrences of a particular element in an array, converting an array of objects into a single object, filtering an array based on a condition, and more. Learn how to use reduce() with Dustin as he goes over some use cases and the official documentation.
Related Content
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[MUSIC] 0:00 Hey, what's up? 0:09 My name is Dustin, and I'm a developer here at Treehouse. 0:10 Today, we'll tackle the JavaScript array method, reduce(). 0:12 This one's a little bit more complex than the ones that we've used before, but 0:15 I'll explain exactly how to use it. 0:19 Make sure to check out the description or teacher's notes down below for 0:20 related resources. 0:23 If you're ready, let's get into it. 0:24 So what is reduce()? 0:27 Well, the reduce() method in JavaScript is used to apply a function to each element 0:28 in an array with the purpose of reducing the array to a single value. 0:33 This method is often used for tasks such as getting the sum of all elements in 0:38 an array, or even just calculating the average of all the elements in an array. 0:42 Let's check out a few examples and use cases for this method. 0:47 This first example is an easy one. 0:51 We're just taking all the array items from our array and getting the sum. 0:53 Let's break down what's going on, and what some of these names mean. 0:57 We have an array with three values, 10, 20, and 30. 1:01 We create a variable named arraySum that is equal to array.reduce, 1:05 then you see accumulator and current value as parameters and our callback 1:09 function as well as a 0 just before the closing parenthesis on line nine. 1:14 The 0 is what's known as our initial value. 1:18 The first time reduce() processes our array accumulator is equal to this 1:21 initial value that we have explicitly defined, which in this case is 0. 1:26 If no initial value is defined, 1:31 accumulator just holds the value of the first array index, and 1:33 the reduce method starts processing the array at the second array item. 1:36 So in our example we are returning accumulator plus current value. 1:41 So the first time our array is processed, 1:45 accumulator holds the value of initial value, which is 0. 1:47 currentValue is just the current item in the array being processed, 1:51 which the first time the array is being processed is the first array item. 1:54 So we are essentially returning 0 + 10, this equals 10. 1:59 So accumulator now equals 10. 2:04 And the process starts over. 2:06 This process repeats until all items in the array have been processed. 2:08 So the second time through the array, we return 10 + 20, which is 30. 2:12 So now accumulator = 30. 2:17 And the array is processed again at the next index, 30. 2:20 30 + 30 = 60. 2:24 There are no more array items to process, so 2:27 we're returned with a single value of 60. 2:29 If we change the initial value from 0 to 100, we will start 2:32 with the accumulator equaling 100, and our final output would be 160. 2:36 Now that we understand how the parameters work, let's check out some more examples. 2:42 This next example is another array being reduced to a total sum. 2:47 We have an array with 1, 2, 3, 4, and 5 as values. 2:51 reduce() is being called on this numbers array, and each time it's being processed, 2:56 the total is being accumulated into the total parameter. 3:01 It's important to note that we're calling our accumulator parameter, total. 3:04 Also, current value is being called num. 3:09 You can name these parameters anything you'd like, so 3:12 it's best to be descriptive. 3:14 There is no initial value set, so 3:17 reduce() is setting total to the first array value, which is 1. 3:19 And the reduce() process starts at the second index. 3:23 We're left with a sum of 15. 3:27 This next example shows a good way to use reduce() to get the average of values in 3:30 an array. 3:34 We can see that we have the exact same array items as before in 3:35 the previous example. 3:38 And we're running the reduce() method in the same way by adding all 3:40 the array items and getting a sum. 3:43 The sum, just like in the previous example, is 15. 3:45 We have five array items, so numbers.length equals 5. 3:48 15 is being divided by 5, and we're left with 3. 3:52 This is an easy way to grab the average for an array. 3:57 We start getting a little more complex with this next example. 4:01 We have a numbers array, but each array item is an array of two numbers. 4:05 This is what's called a multidimensional array. 4:09 We can use the reduce() method to convert this into a single-dimensional array. 4:12 Let's break down what's going on. 4:16 You can see that we are setting an empty array as our initial value parameter. 4:17 Each time the array is being processed, we are taking our accumulator parameter, 4:22 which is being called total. 4:26 And we're using the concat method to concatenate the current value, 4:28 which has been called nums. 4:32 If you're unfamiliar with how concat works, it's pretty simple. 4:34 The concat method is used to merge two or more arrays together. 4:37 So the first time the array is being processed, total equals an empty array. 4:42 And we are concatenating the current value, 4:46 which the first time through the numbers array, we see an array holding 1 and 2. 4:48 This process repeats until there are no more items in the numbers array to 4:53 process, and we're left with one array holding all the array items. 4:57 This next example is pretty useful. 5:01 Sometimes you might have the same item appear in your array, and 5:04 you wanna know how many times it appears. 5:06 reduce() works really well for figuring this out. 5:09 You can see here that we're trying to find how many times the number 2 appears in 5:12 our array. 5:16 So in our callback, we are testing if the current value, 5:16 which is being called num, is 2. 5:20 And if it is, we want to increment our total or accumulator. 5:22 When the array is finished being processed, 5:26 total equals the number of times 2 appears in our array. 5:29 Oftentimes, I've been faced with trying to convert an array of objects to a single 5:32 object. 5:37 reduce() works really well for this also. 5:37 You can see here that we have a variable named people, and 5:40 it's equal to an array of objects. 5:43 We want just a single object where each property is a name and 5:45 the value is their age. 5:49 What we can do is create a new variable that is equal to people.reduce. 5:50 We will take our object, which is our accumulator that is set to an empty object 5:55 from our initial value, and set it equal to person or currentValue.age. 6:00 When the array is finished being processed, 6:06 we're left with a single object with all name properties and age values. 6:08 These are just a few examples of what reduce() can do. 6:12 If you'd like to use the exact examples that I've used, check out the teacher's 6:15 notes or description for a link to a blog post covering this method. 6:19 I have all these examples in there. 6:23 I suggest practicing this method for a while until it becomes familiar, and 6:25 you're comfortable using it. 6:29 Sweet, that about covers it for the JavaScript array method reduce(). 6:30 I hope this guide helped, and I'll see you in the next one. 6:34 Until then, have fun, and happy coding. 6:36
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up