I have a simple rule of thumb when choosing to use array methods, and I'd like to share it with you. The array methods I'm discussing here are:
arr.filter(y)arr.map(y)arr.reduce(y)arr.forEach(y)
For me, each of these are answers to the question How does an array need to change?
Briefly, the rule of thumb is this: Use filter if the array length needs to get smaller; use map if the array length stays the same but the elements of the array need to change in some way; use reduce if the array length needs to change, especially bigger, or the array needs to be transformed into some other type, like into an object or a string; and use forEach only when side-effects are necessary
I use these methods all the time in my code, roughly in that order of priority.
If you're already familiar with these, that's it. That's the blog post. You can stop reading. All the rest is just expansion, reiteration. I should have just stopped there, but what kind of blog post would that be? Absurd, that's what
Or go ahead and skim the examples.
If you're not already familiar with these, this post is probably not the best introduction, but I'll give it a good go. MDN is a great resource to learn more about them.
filter #
Use filter if the array length needs to get smaller
filter is straight-forward: a filter removes unwanted stuff, and an array filter removes unwanted elements from your array. This leads inevitably to the array being the same length or smaller
filter takes a predicate for its argument, which is a function that answers a true or false question about that input. If the predicate returns true, the element is included; if it returns false, the element is excluded from the output array
filter examples #
Consider the array [1, "tooth", 3, "fort", "fie!", 6]
This is an array of mixed type, containing elements of type number and string. Let's apply a filter to remove strings from the array, so that it's an array only of numbers
Here is a predicate that returns true if the input is a number and false otherwise: (x) => typeof x === "number"
Putting them together, with filter:
[1, "two", 3, "four", "five", 6].filter((elem) => typeof elem === "number")
This line takes the array [1, "two", 3, "four", "five", 6], applies the filter (elem) => typeof elem === "number" to each element in the array and returns the result, [1,3,6], all and only numbers
Note that the new array is length 3, while the input array is 6. It was a good decision to apply filter in this case!
Here's an example from working code:
const searchSpace = dict.filter((entry) => entry.length == wordLength);
Here, dict is literally a list of words (e.g. "apple", "banana", "pear", ...) only, humongous and the predicate, (entry) => entry.length == wordLength, returns true if the number of characters in entry is exactly wordLength and false if it's any other length. Applying this predicate to dict returns an array of words that all have a length matching wordLength. The statement assigns all of this to the constant searchSpace
Marvelous! The new array searchSpace is smaller than the input array dict, consisting entirely of words that are only of length wordLength. Another win for the Rule of Thumb!
map #
Use map if the array length stays the same but the elements of the array need to change in some way
The map method transforms each element of an array into something else, and returns these new elements in a new array of exactly the same length. It takes as its argument a function that accepts an input value and returns another transformed value based on the input. map passes each element in turn to this function, and returns an array with that function applied to each value
map examples #
Consider the array [1, "tooth", 3, "fort", "fie!", 6] and the function (x) => typeof x === "number"? x : 0
As before, the array is of mixed type, consisting of number and string elements. The function checks if x is of type number and returns x unchanged if it is, or 0 if it's of any other type
Putting them togther with map:
[1, "tooth", 3, "fort", "fie!", 6].map((x) => typeof x === "number"? x : 0) which returns [1, 0, 3, 0, 0, 6]
Note that the input array length is 6, and the output array is the same length! I am pleased
From working code:
const objToQuery = (obj: {}) =>
Object.entries(obj)
.map((entry) => `${entry[0]}=${entry[1]}`)
.join("&")(This is a TypeScript function, but just convert this part (obj: {}) to (obj) and it's JavaScript)
This objToQuery function accepts a simple object (e.g. {page:1,query:"lime"}) and returns a string (e.g. page=1&query=lime) representation of the object. This is useful to convert a (simple!) object into a URL query string
Briefly reviewing Object.entries (and cribbing from MDN), it takes an object and returns an array of its [key, value] pairs. So, using our example object, Object.entries({page:1,query:"lime"}) returns [["page",1],["query","lime"]]
Applying the line .map(entry => `${entry[0]}=${entry[1]}`) to [["page",1],["query","lime"]] returns a simple array ["page=1", "query=lime"]. Finally, applying .join("&") returns a string, each element of the array "joined" with &: "page=1&query=lime"
Note that the input array for map, [["page",1],["query","lime"]] is of length 2 (2 key-value pairs) and the output array ["page=1", "query=lime"] is also length 2 (2 strings). The input and output array stayed the same size, while each element was transformed! This is exactly as we predicted!! Astounding
reduce #
Use reduce if the array length needs to change, especially bigger, or the array needs to be transformed into some other type, like into an object or a string
reduce is misunderstood and mistrusted, but it's probably my favorite of the array methods (Here are two devs shamefully making fun of people who use it, but do use it whenever necessary, and use it confidently and with pride!). I think people are confused by the reduce name, which implies that the array is going to get smaller. Not so! Remember, the array size is going to change or become not an array. Any time you need to expand an array into a bigger array or convert it into something else, consider using reduce
reduce description #
Like the other array methods, reduce takes a function as an argument. Maybe confusingly, this function is called the reducer, but the name isn't important. It's just a function like any other. reduce, like the other methods, calls this function once successively for each element of its input array, in order. Unlike the other methods, this reducer function itself requires 2 arguments instead of 1. Also unlike the other methods, it is the second argument of this function that receives the element value, not the first
The reducer's first argument value is the output of the previous call to the reducer, or if there is no previous element (because it's the first one) it's by default the first element of the array
reduce returns whatever its reducer returns when called with the last element of its input array
More info at MDN
Let's have a quick example or two:
reduce examples #
Consider [1, "two", 3, "four"] and the function (prev, elem) => elem
That function takes two arguments and returns only the second one. Calling that function with ("a","b") would just return "b". It's a useless function on its own, but it's useful as an example. [1, "two", 3, "four"].reduce((prev, elem) => elem) will call that function successively, and the reducer will receive values and return them successively, like so:
// the first element of the array is 1
reduce( (1,1) => 1 )
// So, in this iteration, the first argument is
// by default the first element of the array (1),
// The second argument is the element itself,
// and this reducer returns the second argument, the element itself: value 1
reduce( (1,"two") => "two" ) // the first argument is the result of the previous iteration (1),
// but this reducer ignores it, and just returns the second argument
// the second argument is the value of the element of this iteration (value: "two"),
// and so this iteration returns "two",
// which becomes the first argument value for the next iteration:
reduce( ("two",3) => 3 ) // the first argument is the result of the previous iteration ("two"),
// the second argument is the value of the element for this iteration (3),
// and so it returns 3
reduce( (3,"four") => "four" )
// finally, the first argument is the result of the previous iteration (3),
// the second argument is the value of the element for this iteration ("four"),
// and so it returns "four", and since "four" is the last element of the array
// reduce itself returns "four as its final resultSo [1, "two", 3, "four"].reduce((prev, elem) => elem) returns "four", which is the value of the last call to the reducer, which just returns the last element of the array
Note that the size of the input array is 4, and the output isn't an array at all, but a string!
array into one thing #
Consider the array [1, "two", 3, "four", "five", 6] and the function (str, elem) => `${str}&${elem}
We've seen the array before, an array of mixed types. The function just takes two arguments and joins them using &. Calling this function with "apple" and "banana" will return "apple&banana". That seems rather limited
What happens when we add it to reduce, as in [1, "two", 3, "four", "five", 6].reduce((str, elem) => `${str}&${elem}`) is a bit more interesting, because it returns "1&two&3&four&five&6"
Congratulations! We reinvented .join. No wonder those devs mocked reduce!
array changes size #
Let's strip duplicated elements out of an array!
Consider the function (arr,e) => arr.indexOf(e) >= 0? arr : [...arr, e]
This function takes an array as its first argument, arr, and any value at all as its second argument e. It checks arr.indexOf(e) to see if e is in arr. If it is (i.e. arr.indexOf(e) >= 0) then the function returns arr itself. But if the value e is not in arr (i.e. arr.indexOf(e) === -1) then it returns the array arr with e appended as its final value (i.e. [...arr, e])
So, this function would accept, say ([1,2], 2) and return [1,2]; and would accept ([1,2], 3) and return [1,2,3]. This function when used as a reducer in reduce will return another array with all duplicates stripped
Wait, I forgot to mention one thing before! reduce can take 2 arguments! The first is mandatory, and that's the reducer we've been talking about. The second, optional argument is the first value to be sent to the reducer. If it's not supplied, it's by default the first value of the array, as we discussed before. You okay? Let's take a look:
[1,1,1,2,2,3,3,4,4,4,5,6,6].reduce((arr,e) => arr.indexOf(e) >= 0? arr : [...arr, e], []) is going to return [1,2,3,4,5,6], which is the original array stripped of duplicates
Let's step through it
.reducer([],1) // is the first iteration.
// its first argument is `[]`, which we gave as the second argument to reduce, above
// its second argument, 1, is the element value of this iteration
// Reducer checks [] to see if it has `1` in it, and it doesn't, so reducer returns `[1]`
// ...which now becomes the value of the first argument sent to the second iteration:
.reducer([1],1)
// reducer checks `[1]` to see if it contains `1`
// It does! So reducer returns `[1]`
// the next iteration is identical, because arr[3] is value 1
// So skipping ahead to:
.reducer([1],2)
// reducer checks `[1]` to see if it contains `2`
// it does *not*, so reducer returns `[1,2]`
// ... which is the first argument of the next iteration...
// and so on, until the last element of the array:
.reducer([1,2,3,4,5,6],6)
// reducer checks the array to see if 6 is in it, and it is
// so it returns the array itself, unaltered
// and since `reduce` is at the end of the input array
// `reduce` returns the first argument value,
// the array is the solution!Stick all of that in a named function, and you can strip duplicates out of any array you pass in
const uniq = (arr) => arr.reduce((acc,e) => acc.indexOf(e) >= 0? acc : [...acc, e], [])
So
uniq([1, 1, 1, 2, 2, 3, 3, 4, 4, 4, 5, 6, 6]) // => [1,2,3,4,5,6]What else can reduce do? #
Oh, lots. Maybe you have a succession of functions and you want to pass the result of one into the next one in turn. For instance, if you want to extract the user id and password sent in an auth header, you could do something like this:
export function getUserIdPassword(headers) {
const headerValue = getAuthHeaderValue(headers)
const decodedHeader = decodeAuthHeader(headerValue)
const parsedHeader = parseAuthHeader(decodedHeader)
return parsedHeader
}Or you could do:
export const getUserIdPassword = (headers) =>
[getAuthHeaderValue, decodeAuthHeader, parseAuthHeader].reduce(
(acc, func) => func(acc),
headers
)Personal preference. No judgment.
Maybe you want to create an object out of key-value pairs. You can do:
const toObj = (keyValues) =>
keyValues.reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {})
toObj([
["page", 1],
["fields", "size,weight,color"],
["priority", "A"],
]) // => {page: 1, fields: "size,weight,color", priority: "A"}In all of these cases, we're essentially converting an array into something else, maybe another different array. If you're doing that, reduce might get you there faster.
forEach #
use forEach only when side-effects are necessary
Briefly, a side effect is when a function changes a value or has an effect outside of its own scope. So, a quick f'rinstance:
let count = 0
function incr() {
count = count + 1
}Calling incr() causes a side-effect of incrementing count by 1
So, if you need to do something like that, forEach is your method. The function that forEach accepts as an argument returns no value. Nothing. It's of type void. So:
(elem) => {} is pretty much it
Maybe you want to clear a signup form:
const clearSignupForm = () =>
Array.from(getElem("form").querySelectorAll("input")).forEach(
(i) => (i.value = "")
)Or maybe you want to log array contents to your console:
data.forEach((elem, i) => console.log(i, elem))Personally, I use forEach only when a side effect is the only solution possible. I never do something like:
let keyValObj = {}
[["page",1],["fields","size,weight,color"],["priority","A"]].forEach([key,value] => keyValObj[key] = value)It becomes difficult to know what's going on with keyValObj as the codebase grows. Better to have the direct assignment:
const keyValObj = [
["page", 1],
["fields", "size,weight,color"],
["priority", "A"],
].reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {})Extraneous addendium #
I didn't tell you something. All of these array methods take functions as arguments... MDN calls them callbacks so let's do that. All of these array methods take callbacks as we've discussed. The thing I didn't mention is that these array methods pass more values to the callbacks than just the current value of the array. They also receive the current index of the array, and after that, the entire array. That looks like this:
Lets pass into ["zero", "one", "three"].forEach this callback: (elem, index, arr) => console.log({ elem, index, arr }) and see the output.
;["zero", "one", "three"].forEach((elem, index, arr) =>
console.log({ elem, index, arr })
)
// {elem: "zero", index: 0, arr: ["zero", "one", "three"]}
// {elem: "one", index: 1, arr: ["zero", "one", "three"]}
// {elem: "three", index: 2, arr: ["zero", "one", "three"]}As we see here, the elem value is followed by the index value of the current array, followed by arr which contains the entire input array
Same goes for the callbacks on all the other methods, including reduce. In case you find it useful
Also, you can chain these methods together. Here's an example of how that's done:
exampleEnvEntries = exampleEnv
.replace(/\r/g, "\n")
.replace(/\n{2}/g, "/n")
.split("\n")
.map((l) => l.trim())
.filter((l) => !l.startsWith("#")) // eliminate comments
.filter((l) => l.length > 0) // eliminate blank linesThis takes a string called exampleEnv, splits it into an array which holds one line of text per element, removes blank spaces at the beginning and end of each of those lines, filters out any that start with # and discards any blank lines
Later, this example file is tested against the user's file and warns the user if their file is missing something or if they have not changed something they should have changed, using forEach:
exampleEnvEntries.forEach((line) => {
const [varName, varValue] = line.split("=")
test(`${varName} is defined as an environmental variable`, () => {
expect(process.env[varName]).toBeDefined()
})
// The value of each SECRET or PASSWORD in 'example.env' is not the same as in process.env
if (varName.indexOf("SECRET") >= 0 || varName.indexOf("PASSWORD") >= 0)
test(`${varName} is not ${varValue}`, () => {
expect(process.env[varName]).not.toBe(varValue)
})
})