BY DREW MILEY
Developers can often unintentionally obfuscate work behind the edifice of the languages we write in. Professionally, we find that it is far easier to engage with stakeholders, business experts, and QAs, when the code we have produced has a English-like structure – one that tells a story!
Below is a simple example written in the imperative style that hits an external API to retrieve random users a set number of times, filters and maps by age and email, then saves these to a separate variable.
Confusing to follow! It would be much improved by being written in the declarative style. But how can we do this? Rewriting this from scratch is an option, but instead, let’s try to rewrite it one bit at a time, checking to make sure it continues to function and see where we get to.
Step 1 – Use of Filter & Map
The best place to start is by cleaning up the largest chunk of code in the snippet, where we filter our users and map them to their emails. Thinking about the paradigm we used there, wouldn’t it be good if there were such a thing as map and filter. The excellent news is there is with ES6 array methods, and we can write this using a readable chaining syntax.
Step 2 – Default Parameters
Staying in this area of the code, we can see that we declare a constant `minimumAgeForFilter` that is set to a fallback value if none is passed in. This can be tidied up by using a default parameter.
Step 3 – Async/Await
The next thing to look at is all the `thens` peppered around the code. Structurally, they are there to enable control of synchronicity to our asynchronous api requests. In order to do this, previously we would have to chain them in a confusing nested strucuture. Instead, we can now use the Async/Await keywords in order to make this far easier to read.
Step 4 – Declare constants
Looking at the routine now, we can see the results array being modified and each function simply having a return keyword. This means that there are multiple side effects occuring, and this generally makes our work far harder to reason about and understand.
The final code can be found here. Have a look, and I’m sure you will agree it’s a lot cleaner after all that!