Let's take a quick look at how Array.reduce works. You can skip this if you're already familiar with it.
Array.reduce reduces an array down to a single value. The resulting value can be of any type - it does not have to be an array. This is one way in which Array.reduce differs from other array methods like 'map' and 'filter'. Here's a reduce statement that returns the sum of an array of numbers:
Array.reduce accepts two arguments:
1. A callback function that is executed for each item in the array in series and receives the following parameters:
2. The reduce statement in 'Example 1' will execute the callback function five times with the following values:
The final value of 'sum' will be '15'.
Remember that Array.reduce can use initial and return values of any type, which makes it very flexible. Let's explore how we can use it to perform some common tasks with plain objects.
Developers frequently have to look up a value in one array using a value from another array. Consider the following hypothetical example where we have an array of objects representing users and another array representing profiles. Each user has an `id` property and each profile has a 'userId' property. We need to match each user with their profile, where 'user.id' equals 'profile.userId'. A basic implementation of this is shown in Example 2.
The problem with Example 2 is that it uses Array.find inside Array.map which is inefficient. This might not matter for the short arrays in the example, but it will become more of a problem when working with longer arrays. The longer the profiles' array is, the longer the potential lookup time will be for any given profile. We can solve this problem by transforming the 'profiles' array into an object beforehand, using the 'userId' property as the key:
Example 3 produces the same result as Example 2 but will be much faster with long arrays.
Sometimes you need a copy of an object that only includes certain properties from the original object, or that omits certain properties. This is a great use case for Array.reduce.
Example 4 reduces the keys from the 'person' object into a new object that only contains the properties whose keys are included in the 'allowedProperties' array. If you add a new property to the 'person' object it will not appear in the result unless you also add the property name to the allowed properties.
Example 5 reduces the keys from the 'person' object into a new object that only contains the properties whose keys are _not_ included in the 'disallowedProperties' array. If you add a new property to the 'person' object it _will_ appear in the result unless you also add the property name to the disallowed properties. If you want to ensure that only certain properties will be included in the result, Example 4 is a better choice, but Example 5 is useful when you only need to ensure that certain properties will never included.
We can also create generic functions for the reduce statements in examples 4 and 5:
Another common task is to merge an object with another object that contains fallback, or default values for some properties. Sometimes you can do this simply by using object spread, but this can have unexpected consequences when you have null or empty properties:
Example 7 creates a new object containing the properties from 'obj2' overridden by the properties from 'obj1'. Therefore, the values from 'obj2' serve as fallback or defaults for the values from 'obj1'. Notice that the result retains the 'null' and empty string values from 'obj1'. That happens because 'null' and an empty string are both defined values. We probably didn't want this result but 'Array.reduce' offers a solution.
Note that Example 8 uses a naive strategy to decide when to use the fallback value. The fallback value ('obj2[key]') is used if the preferred value ('obj1[key]') is falsey. That means 'undefined', 'null', an empty string, '0 or 'false'. This may not be appropriate for all cases, since any of these values might be acceptable in your application. Revise the fallback condition as necessary. For example, replacing 'const value = obj1[key] || obj2[key];' with 'const value = (obj1[key] !== undefined && obj1[key] !== null) ? obj1[key] : obj2[key];' will ensure that the fallback value is only used when the preferred value is 'undefined' or 'null'.
Finally, let's look at another very common task that developers often use a third party library to accomplish: parsing search strings (sometimes called query strings). Modern web browsers provide URLSearchParams to make quick work of this, but maybe you aren't writing code for a browser, or you have to support Internet Explorer, or you just want to try doing it yourself because that's how we learn. Whatever your reason, 'Array.reduce' is your friend.
First, we need a search string. You might get this directly from 'window.location.search' in a browser or by parsing an URL. If you use React and react-router you might use the 'useLocation' hook:
However you get the search string, you'll need to prepare it first:
Next, reduce the key-value strings into an object by splitting them on the equals sign. The string before = is the key and the remainder is the value. The value needs to be decoded with decodeURIComponent.
The parser in Example 9a/9b will do the job in many cases, but it's incomplete. Search strings can contain multiple values for each key, and this parser will only retain the last value for each key. Let's fix that.
Example 10 prepares the search string exactly the same way as Example 9a. The difference is how the reduce callback handles the value for each key. Here's a step by step breakdown of the callback function:
The resulting params object contains string values for key1 and key2, and an array containing the three strings for key3 in the order in which they appeared in the search string.
Like we did in Example 1, we can clarify the process by examining the state of each iteration:
Array.reduce is sort of a Swiss army knife that you can use to solve a wide variety of problems. I encourage you to explore it and try applying it in situations you might not have considered.
7 signs you may want to look for in your technology to know if it’s time to change it.