Array reduce vs chaining vs for loop

Photo by Tine Ivanič

A comparison of different approaches to operating on an array

Watch "Array reduce vs chaining vs for loop" on egghead.io

I've been in the process of moving some of my digital life around and one thing that I've had to do is download all of my photos from Google Photos. Thanks to the way those are organized, I found the need to rearrange them, so I wrote a little node script to do it. What the script does is not entirely relevant for this post so I'm not going to go into detail, (but here's the whole thing if you wanna give it a read-through). Here's the bit I want to talk about (edited slightly for clarity):

1const lines = execSync(`find "${searchPath}" -type f`).toString().split('\n')
2
3const commands = lines
4  .map(f => f.trim())
5  .filter(Boolean)
6  .map(file => {
7    const destFile = getDestFile(file)
8    const destFileDir = path.dirname(destFile)
9    return `mkdir -p "${destFileDir}" && mv "${file}" "${destFile}"`
10  })
11
12commands.forEach(command => execSync(command))

Basically all this does is uses the linux find command to find a list of files in a directory, then separate the results of that script into lines, trim them to get rid of whitespace, remove empty lines, then map those to commands to move those files, and then run those commands.

I shared the script on twitter and had several people critiquing the script and suggest that I could have used reduce instead. I'm pretty sure both of them were suggesting it as a performance optimization because you can reduce (no pun intended) the number of times JavaScript has to loop over the array.

Now, to be clear, there were about 50 thousand items in this array, so definitely more than a few dozen you deal with in typical UI development, but I want to first make a point that in a situation like one-off scripts that you run once and then you're done, performance should basically be the last thing to worry about (unless what you're doing really is super expensive). In my case, it ran plenty fast. The slow part wasn't iterating over the array of elements multiple times, but running the commands.

A few other people suggested that I use Node APIs or even open source modules from npm to help run these scripts because it would "probably be faster and work cross platform." Again, they're probably not wrong, but for one-off scripts that are "fast enough", those things don't matter. This is a classic example of applying irrelevant constraints on a problem resulting in a more complicated solution.

In any case, I did want to address the idea of using reduce instead of the map, filter, then map I have going on there.

With reduce

Here's what that same code would be like if we use reduce

1const commands = lines.reduce((accumulator, line) => {
2  let file = line.trim()
3  if (file) {
4    const destFile = getDestFile(file)
5    const destFileDir = path.dirname(destFile)
6    accumulator.push(`mkdir -p "${destFileDir}" && mv "${file}" "${destFile}"`)
7  }
8  return accumulator
9}, [])

Now, I'm not one of those people who think that reduce is the spawn of the evil one (checkout that thread for interesting examples of reduce), but I do feel like I can recognize when code is actually simpler/more complex and I'd say that the reduce example here is definitely more complex than the chaining example.

With loop

Honestly, I've been using array methods so long, I'll need a second to rewrite this as a for loop. So... one sec...

Ok, here you go:

1const commands = []
2for (let index = 0; index < lines.length; index++) {
3  const line = lines[index]
4  const file = line.trim()
5  if (file) {
6    const destFile = getDestFile(file)
7    const destFileDir = path.dirname(destFile)
8    commands.push(`mkdir -p "${destFileDir}" && mv "${file}" "${destFile}"`)
9  }
10}

That's not much simpler either.

EDIT: BUT WAIT! We can simplify this thanks to for..of!

1const commands = []
2for (const line of lines) {
3  const file = line.trim()
4  if (!file) continue
5
6  const destFile = getDestFile(file)
7  const destFileDir = path.dirname(destFile)
8  commands.push(`mkdir -p "${destFileDir}" && mv "${file}" "${destFile}"`)
9}

Honestly I do think that's not a whole lot better than the traditional loop, but I do think it's pretty simple. I think some people discount for loops because they're "imperative", when they're actually pretty useful.

My take

Often, I'm going to be choosing between chaining and for..of loops. If I have a performance concern with iterating over the array multiple times, then for..of will definitely be my selection of choice.

I don't often use reduce, but sometimes I'll try it out and compare it to other options and go with that. I realize how subjective that sounds, but so much of coding is subjective so 🤷‍♂️

I'd be interested to hear what you think. Reply to the tweet below and let me know. And feel free to retweet if that's something you're into.

Array reduce vs chaining vs for loop: A comparison of different approaches to operating on an arrayhttps://t.co/i11N1Uiqox

Which would you choose?

— Kent C. Dodds (@kentcdodds) January 14, 2020