The Javascript reduce method is a recursive way to perform a computation based on every element in the array, while also taking into consideration the previous element in the array. It accepts a function, which can also be used to further process elements of the based on a logic of your choosing. array It is quite useful for summing arrays or merging string-based arrays. For example, we could turn an array into a string like this: let myArray = [ 'hello', 'world', 'welcome!' ] let reduceString = myArray.reduce((previousElement, currentElement) => { return `${previousElement} ${currentElement}`; }) console.log(reduceString); // hello world welcome! In a similar vein, we could use it to add up all the numbers in an array and return a single number: let myArray = [ 5, 10, 15, 20 ] let reduceString = myArray.reduce((previousElement, currentElement) => previousElement + currentElement) console.log(reduceString); // 50 The reduce method callback function The callback function used in reduce actually has 4 arguments. You are not required to use any, but the first two are the two you will usually want. The format of the function looks like this: Array.reduce((previousElement, currentElement, currentIndex, array) => { // Do something with the array's data }, initialValue) Let's look at what , , , and all mean. previousElement currentElement currentIndex array initialValue previousElement This is self-explanatory. It represents the previous element from the current one we are iterating through. The function will usually start at the index , so that a previous element does exist. If you have defined an , then this value will be used and the function will begin at the index , using the as the . reduce [1] initialValue reduce [0] initialValue previousValue currentElement This is the current element that is being iterated through by reduce. currentIndex Since arrays don't consist of just indexes, and often have useful data in them, we also have the ability to get the current index being iterated through. This will return the 0 indexed number representing the current element's position in the array. Expect standard array indexes from this argument. array This will return the entire array - which can be useful if you plan to manipulate the array using , or, if you want to compute based on other elements in the array reduce initialValue If provided, this will be the for index . previousElement [0] As mentioned, this iss all optional, but they all provide a useful way to manipulate and calculate the return value for your method. reduce Mutating the Array in reduce If you try to mutate the array in , it could lead to some interesting behavior - so there are a few edge cases you should consider when thinking about . reduce reduce For example, if you change an array element somewhere ahead of your current element, the reduction will still work as expected. For example, adding to will still produce the expected value: 1000 myArray[currentIndex + 1] let myArray = [ 4, 5, 6, 7, 8 ] let reduceFunction = myArray.reduce((prevValue, currentValue, currentIndex) => { myArray[currentIndex + 1] += 1000 return prevValue + currentValue }); console.log(reduceFunction); // 3030 , trying to add values to an array while running will not work. For example, below I use to add one element to the array for each element in the array. This would of course lead to an infinite loop, so Javascript arrests the function and only processes the values that were in the array at the point when we ran : However reduce push reduce let myArray = [ 4, 5, 6, 7, 8 ] let reduceFunction = myArray.reduce((prevValue, currentValue, currentIndex) => { myArray.push(1000) return prevValue + currentValue }); console.log(reduceFunction); // 30 Note on Single Value Arrays If your array only contains one value and you don't use , the function will return the single value from that array, and not call the callback function. For example: initialValue reduce let myArray = [ 'cat' ] let reduceFunction = myArray.reduce((prevValue, currentValue) => { return currentValue + '!' }); console.log(reduceFunction); // cat (does not have exclamation mark, even though we tried to add it) Summing and Combining Values in an Object Array You might have already expected this behavior, but if you have an array of objects, you can reference the child properties of each element object to make calculations. For example, to add up all the s below: age let myArray = [ { age: 52 }, { age: 34 }, { age: 104 }, { age: 29 } ] let reduceFunction = myArray.reduce((prevValue, currentValue) => { return prevValue + currentValue.age }, 0); console.log(reduceFunction); // 219 You might've noticed a few weird things here, which is why it's useful to work through this example: We have to define an , since initially, is , but afterward, is a . That means we keep types consistent. initialValue prevValue { age: 52 } prevValue number Since every time we run , it returns the value for the current item in the array element, we use rather than . is undefined, since returns a number each time. reduce prevValue prevValue.age prevValue.age reduce Conclusion The method is a really useful way to combine everything in an array or produce new arrays of your choosing. It's powerful and - so be careful when using it on large data sets. reduce recursive Also published here.
