Writing Clever Code

I'm pretty sure that every software developer has experienced moments in his/her life where he/she would like to write some clever code just for the sake of it. Just today I experienced the very same feeling.

Problem Description

Problem at hand was quite simple. There were two relatively big arrays having tens of thousands of items coming from different sources. There was a need to iterate over one of them and while doing that find a matching element from the other big array to create a new combined big array.

Let me bring some code examples to make it more clear for all the coders. Let's say that we have a bunch of users in an array where each user has references to multiple avatars:

const users = [
  {id: 1, name: 'Joe', avatars: [1, 2, 4]},
  {id: 2, name: 'Jane', avatars: [3]},
  {id: 3, name: 'Roger', avatars: [6, 5]},
  // ...
  {id: 10000, name: 'Richard', avatars: [10000]},
]
    

We have avatars themselves in a different array:

const userAvatars = [
  {id: 1, avatar: 'img/avatars/joe.png'},
  {id: 2, avatar: 'img/avatars/dog.jpeg'},
  {id: 3, avatar: 'img/avatars/cat.png'},
  {id: 4, avatar: 'img/avatars/empty.png'},
  {id: 5, avatar: 'img/avatars/person.png'},
  {id: 6, avatar: 'img/avatars/r2.png'},
  // ...
  {id: 10000, userId: 10000, avatar: 'img/avatars/richie.bmp'},
]
    

We need to create another array out of these two arrays ending up something like this:

const usersWithAvatars = [
  {name: 'Joe', avatar: 'img/avatars/joe.png'},
  {name: 'Joe', avatar: 'img/avatars/dog.jpeg'},
  {name: 'Jane', avatar: 'img/avatars/cat.png'},
  {name: 'Joe', avatar: 'img/avatars/empty.png'},
  {name: 'Roger', avatar: 'img/avatars/person.png'},
  {name: 'Roger', avatar: 'img/avatars/r2.png'},
  // ...
  {name: 'Richard', avatar: 'img/avatars/richie.bmp'},
]
    

There are multiple ways of achieving this result. Easiest way in my mind would be to create a so-called index where key is avatar id and value is user so that it would be easy and fast to find user by knowing avatar id.

The Clever Way

The so-called clever way would be like this:

const usersByAvatarId = users
  .reduce((memo, user) => user.avatars
    .reduce((memo, avatar) => ({...memo, [avatar]: user}), memo), {})
const result = userAvatars
  .map((userAvatar) => ({name: usersByAvatarId[userAvatar.id].name, avatar: userAvatar.avatar}))
    

Clever, right? Easy to read? Understandable? (Most) likely not. We could simplify it little by using a different variable name for the inner reduce:

const usersByAvatarId = users
  .reduce((memo, user) => user.avatars
    .reduce((outerMemo, avatar) => ({...outerMemo, [avatar]: user}), memo), {})
const result = userAvatars
  .map((userAvatar) => ({name: usersByAvatarId[userAvatar.id].name, avatar: userAvatar.avatar}))
    

Is it any better? Maybe, but not better enough to actually commit that code into VCS! It's not readable at all even when you're quite familiar with reduce and all that fancy JavaScript syntax. There's even further problems with this code - since {...outerMemo, [avatar]: user} creates a new instance of the whole memo then it will become quite slow with bigger arrays.

Readable Code

Let's create a not that clever, but actually readable and maintainable code! What about this:

const usersByAvatarId = users.reduce((memo, user) => {
  user.avatars.forEach((avatar) => memo[avatar] = user)
  return memo
}, {})
const result = userAvatars
  .map((userAvatar) => ({name: usersByAvatarId[userAvatar.id].name, avatar: userAvatar.avatar}))
    

Now, by just using a simple Array.prototype.forEach the code got a slightly longer in the terms of lines, but a lot easier to understand. And it's blazing fast.

Conclusion

Writing clever code should not be always written because it causes complexities in understanding it later by others or even by future you. Writing clever code can even cause performance issues when not thinking about all of the peculiarities of the used programming language. Next time when you have a temptation to write some clever code then think twice before doing that! You might be making a gift to everyone else.

---

Solutional is an agile software development company which has a team of professional engineers who are able to solve all software problems from beginning to the end without any middlemen.

Contact us at info@solutional.ee in case you have any new or existing projects needing help with successful execution.

---